1.靜態(tài)加載
CSS，圖片資源文件在頁(yè)面渲染過(guò)程中可以并行下載，不會(huì)阻塞。在IE8，F(xiàn)F下，也可以支持JS的并行下載。盡管頁(yè)面的JS下載加速了，但是JS對(duì)頁(yè)面渲染的阻塞還是依然存在的，只有JS加載完畢了，頁(yè)面的剩余部分才能繼續(xù)渲染。放在Head部分的Script是最為惡劣的，因?yàn)閷?duì)頁(yè)面來(lái)說(shuō)，Head部分是require的，是后部分所必須的，Head部分不加載完畢，Body部分不會(huì)開(kāi)始解析，Body解析之前，頁(yè)面是空白的。靜態(tài)Script放到頁(yè)面的哪部分來(lái)說(shuō)都是阻塞，從瀏覽器實(shí)現(xiàn)的角度來(lái)說(shuō)很好理解，因?yàn)镴S代碼中完全有可能修改頁(yè)面元素影響Dom結(jié)構(gòu)。因?yàn)闉g覽器對(duì)JS行為的不可預(yù)知，所以只好等前面的Script加載完畢后再繼續(xù)渲染。所以最佳實(shí)踐往往是說(shuō)將Script放到頁(yè)面底部</body>附近。
JS加載對(duì)前臺(tái)性能的影響，雅虎優(yōu)化原則之一是減少Http請(qǐng)求數(shù)，壓縮JS，合并JS，減少JS數(shù)。
若是業(yè)務(wù)上有很多獨(dú)立模塊化的JS需要加載，可以考慮在線打包的方案。

2。延遲加載
W3C標(biāo)準(zhǔn)HTML4.01給Script標(biāo)簽定義了一個(gè)defer屬性，指明該JS不會(huì)改變Dom的content，瀏覽器可繼續(xù)解析和渲染，無(wú)需阻塞在該Script。
http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html

 
但部分瀏覽器并不支持該屬性。所以它不是個(gè)很好的跨瀏覽器解決方案。

3.動(dòng)態(tài)加載

這段代碼創(chuàng)建了script標(biāo)簽，并插入這條標(biāo)簽到文檔中。關(guān)鍵在于，這個(gè)腳本的加載時(shí)異步的，不會(huì)影響頁(yè)面渲染的進(jìn)程，不會(huì)阻塞頁(yè)面內(nèi)容的展示。這樣的方式盡管不會(huì)阻塞頁(yè)面資源的加載，但卻可能會(huì)阻塞其他的script腳本，不同瀏覽器在這點(diǎn)上的表現(xiàn)是有非常大的差異的，參看這篇文章動(dòng)態(tài)引入的外部 JS 文件在各瀏覽器中的加載順序不一致
有兩點(diǎn)非常突出，

1.同樣的動(dòng)態(tài)加載代碼，不同瀏覽器對(duì)動(dòng)態(tài)加載進(jìn)來(lái)的js，是否阻塞下條Script標(biāo)簽的表現(xiàn)是不一樣的

2.實(shí)現(xiàn)動(dòng)態(tài)加載的那段代碼順序不同，對(duì)同一個(gè)瀏覽器來(lái)說(shuō)，結(jié)果可能是非常迥異的，
如：

代碼順序的調(diào)換，IE的表現(xiàn)就不一樣

所以，對(duì)動(dòng)態(tài)加載腳本，需要重點(diǎn)關(guān)注的一個(gè)問(wèn)題是，所動(dòng)態(tài)加載的JS腳本的接口依賴(lài)問(wèn)題。這個(gè)問(wèn)題的解決方案也不復(fù)雜，既根據(jù)實(shí)現(xiàn)業(yè)務(wù)的需要跟蹤所加載腳本的加載狀態(tài)。加載狀態(tài)的判斷在IE下用readyState屬性，非IE瀏覽器支持，腳本加載完成后的onload方法的調(diào)用。

業(yè)界優(yōu)秀的延遲加載庫(kù)

Ryan Grove 的LazeLoad https://github.com/rgrove/lazyload
Kyle Simpson 的 LABjs http://labjs.com/

最新評(píng)論