1、防止濫用JavaScript“不管你想通過JavaScript改變哪個(gè)網(wǎng)頁的行為，都必須三思而后行。首先要確認(rèn)：為這個(gè)網(wǎng)頁增加這種額外的行為是否確有必要？”

個(gè)人認(rèn)為，作者的這句話放在當(dāng)前幾乎無處不用JavaScript來增強(qiáng)Web頁面交互體驗(yàn)的時(shí)代，可以理解為應(yīng)該適當(dāng)?shù)氖褂肑avaScript，而不要因?yàn)槭褂昧藢?shí)現(xiàn)酷炫效果的腳本導(dǎo)致網(wǎng)頁加載緩慢或者兼容性極差而舍本求末，導(dǎo)致用戶無法瀏覽和使用網(wǎng)站。

2、平穩(wěn)退化平穩(wěn)退化是指當(dāng)用戶禁用瀏覽器JavaScript或?yàn)g覽器不支持JavaScript（還有嗎）時(shí)，應(yīng)該讓用戶仍然可以正常的瀏覽網(wǎng)站。

剛看到這個(gè)問題的時(shí)候，感覺這種情況幾乎可以忽略不計(jì)，因此看了一些關(guān)于這個(gè)問題的討論（知乎）以及博文《javascript不可用的問題探究》，并拿博客園首頁做了實(shí)驗(yàn)，即在禁用JavaScript的情況下瀏覽網(wǎng)頁，發(fā)現(xiàn)雖然無法評論博客、無法正常顯示分類效果、當(dāng)然廣告也沒了，但是主要的功能（查看博文、分頁跳轉(zhuǎn)等）是可以正常使用的。

那么基本可以得出結(jié)論：在考慮平穩(wěn)退化的時(shí)候，根據(jù)需要至少應(yīng)該保證網(wǎng)站主要功能可以正常使用。對博客園來說，就是查看博客。

3、禁用"javascript:"偽協(xié)議和內(nèi)嵌事件處理函數(shù)雖然在HTML中使用這兩種寫法，不會帶來什么嚴(yán)重問題，但是它會阻止平穩(wěn)退化（網(wǎng)頁行為不一致），并且使腳本的編寫方式混亂，增加了代碼維護(hù)的難度。

4、性能考慮關(guān)于性能考慮的最佳實(shí)踐，還是非常容易理解的。

“盡量少訪問DOM和盡量減少標(biāo)記”。少訪問DOM是因?yàn)椴樵僁OM的操作會非常耗費(fèi)性能。多處函數(shù)的重復(fù)DOM查詢應(yīng)該進(jìn)行重構(gòu)，提取為全局變量或者直接作為參數(shù)進(jìn)行傳遞。減少標(biāo)記可以減小DOM的規(guī)模，從而減少查找DOM樹中特定元素的時(shí)間。

“合并腳本”。合并外部腳本文件，可以減少加載頁面時(shí)發(fā)送的請求次數(shù)。通過觀察Chrome開發(fā)者工具Network標(biāo)簽，可以非常清楚的看到加載網(wǎng)頁的請求次數(shù)和時(shí)間，下圖為請求我的博客的情況，第三方的百度分享插件是最慢被加載的，當(dāng)然整體加載時(shí)間還是可以接受的。不過當(dāng)引用的文件過多過大，或者依賴的第三方插件請求緩慢時(shí)，整個(gè)頁面就會一直處于加載狀態(tài)，給人的感覺就是網(wǎng)頁加載緩慢，體驗(yàn)就會變差。



另外，“腳本在標(biāo)記中的位置對頁面的初次加載時(shí)間也有很大的影響”。就像bootstrap的實(shí)例中，引用的JS插件統(tǒng)統(tǒng)放在了頁面的尾部，并加了說明。


因?yàn)楦鶕?jù)HTTP規(guī)范，瀏覽器每次從同一個(gè)域名中最多只能同時(shí)下載兩個(gè)文件，而在腳本下載期間，瀏覽器不會下載其它任何文件，即使是來自不同域名的文件也不會下載，所有其它的資源都要等腳本加載完畢后才會下載；而通常我們會把腳本文件放在塊中，此時(shí)該塊中的腳本會導(dǎo)致瀏覽器無法并行加載其它文件（如圖片或其它腳本）。

把所有 <script> 標(biāo)簽放在文檔的末尾，</body>標(biāo)簽之前，就可以讓頁面變的更快，因?yàn)檫@樣，在加載腳本時(shí)，window對象的load事件依然可以執(zhí)行對文檔進(jìn)行各種操作。

最后一條建議就是壓縮腳本，這個(gè)見的很多，通常就是以.min.js為后綴的腳本文件。

最新評論