web前端筆試題面試題匯總+前端優(yōu)化總結(jié)

《web前端筆試題面試題匯總+前端優(yōu)化總結(jié)》由會(huì)員分享，可在線閱讀，更多相關(guān)《web前端筆試題面試題匯總+前端優(yōu)化總結(jié)（43頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

前端是龐大的 包括 HTML CSS Javascript Image Flash 等等各種各樣的資源 前端優(yōu)化是復(fù)雜的 針對(duì)方方面面的資源都有不同的方式 那么 前端優(yōu)化的目的是什么 1 從用戶角度而言 優(yōu)化能夠讓頁(yè)面加載得更快 對(duì)用 戶的操作響應(yīng)得更及時(shí) 能夠給用戶提供更為友好的體驗(yàn) 2 從服務(wù)商角度而言 優(yōu)化能夠減少頁(yè)面請(qǐng)求數(shù) 或者 減小請(qǐng)求所占帶寬 能夠節(jié)省可觀的資源 總之 恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點(diǎn)的用戶體驗(yàn)并且能 夠節(jié)省相當(dāng)?shù)馁Y源利用 前端優(yōu)化的途徑有很多 按粒度大致可以分為兩類 第 一類是頁(yè)面級(jí)別的優(yōu)化 例如 HTTP 請(qǐng)求數(shù) 腳本的無(wú)阻塞 加載 內(nèi)聯(lián)腳本的位置優(yōu)化等 第二類則是代碼級(jí)別的優(yōu)化 例如 Javascript 中的 DOM 操作優(yōu)化 CSS 選擇符優(yōu)化 圖片 優(yōu)化以及 HTML 結(jié)構(gòu)優(yōu)化等等 另外 本著提高投入產(chǎn)出比 的目的 后文提到的各種優(yōu)化策略大致按照投入產(chǎn)出比從大 到小的順序排列 一 頁(yè)面級(jí)優(yōu)化 1 減少 HTTP 請(qǐng)求數(shù) 這條策略基本上所有前端人都知道 而且也是最重要最 有效的 都說(shuō)要減少 HTTP 請(qǐng)求 那請(qǐng)求多了到底會(huì)怎么樣 呢 首先 每個(gè)請(qǐng)求都是有成本的 既包含時(shí)間成本也包含 資源成本 一個(gè)完整的請(qǐng)求都需要經(jīng)過(guò) DNS 尋址 與服務(wù)器 建立連接 發(fā)送數(shù)據(jù) 等待服務(wù)器響應(yīng) 接收數(shù)據(jù)這樣一個(gè) 漫長(zhǎng) 而復(fù)雜的過(guò)程 時(shí)間成本就是用戶需要看到或者 感受 到這個(gè)資源是必須要等待這個(gè)過(guò)程結(jié)束的 資源上由于每個(gè) 請(qǐng)求都需要攜帶數(shù)據(jù) 因此每個(gè)請(qǐng)求都需要占用帶寬 另外 由于瀏覽器進(jìn)行并發(fā)請(qǐng)求的請(qǐng)求數(shù)是有上限的 具體參見此 處 因此請(qǐng)求數(shù)多了以后 瀏覽器需要分批進(jìn)行請(qǐng)求 因 此會(huì)增加用戶的等待時(shí)間 會(huì)給用戶造成站點(diǎn)速度慢這樣一 個(gè)印象 即使可能用戶能看到的第一屏的資源都已經(jīng)請(qǐng)求完 了 但是瀏覽器的進(jìn)度條會(huì)一直存在 減少 HTTP 請(qǐng)求數(shù)的主要途徑包括 1 從設(shè)計(jì)實(shí)現(xiàn)層面簡(jiǎn)化頁(yè)面 如果你的頁(yè)面像百度首頁(yè)一樣簡(jiǎn)單 那么接下來(lái)的規(guī)則 基本上都用不著了 保持頁(yè)面簡(jiǎn)潔 減少資源的使用時(shí)最直 接的 如果不是這樣 你的頁(yè)面需要華麗的皮膚 則繼續(xù)閱 讀下面的內(nèi)容 2 合理設(shè)置 HTTP 緩存 緩存的力量是強(qiáng)大的 恰當(dāng)?shù)木彺嬖O(shè)置可以大大的減少 HTTP 請(qǐng)求 以有啊首頁(yè)為例 當(dāng)瀏覽器沒(méi)有緩存的時(shí)候訪 問(wèn)一共會(huì)發(fā)出 78 個(gè)請(qǐng)求 共 600 多 K 數(shù)據(jù) 如圖 1 1 而當(dāng) 第二次訪問(wèn)即瀏覽器已緩存之后訪問(wèn)則僅有 10 個(gè)請(qǐng)求 共 20 多 K 數(shù)據(jù) 如圖 1 2 這里需要說(shuō)明的是 如果直接 F5 刷 新頁(yè)面的話效果是不一樣的 這種情況下請(qǐng)求數(shù)還是一樣 不過(guò)被緩存資源的請(qǐng)求服務(wù)器是 304 響應(yīng) 只有 Header 沒(méi) 有 Body 可以節(jié)省帶寬 怎樣才算合理設(shè)置 原則很簡(jiǎn)單 能緩存越多越好 能 緩存越久越好 例如 很少變化的圖片資源可以直接通過(guò) HTTP Header 中的 Expires 設(shè)置一個(gè)很長(zhǎng)的過(guò)期頭 變化不頻繁 而又可能會(huì)變的資源可以使用 Last Modifed 來(lái)做請(qǐng)求驗(yàn)證 盡可能的讓資源能夠在緩存中待得更久 關(guān)于 HTTP 緩存的 具體設(shè)置和原理此處就不再詳述了 有興趣的可以參考下列 文章 HTTP1 1 協(xié)議中關(guān)于緩存策略的描述 Fiddler HTTP Performance 中關(guān)于緩存的介紹 3 資源合并與壓縮 如果可以的話 盡可能的將外部的腳本 樣式進(jìn)行合并 多個(gè)合為一個(gè) 另外 CSS Javascript Image 都可以用相應(yīng) 的工具進(jìn)行壓縮 壓縮后往往能省下不少空間 4 CSS Sprites 合并 CSS 圖片 減少請(qǐng)求數(shù)的又一個(gè)好辦法 5 Inline Images 使用 data URL scheme 的方式將圖片嵌入到頁(yè)面或 CSS 中 如果不考慮資源管理上的問(wèn)題的話 不失為一個(gè)好辦法 如果是嵌入頁(yè)面的話換來(lái)的是增大了頁(yè)面的體積 而且無(wú)法 利用瀏覽器緩存 使用在 CSS 中的圖片則更為理想一些 6 Lazy Load Images 這條策略實(shí)際上并不一定能減少 HTTP 請(qǐng)求數(shù) 但是卻 能在某些條件下或者頁(yè)面剛加載時(shí)減少 HTTP 請(qǐng)求數(shù) 對(duì)于 圖片而言 在頁(yè)面剛加載的時(shí)候可以只加載第一屏 當(dāng)用戶 繼續(xù)往后滾屏的時(shí)候才加載后續(xù)的圖片 這樣一來(lái) 假如用 戶只對(duì)第一屏的內(nèi)容感興趣時(shí) 那剩余的圖片請(qǐng)求就都節(jié)省 了 有啊首頁(yè)曾經(jīng)的做法是在加載的時(shí)候把第一屏之后的圖 片地址緩存在 Textarea 標(biāo)簽中 待用戶往下滾屏的時(shí)候才 惰性 加載 2 將外部腳本置底 前文有談到 瀏覽器是可以并發(fā)請(qǐng)求的 這一特點(diǎn)使得 其能夠更快的加載資源 然而外鏈腳本在加載時(shí)卻會(huì)阻塞其 他資源 例如在腳本加載完成之前 它后面的圖片 樣式以 及其他腳本都處于阻塞狀態(tài) 直到腳本加載完成后才會(huì)開始 加載 如果將腳本放在比較靠前的位置 則會(huì)影響整個(gè)頁(yè)面 的加載速度從而影響用戶體驗(yàn) 解決這一問(wèn)題的方法有很多 在這里有比較詳細(xì)的介紹 這里是譯文和更詳細(xì)的例子 而 最簡(jiǎn)單可依賴的方法就是將腳本盡可能的往后挪 減少對(duì)并 發(fā)下載的影響 3 異步執(zhí)行 inline 腳本 inline 腳本對(duì)性能的影響與外部腳本相比 是有過(guò)之而 無(wú)不及 首頁(yè) 與外部腳本一樣 inline 腳本在執(zhí)行的時(shí)候 一樣會(huì)阻塞并發(fā)請(qǐng)求 除此之外 由于瀏覽器在頁(yè)面處理方 面是單線程的 當(dāng) inline 腳本在頁(yè)面渲染之前執(zhí)行時(shí) 頁(yè)面 的渲染工作則會(huì)被推遲 簡(jiǎn)而言之 inline 腳本在執(zhí)行的時(shí) 候 頁(yè)面處于空白狀態(tài) 鑒于以上兩點(diǎn)原因 建議將執(zhí)行時(shí) 間較長(zhǎng)的 inline 腳本異步執(zhí)行 異步的方式有很多種 例如 使用 script 元素的 defer 屬性 存在兼容性問(wèn)題和其他一些問(wèn) 題 例如不能使用 document write 使用 setTimeout 此外 在 HTML5 中引入了 Web Workers 的機(jī)制 恰恰可以解決此 類問(wèn)題 4 Lazy Load Javascript 隨著 Javascript 框架的流行 越來(lái)越多的站點(diǎn)也使用起 了框架 不過(guò) 一個(gè)框架往往包括了很多的功能實(shí)現(xiàn) 這些 功能并不是每一個(gè)頁(yè)面都需要的 如果下載了不需要的腳本 則算得上是一種資源浪費(fèi) 既浪費(fèi)了帶寬又浪費(fèi)了執(zhí)行花費(fèi) 的時(shí)間 目前的做法大概有兩種 一種是為那些流量特別大 的頁(yè)面專門定制一個(gè)專用的 mini 版框架 另一種則是 Lazy Load YUI 則使用了第二種方式 在 YUI 的實(shí)現(xiàn)中 最初只 加載核心模塊 其他模塊可以等到需要使用的時(shí)候才加載 5 將 CSS 放在 HEAD 中 如果將 CSS 放在其他地方比如 BODY 中 則瀏覽器有可 能還未下載和解析到 CSS 就已經(jīng)開始渲染頁(yè)面了 這就導(dǎo)致 頁(yè)面由無(wú) CSS 狀態(tài)跳轉(zhuǎn)到 CSS 狀態(tài) 用戶體驗(yàn)比較糟糕 除 此之外 有些瀏覽器會(huì)在 CSS 下載完成后才開始渲染頁(yè)面 如果 CSS 放在靠下的位置則會(huì)導(dǎo)致瀏覽器將渲染時(shí)間推遲 6 異步請(qǐng)求 Callback 在某些頁(yè)面中可能存在這樣一種需求 需要使用 script 標(biāo)簽來(lái)異步的請(qǐng)求數(shù)據(jù) 類似 Javascript Callback 函數(shù) function myCallback info do something here HTML cb 返回的內(nèi)容 myCallback Hello world 像以上這種方式直接在頁(yè)面上寫 對(duì)頁(yè)面的性能也 是有影響的 即增加了頁(yè)面首次加載的負(fù)擔(dān) 推遲了 DOMLoaded 和 window onload 事件的觸發(fā)時(shí)機(jī) 如果時(shí)效性 允許的話 可以考慮在 DOMLoaded 事件觸發(fā)的時(shí)候加載 或者使用 setTimeout 方式來(lái)靈活的控制加載的時(shí)機(jī) 7 減少不必要的 HTTP 跳轉(zhuǎn) 對(duì)于以目錄形式訪問(wèn)的 HTTP 鏈接 很多人都會(huì)忽略鏈 接最后是否帶 假如你的服務(wù)器對(duì)此是區(qū)別對(duì)待的話 那 么你也需要注意 這其中很可能隱藏了 301 跳轉(zhuǎn) 增加了多 余請(qǐng)求 具體參見下圖 其中第一個(gè)鏈接是以無(wú) 結(jié)尾的方 式訪問(wèn)的 于是服務(wù)器有了一次跳轉(zhuǎn) 8 避免重復(fù)的資源請(qǐng)求 這種情況主要是由于疏忽或頁(yè)面由多個(gè)模塊拼接而成 然后每個(gè)模塊中請(qǐng)求了同樣的資源時(shí) 會(huì)導(dǎo)致資源的重復(fù)請(qǐng) 求 二 代碼級(jí)優(yōu)化 1 Javascript 1 DOM DOM 操作應(yīng)該是腳本中最耗性能的一類操作 例如增 加 修改 刪除 DOM 元素或者對(duì) DOM 集合進(jìn)行操作 如果 腳本中包含了大量的 DOM 操作則需要注意以下幾點(diǎn) a HTML Collection 在腳本中 document images document forms getElementsByTagName 返回的都是 HTMLCollection 類型的集合 在平時(shí)使用的時(shí) 候大多將它作為數(shù)組來(lái)使用 因?yàn)樗?length 屬性 也可以 使用索引訪問(wèn)每一個(gè)元素 不過(guò)在訪問(wèn)性能上則比數(shù)組要差 很多 原因是這個(gè)集合并不是一個(gè)靜態(tài)的結(jié)果 它表示的僅 僅是一個(gè)特定的查詢 每次訪問(wèn)該集合時(shí)都會(huì)重新執(zhí)行這個(gè) 查詢從而更新查詢結(jié)果 所謂的 訪問(wèn)集合 包括讀取集合的 length 屬性 訪問(wèn)集合中的元素 因此 當(dāng)你需要遍歷 HTML Collection 的時(shí)候 盡量將它 轉(zhuǎn)為數(shù)組后再訪問(wèn) 以提高性能 即使不轉(zhuǎn)換為數(shù)組 也請(qǐng) 盡可能少的訪問(wèn)它 例如在遍歷的時(shí)候可以將 length 屬性 成員保存到局部變量后再使用局部變量 b Reflow 代碼塊的行為實(shí)際上是修改了代碼塊中 的執(zhí)行環(huán)境 將 obj 放在了其作用域鏈的最前端 在 with 代 碼塊中訪問(wèn)非局部變量是都是先從 obj 上開始查找 如果沒(méi) 有再依次按作用域鏈向上查找 因此使用 with 相當(dāng)于增加 了作用域鏈長(zhǎng)度 而每次查找作用域鏈都是要消耗時(shí)間的 過(guò)長(zhǎng)的作用域鏈會(huì)導(dǎo)致查找性能下降 因此 除非你能肯定在 with 代碼中只訪問(wèn) obj 中的屬性 否則慎用 with 替代的可以使用局部變量緩存需要訪問(wèn)的屬 性 3 避免使用 eval 和 Function 每次 eval 或 Function 構(gòu)造函數(shù)作用于字符串表示的源 代碼時(shí) 腳本引擎都需要將源代碼轉(zhuǎn)換成可執(zhí)行代碼 這是 很消耗資源的操作 通常比簡(jiǎn)單的函數(shù)調(diào)用慢 100 倍以 上 eval 函數(shù)效率特別低 由于事先無(wú)法知曉傳給 eval 的 字符串中的內(nèi)容 eval 在其上下文中解釋要處理的代碼 也 就是說(shuō)編譯器無(wú)法優(yōu)化上下文 因此只能有瀏覽器在運(yùn)行時(shí) 解釋代碼 這對(duì)性能影響很大 Function 構(gòu)造函數(shù)比 eval 略好 因?yàn)槭褂么舜a不會(huì)影 響周圍代碼 但其速度仍很慢 此外 使用 eval 和 Function 也不利于 Javascript 壓縮工 具執(zhí)行壓縮 4 減少作用域鏈查找 前文談到了作用域鏈查找問(wèn)題 這一點(diǎn)在循環(huán)中是尤其 需要注意的問(wèn)題 如果在循環(huán)中需要訪問(wèn)非本作用域下的變 量時(shí)請(qǐng)?jiān)诒闅v之前用局部變量緩存該變量 并在遍歷結(jié)束后 再重寫那個(gè)變量 這一點(diǎn)對(duì)全局變量尤其重要 因?yàn)槿肿?量處于作用域鏈的最頂端 訪問(wèn)時(shí)的查找次數(shù)是最多的 低效率的寫法 全局變量 var globalVar 1 function myCallback info for var i 100000 i 每次訪問(wèn) globalVar 都需要查找到作用域鏈最頂端 本例中需要訪問(wèn) 100000 次 globalVar i 更高效的寫法 全局變量 var globalVar 1 function myCallback info 局部變量緩存全局變量 var localVar globalVar for var i 100000 i 訪問(wèn)局部變量是最快的 localVar i 本例中只需要訪問(wèn) 2 次全局變量 globalVar localVar 此外 要減少作用域鏈查找還應(yīng)該減少閉包的使用 5 數(shù)據(jù)訪問(wèn) Javascript 中的數(shù)據(jù)訪問(wèn)包括直接量 字符串 正則表達(dá) 式 變量 對(duì)象屬性以及數(shù)組 其中對(duì)直接量和局部變量 的訪問(wèn)是最快的 對(duì)對(duì)象屬性以及數(shù)組的訪問(wèn)需要更大的開 銷 當(dāng)出現(xiàn)以下情況時(shí) 建議將數(shù)據(jù)放入局部變量 a 對(duì)任何對(duì)象屬性的訪問(wèn)超過(guò) 1 次 b 對(duì)任何數(shù)組成員的訪問(wèn)次數(shù)超過(guò) 1 次 另外 還應(yīng)當(dāng)盡可能的減少對(duì)對(duì)象以及數(shù)組深度查找 6 字符串拼接 在 Javascript 中使用 號(hào)來(lái)拼接字符串效率是比較低的 因?yàn)槊看芜\(yùn)行都會(huì)開辟新的內(nèi)存并生成新的字符串變量 然 后將拼接結(jié)果賦值給新變量 與之相比更為高效的做法是使 用數(shù)組的 join 方法 即將需要拼接的字符串放在數(shù)組中最后 調(diào)用其 join 方法得到結(jié)果 不過(guò)由于使用數(shù)組也有一定的開 銷 因此當(dāng)需要拼接的字符串較多的時(shí)候可以考慮用此方法 關(guān)于 Javascript 優(yōu)化的更詳細(xì)介紹請(qǐng)參考 Write Efficient Javascript PPT Efficient JavaScript 2 CSS 選擇符 在大多數(shù)人的觀念中 都覺(jué)得瀏覽器對(duì) CSS 選擇符的解 析式從左往右進(jìn)行的 例如 toc A color 444 這樣一個(gè)選擇符 如果是從右往左解析則效率會(huì)很高 因?yàn)榈谝粋€(gè) ID 選擇基本上就把查找的范圍限定了 但實(shí)際 上瀏覽器對(duì)選擇符的解析是從右往左進(jìn)行的 如上面的選擇 符 瀏覽器必須遍歷查找每一個(gè) A 標(biāo)簽的祖先節(jié)點(diǎn) 效率并 不像之前想象的那樣高 根據(jù)瀏覽器的這一行為特點(diǎn) 在寫 選擇符的時(shí)候需要注意很多事項(xiàng) 有人已經(jīng)一一列舉了 詳 情參考此處 3 HTML 對(duì) HTML 本身的優(yōu)化現(xiàn)如今也越來(lái)越多的受人關(guān)注了 詳情可以參見這篇總結(jié)性文章 4 Image 壓縮 圖片壓縮是個(gè)技術(shù)活 不過(guò)現(xiàn)如今這方面的工具也非常 多 壓縮之后往往能帶來(lái)不錯(cuò)的效果 具體的壓縮原理以及 方法在 Even Faster Web Sites 第 10 章有很詳細(xì)的介紹 有興趣的可以去看看 總結(jié) 本文從頁(yè)面級(jí)以及代碼級(jí)兩個(gè)粒度對(duì)前端優(yōu)化的各種方 式做了一個(gè)總結(jié) 這些方法基本上都是前端開發(fā)人員在開發(fā) 的過(guò)程中可以借鑒和實(shí)踐的 除此之外 完整的前端優(yōu)化還 應(yīng)該包括很多其他的途徑 例如 CDN Gzip 多域名 無(wú) Cookie 服務(wù)器等等 由于對(duì)于開發(fā)人員的可操作性并不強(qiáng)大 在此也就不多敘述了 詳細(xì)的可以參考 Yahoo 和 Google 的 這些 金科玉律 1 Javascript 簡(jiǎn)介 HTML 是純靜態(tài)的的頁(yè)面 而 Javascript 讓頁(yè)面有了動(dòng)態(tài)的效 果 比如 OA 中模塊的拖拉 所有的瀏覽器都會(huì)內(nèi)置 Javascript 的解釋器 1992 年 Nombas 公司開發(fā)出 C 減減的嵌入式腳本語(yǔ)言 這 是最好的 HTML 頁(yè)面的腳本語(yǔ)言 Netscape 為了擴(kuò)展其瀏覽器的功能 開發(fā)了一套 LiveScript 并與 1995 年與 SUN 公司聯(lián)合把其改名為 javascript 它的主要 目的是處理一些輸入的有效性驗(yàn)證 而之前這個(gè)工作是留給 perl 之類的服務(wù)器端語(yǔ)言完成 在以前使用電話線調(diào)制解調(diào) 器 28 8kb s 的時(shí)代 如此慢的與服務(wù)器交互 這絕對(duì)是一件 很痛苦的事情 Javascript 的出現(xiàn) 解決了這個(gè)問(wèn)題 因?yàn)樗?的驗(yàn)證是基于客戶端的 微軟公司早期版本的瀏覽器僅支持自己的 vbscript 但后來(lái) 不得不加入 javascript IE3 中搭載 Javascipt 的克隆版本 命名為 jscript 在一次技術(shù)會(huì)議中 sun microsoft netscape 公司聯(lián)合制定 了 ECMA Script 標(biāo)準(zhǔn) 在 2005 前 網(wǎng)頁(yè)上提示框 廣告越來(lái)越多 把 javascipt 濫 用 使 javascript 背上了大量的罪名 2005 年 google 公司的網(wǎng)上產(chǎn)品 google 地圖 gmail google 搜索建議 等使得 ajax 興起 而 javascript 便 是 ajax 最重要的元素之一 Javascript 有三個(gè)部分組成 ECMAScript DOM BOM WEB 標(biāo)準(zhǔn) 網(wǎng)頁(yè)主要有三部分組成 結(jié)構(gòu) HTML XHTML 表現(xiàn) CSS 行為 DOM ECMA 2 ECMA 腳本 Javascript 的語(yǔ)法 1 區(qū)分大小寫 2 弱類型變量 var age 10 var name dd 3 每行結(jié)尾的分號(hào)可有可無(wú) 但建議還是加上 4 注釋與 java 相同 變量 變量是通過(guò) var 關(guān)鍵字來(lái)聲明的 Variable 變量的命名規(guī)則與 java 一致 注釋有三種 這個(gè)只能注釋單行 2 1 javascript 的 Hello world document write 是寫在文檔的最前面 2 2 slice substring subtr Slice 和 substring 2 5 指的是從第 3 為開始 取 5 2 3 個(gè) 數(shù) 其中 slice 的參數(shù)可以為負(fù) Substr 2 5 指的是從第 3 為開始 取 5 個(gè)數(shù) 但 ECMAscript 沒(méi)有對(duì)該方法進(jìn)行標(biāo)準(zhǔn)化 因此盡量少使用該方 法 2 3 indexOf 和 lastIndexOf isNan typeOf indexOf i 從前往后 i 在第幾位 indexOf i 3 可選參數(shù) 從第幾個(gè)字符開始往后找 lastIndexOf i 從后往前 i 在第幾位 lastIndexOf i 3 從后往前 i 在第幾位 如果沒(méi)找到 則返回 1 String 類型的變量 在 Java 中 用 符號(hào)表示字符串 用 表示單個(gè)字符 而在 javascript 中這兩種都可以 Nan not a number Alert nan nan 返回 false 因此不推薦使用 nan 本身 推薦 函數(shù) isNan Alert isNanN ab 返回 false typeof 運(yùn)算符 var stmp test alert typeof stmp 輸出 string alert type of 1 輸出 number 此外 還有 boolean undefined object 如果是引用類型或者 null 值 null 值返回 object 這其實(shí)是 ecmascript 的一個(gè)錯(cuò)誤 當(dāng)聲明的變量未初始化的時(shí)候 它的值就是 undefined 當(dāng)沒(méi) 有這個(gè)變量的時(shí)候 typeof 變 返回的值也是 undefined 但是沒(méi)聲明的變量是不能參與計(jì) 算的 當(dāng)函數(shù)無(wú)明確返回值時(shí) 返回的也是 undefined Function a Alert a undefined 返回 true Alert null undefined 返回 true 2 4 數(shù)值計(jì)算 var mynum1 23 345 var mynum2 45 var mynum3 34 var mynum4 9e5 科學(xué)計(jì)數(shù)法 為 9 10 五次方 var fNumber 123 456 alert fNumber toExponential 1 保留的小數(shù)點(diǎn)數(shù) 1 2e 2 alert fNumber toExponential 2 1 23e 2 5 布爾值 var married true alert 1 typeof married Boolean married true alert 2 typeof married String 6 類型轉(zhuǎn)換 轉(zhuǎn)換成 string 類型有三種方式 var a 3 var b a var c a toString var d student a toString var a 11 document write a toString 2 轉(zhuǎn)成 2 進(jìn)制 document write a toString 3 轉(zhuǎn)成 3 進(jìn)制 如果不是數(shù)值 則轉(zhuǎn)換報(bào)錯(cuò) parseInt document write parseInt 1red6 返回 1 后面非 數(shù)值的將全部忽略 document write parseInt 53 5 返回 53 document write parseInt 0 xC 直接十進(jìn)制 轉(zhuǎn)換 12 document write parseInt isaacshun NAN document write parseInt 011 8 返回 9 document write parseInt 011 10 指定為十進(jìn) 制 返回 11 parseFloat 與 parseInt 類似 2 7 數(shù)組 var aMap new Array China USA Britain aMap 20 Korea alert aMap length aMap 10 aMap 20 aMap 10 返回 undefined document write aMap join 用 來(lái)連接 var sFruit apple pear peach orange var aFruit sFruit split var aFruit apple pear peach orange alert aFruit reverse toString var aFruit pear apple peach orange aFruit sort var stack new Array stack push red stack push green stack push blue document write stack toString var vItem stack pop blue document write vItem document write stack toString red green 2 8 if 語(yǔ)句 首先獲取用戶的一個(gè)輸入 并用 Number 強(qiáng)制轉(zhuǎn)換為數(shù)字 var iNumber Number prompt 輸入一個(gè) 5 到 100 之間的數(shù) 字 第二個(gè)參數(shù) 用于顯示輸入框的默認(rèn)值 if isNaN iNumber 判斷輸入的是否是數(shù)字 NaN Not a Number document write 請(qǐng)確認(rèn)你的輸入正確 else if iNumber 100 iNumber 5 判斷輸入的 數(shù)字范圍 document write 你輸入的數(shù)字范圍不在 5 和 100 之間 else document write 你輸入的數(shù)字是 iNumber 2 9 switch iWeek parseInt prompt 輸入 1 到 7 之間的整數(shù) switch iWeek case 1 document write Monday break case 2 document write Tuesday break case 3 document write Wednesday break case 4 document write Thursday break case 5 document write Friday break case 6 document write Saturday break case 7 document write Sunday break default document write Error 2 10 while 語(yǔ)句 var i iSum 0 while i 100 iSum i i alert iSum do while for break continue 與 JAVA 語(yǔ)法一致 2 11 函數(shù) function ArgsNum return arguments length document write ArgsNum isaac 25 document write ArgsNum document write ArgsNum 3 從這個(gè)例子可以看出 方法可以沒(méi)有參數(shù) 也可以沒(méi)有返回 值 但是照樣可以傳入?yún)?shù)和返回值 2 12 Date 對(duì)象 var myDate1 new Date 運(yùn)行代碼前的時(shí)間 for var i 0 i 1 var isKHTML sUserAgent indexOf KHTML 1 sUserAgent indexOf Konqueror 1 sUserAgent indexOf AppleWebKit 1 檢測(cè) IE Mozilla var isIE sUserAgent indexOf compatible 1 var isMoz sUserAgent indexOf Gecko 1 檢測(cè)操作系統(tǒng) var isWin navigator platform Win32 navigator platform Windows var isMac navigator platform Mac68K navigator platform MacPPC navigator platform Macintosh var isUnix navigator platform X11 if isOpera document write Opera if isKHTML document write KHTML if isIE document write IE if isMoz document write Mozilla if isWin document write Windows if isMac document write Mac if isUnix document write Unix 1 13 Global 對(duì)象 其實(shí) isNan paraseInt 等都是 Global 對(duì)象的方法 EncodeURI 因?yàn)橛行У?URI 不能包含某些字符 如空 格 這個(gè)方法就是用于將這個(gè)字符轉(zhuǎn)換成 UTF 8 編碼 使瀏覽器可以接受他們 Var suil file a html Alert encodeURI suil a html 即將空格編碼成 20 Eval 方法 Eval alert hi 當(dāng)解析程序發(fā)現(xiàn) eval 時(shí) 它將把參數(shù)解析成真正的 ECMA script 語(yǔ)句 然后插入該語(yǔ)句所在位置 Global 除了有內(nèi)置方法外 還有很多內(nèi)置的屬性 如 undefined nan Array String Number Date RegExp 等 1 14 Math 對(duì)象 Max 方法 min 方法 ceil floor round sqrt random Max 1 2 3 min 1 2 3 4 想取到 1 10 的數(shù)據(jù) Math floor Math random 10 1 2 9 的數(shù)據(jù) Math floor Math random 9 2 3 1 getElementsByTagName function searchDOM 放在函數(shù)內(nèi) 頁(yè)面加載完成后才用的 onload 加載 這時(shí)如果把 alert 這句改成用 document write 則會(huì)把 原內(nèi)容覆蓋掉 因?yàn)槭呛竺娌艌?zhí)行的 var oLi document getElementsByTagName li 輸出長(zhǎng)度 標(biāo)簽名稱以及某項(xiàng)的文本節(jié)點(diǎn)值 alert oLi length oLi 0 tagName oLi 3 childNodes 0 nodeValue var oUl document getElementsByTagName ul var oLi2 oUl 1 getElementsByTagName li alert oLi2 length oLi2 0 tagName oLi2 1 childNodes 0 nodeValue 客戶端語(yǔ)言 HTML JavaScript CSS 服務(wù)器端語(yǔ)言 ASP NET JSP PHP 3 2 getElementById var oLi document getElementById cssLi oLi style backgroundColor yellow 輸出標(biāo)簽名稱以及文本節(jié)點(diǎn)值 alert oLi tagName oLi childNodes 0 nodeValue 3 2 getElementsByName alert document getElementsByName a length 3 3 訪問(wèn)子節(jié)點(diǎn) function myDOMInspector var oUl document getElementById myList 獲取 標(biāo)記 var DOMString if oUl hasChildNodes 判斷是否有子節(jié)點(diǎn) var oCh oUl childNodes for var i 0 i oCh length i 逐一查找 DOMString oCh i nodeName n alert DOMString 4 訪問(wèn)父節(jié)點(diǎn) nodeName 如果為文本節(jié)點(diǎn) 則返回 text tagName 如果為文本節(jié)點(diǎn) 則返回 undefined function myDOMInspector var myItem document getElementById myDearFood alert myItem parentNode tagName function myDOMInspector var myItem document getElementById myDearFood var parentElm myItem parentNode while parentElm className colorful 一路往 上找 alert parentElm tagName 糖醋排骨 圓籠粉蒸肉 泡菜魚 板栗燒雞 麻婆豆腐 訪問(wèn)兄弟節(jié)點(diǎn) function myDOMInspector var myItem document getElementById myDearFood 訪問(wèn)兄弟節(jié)點(diǎn) var nextListItem myItem nextSibling var preListItem myItem previousSibling alert nextListItem tagName preListItem tagName 在 Firefox 中不支持 但是 IE 中卻是支持的 3 6 第一個(gè) 最后一個(gè) 子節(jié)點(diǎn) function nextSib node var tempLast node parentNode lastChild 判斷是否是最后一個(gè)節(jié)點(diǎn) 如果是則返回 null if node tempLast return null var tempObj node nextSibling 逐一搜索后面的兄弟節(jié)點(diǎn) 直到發(fā)現(xiàn)元素節(jié)點(diǎn)為止 while tempObj nodeType 1 三目運(yùn)算符 如果是元素節(jié)點(diǎn)則返回節(jié)點(diǎn)本身 否 則返回 null return tempObj nodeType 1 tempObj null function prevSib node var tempFirst node parentNode firstChild 判斷是否是第一個(gè)節(jié)點(diǎn) 如果是則返回 null if node tempFirst return null var tempObj node previousSibling 逐一搜索前面的兄弟節(jié)點(diǎn) 直到發(fā)現(xiàn)元素節(jié)點(diǎn)為止 while tempObj nodeType 1 return tempObj nodeType 1 tempObj null function myDOMInspector var myItem document getElementById myDearFood 獲取后一個(gè)元素兄弟節(jié)點(diǎn) var nextListItem nextSib myItem 獲取前一個(gè)元素兄弟節(jié)點(diǎn) var preListItem prevSib myItem alert 后一項(xiàng) nextListItem null nextListItem firstChild nodeValue null 前一項(xiàng) preListItem null preListItem firstChild nodeValue null nodeType 元素 element 1 屬性 attr 2 文本 text 3 注釋 comments 8 文檔 document 9 function showAttr var btnShowAttr document getElementById btnShowAttr 演示按鈕 有很多屬性 var attrs btnShowAttr attributes for var i 0 i attrs length i var attr attrs i alert nodeType attr nodeType attribute 的 nodeType 2 alert attr attr alert attr name attr name attr value function showDocument alert nodeType document nodeType 9 alert nodeName document nodeName alert document 3 7 getAttribute setAttribute function myDOMInspector 獲取圖片 var myImg document getElementsByTagName img 0 獲取圖片 title 屬性 alert myImg getAttribute title function changePic 獲取圖片 var myImg document getElementsByTagName img 0 設(shè)置圖片 src 和 title 屬性 myImg setAttribute src 02 jpg myImg setAttribute title 紫荊公寓 3 8 創(chuàng)建新節(jié)點(diǎn) function createP var op document createElement p var otext document createTextNode HHHHH op appendChild otext op setAttribute style text align center document body appendChild op 創(chuàng)建完節(jié)點(diǎn) 就馬上會(huì)影響到下面的操作 比如 P 的數(shù)量就會(huì)多 1 個(gè) 3 9 刪除節(jié)點(diǎn) 需要注意的是標(biāo)簽之間的父子關(guān)系 function deleteP var oP document getElementsByTagName p 0 oP parentNode removeChild oP 刪除節(jié)點(diǎn) 3 10 替換節(jié)點(diǎn) function replaceP var oOldP document getElementsByTagName p 0 var oNewP document createElement p 新建節(jié)點(diǎn) var oText document createTextNode 這是一個(gè)感人肺 腑的故事 oNewP appendChild oText oOldP parentNode replaceChild oNewP oOldP 替換節(jié)點(diǎn) 3 11 插入節(jié)點(diǎn) function insertP var oOldP document getElementsByTagName p 0 var oNewP document createElement p 新建節(jié)點(diǎn) var oText document createTextNode 這是一個(gè)感人肺 腑的故事 oNewP appendChild oText oOldP parentNode insertBefore oNewP oOldP 插入節(jié)點(diǎn) 沒(méi)有 insertAfter 但是可以自己寫一個(gè) function insertAfter newElement targetElement var oParent targetElement parentNode 首先找 到目標(biāo)元素的父元素 if oParent lastChild targetElement 如果目標(biāo)元 素已經(jīng)是最后一個(gè)子元素了 oParent appendChild newElement 則直接 用 appendChild 加到子元素列表的最后 else 否則用 insertBefore 插入到目標(biāo)元素的下一個(gè)兄弟元素之前 oParent insertBefore newElement targetElement nextSib ling function insertP var oOldP document getElementById myTarget var oNewP document createElement p 新建節(jié)點(diǎn) var oText document createTextNode 這是一個(gè)感人肺 腑的故事 oNewP appendChild oText insertAfter oNewP oOldP 插入節(jié)點(diǎn) 其實(shí)這個(gè)也是通過(guò) insertBefore 原理來(lái)實(shí)現(xiàn)的 3 12 cloneNode deepBoolean 復(fù)制并返回當(dāng)前節(jié)點(diǎn)的復(fù)制節(jié)點(diǎn) 這個(gè)復(fù)制得到的節(jié)點(diǎn)是一 個(gè)孤立的節(jié)點(diǎn) 不在 document 樹中 復(fù)制原來(lái)節(jié)點(diǎn)的屬性 值 包括 ID 屬性 所以在把這個(gè)新節(jié)點(diǎn)加到 document 之前 一定要修改 ID 屬性 以便使它保持唯一 當(dāng)然如果 ID 的 唯一性不重要可以不做處理 這個(gè)方法支持一個(gè)布爾參數(shù) 當(dāng) deepBoolean 設(shè)置 true 時(shí) 復(fù)制 當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn) 包括該節(jié)點(diǎn)內(nèi)的文本 11111 p document getElementById mypara pclone p cloneNode true p parentNode appendChild pclone 3 12 文檔碎片 function insertPs var aColors red green blue magenta yellow chocolate black aquamarine lime fuchsia brass azure brown bronze deeppink aliceblue gray copper coral feldspar orang e orchid pink plum quartz purple var oFragment document createDocumentFragment 創(chuàng)建文檔碎片 for var i 0 i aColors length i var oP document createElement p var oText document createTextNode aColors i oP appendChild oText oFragment appendChild oP 將節(jié)點(diǎn) 先添加到碎片中 document body appendChild oFragment 最后一 次性添加到頁(yè)面 3 13 innerHTML function myDOMInnerHTML var myDiv document getElementById myTest alert myDiv innerHTML 直接顯示 innerHTML 的內(nèi)容 修改 innerHTML 可直接添加代碼 myDiv innerHTML innerHTML 可同時(shí)顯示沒(méi)有的代碼 3 14 換皮膚 myUL1 color 0000FF font family Arial font weight bold myUL2 color FF0000 font family Georgia Times New Roman Times serif function check var oMy document getElementsByTagName ul 0 oMy className oMy className myUL1 myUL2 myUL1 修改 CSS 類 HTML JavaScript CSS 4 表格與表單 4 1 動(dòng)態(tài)添加行 window onload function var oTr document getElementById member insertRow 2 插入一 行 var aText new Array aText 0 document createTextNode fresheggs aText 1 document createTextNode W610 aText 2 document createTextNode Nov 5th aText 3 document createTextNode Scorpio aText 4 document createTextNode 1038818 for var i 0 i aText length i var oTd oTr insertCell i oTd appendChild aText i 4 2 修改單元格內(nèi)容 window onload function var oTable document getElementById member oTable rows 3 cells 4 innerHTML lost 修改單元格內(nèi)容 4 3 動(dòng)態(tài)刪除 parentElement 是 IE dom parentNode 是標(biāo)準(zhǔn) DOM window onload function var oTable document getElementById member oTable deleteRow 2 刪除一行 后面的行號(hào)自動(dòng)補(bǔ)齊 指從 table 中的第 2 行開始進(jìn) 行刪除 oTable rows 2 deleteCell 1 刪除一個(gè)單 元格 后面的也自動(dòng)補(bǔ)齊 function myDelete var oTable document getElementById member 刪除該行 this parentNode parentNode parentNode remove Child this parentNode parentNode window onload function var oTable document getElementById member var oTd 動(dòng)態(tài)添加 delete 鏈接 for var i 1 i oTable rows length i oTd oTable rows i insertCell 5 oTd innerHTML delete oTd firstChild onclick myDelete 添加刪 除事件 4 4 動(dòng)態(tài)刪除列 function deleteColumn oTable iNum 自定義刪除列函數(shù) 即每行刪除相應(yīng)單元格 for var i 0 i oTable rows length i oTable rows i deleteCell iNum window onload function var oTable document getElementById member deleteColumn oTable 2 4 5 控制 textarea 的字符個(gè)數(shù) function LessThan oTextArea 返回文本框字符個(gè)數(shù)是否符號(hào)要求的 boolean 值 return oTextArea value length oTextArea getAttribute maxlength 5 BOM 模型 瀏覽器對(duì)象模型 可以對(duì)瀏覽器窗口進(jìn)行訪問(wèn)和操作 使用 BOM 開發(fā)者可以移動(dòng)窗口 改變狀態(tài)欄中的文本等與頁(yè)面 內(nèi)容不相關(guān)的操作 Window 對(duì)象 這里可以用 window frames 0 或者用 windows frames topFrame 來(lái)引用框架 也可以用 topl 來(lái)代 替 window 屬性 Top frames 0 window 對(duì)象可以忽略 提供的方法有 moveto moveBy resizeTo resizeBy 等方法 但 盡量避免使用它們 因?yàn)闀?huì)對(duì)用戶瀏覽產(chǎn)生影響 Open 方法 除了 open 方法 還有 alert comfirm prompt 方法 狀態(tài)欄 Settimeout 與 setInterval Settimeout 下面的代碼都是在 1 秒鐘后顯示一條警告 Settimeout alert aa 1000 Settimeout function alert aa 1000 如果要還未執(zhí)行的暫停 可調(diào)用 clearTimeOut 方法 Var si Settimeout function alert aa 1000 clearTimeout si setInterval History 向后一頁(yè) window history go 1 等于 history back 向前一頁(yè) window history go 1 等于 history forword Document LastModified title URL 屬性都是比較常用 Location 對(duì)象 Navigator 對(duì)象 Screen 對(duì)象 6 事件 6 1 冒泡型事件 function add sText var oDiv document getElementById display oDiv innerHTML sText 輸出點(diǎn)擊順序 body onclick add body div onclick add div p onclick add p Click Me 先執(zhí)行最里面的 p 再往外執(zhí)行 6 2 監(jiān)聽函數(shù) window onload function var oP document getElementById myP 找到對(duì) 象 oP onclick function 設(shè)置事件監(jiān)聽函數(shù) alert 我被點(diǎn)擊了 Click Me Function a oP onclick a 這樣會(huì)先把 a 函數(shù)加載到緩存 不是最佳方案 Var A Function oP onclick a 這樣只有在 onclick 事件發(fā)生的時(shí)候 加載該函數(shù) 若以上的監(jiān)聽函數(shù) 在 onclick 的時(shí)候 需要執(zhí)行多個(gè)函數(shù) 那就只能用以下的方法 IE 標(biāo)準(zhǔn) function fnClick alert 我被點(diǎn)擊了 oP detachEvent onclick fnClick 點(diǎn)擊了一次 后刪除監(jiān)聽函數(shù) var oP 聲明在函數(shù)外 這樣就可以兩個(gè)函數(shù)一起使用 window onload function oP document getElementById myP 找到對(duì)象 oP attachEvent onclick fnClick 添加監(jiān)聽函 數(shù) Click Me 也可以添加多個(gè)監(jiān)聽器 oP attachEvent onclick fnClick1 添加監(jiān) 聽函數(shù) 1 oP attachEvent onclick fnClick2 添加監(jiān) 聽函數(shù) 2 執(zhí)行順序?yàn)?fnClick2 fnClick1 但是以上的監(jiān)聽器均為 IE 中的標(biāo)準(zhǔn) 而符合標(biāo)準(zhǔn) DOM firefox 的監(jiān)聽器如下 oP addEventListener click fnClick1 false 添加監(jiān)聽函數(shù) 1 oP addEventListener click fnClick2 false 添加監(jiān)聽函數(shù) 2 因此這種方式在 Firefox 中支持 而在 IE 中不支持 為了兼容性 可這樣寫 if el addEventListener el addEventListener click KindDisableMenu false else if el attachEvent el attachEvent onclick KindDisableMenu 第三個(gè)參數(shù)為 useCapture 而 useCapture 這個(gè)參數(shù)就是在控制這時(shí)候兩個(gè) click 事件 的先後順序 如果是 false 那就會(huì)使用 bubbling 他是從 內(nèi)而外的流程 所以會(huì)先執(zhí)行藍(lán)色元素的 click 事件再執(zhí)行 紅色元素的 click 事件 如果是 true 那就是 capture 和 bub