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

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

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

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

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

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

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

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

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



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


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

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

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

最新評(píng)論