Script的加載方法小結

2019-11-20 23:59:18

字體：大中小

來源：轉載

供稿：網友

1.靜態加載
CSS，圖片資源文件在頁面渲染過程中可以并行下載，不會阻塞。在IE8，FF下，也可以支持JS的并行下載。盡管頁面的JS下載加速了，但是JS對頁面渲染的阻塞還是依然存在的，只有JS加載完畢了，頁面的剩余部分才能繼續渲染。放在Head部分的Script是最為惡劣的，因為對頁面來說，Head部分是require的，是后部分所必須的，Head部分不加載完畢，Body部分不會開始解析，Body解析之前，頁面是空白的。靜態Script放到頁面的哪部分來說都是阻塞，從瀏覽器實現的角度來說很好理解，因為JS代碼中完全有可能修改頁面元素影響Dom結構。因為瀏覽器對JS行為的不可預知，所以只好等前面的Script加載完畢后再繼續渲染。所以最佳實踐往往是說將Script放到頁面底部</body>附近。
JS加載對前臺性能的影響，雅虎優化原則之一是減少Http請求數，壓縮JS，合并JS，減少JS數。
若是業務上有很多獨立模塊化的JS需要加載，可以考慮在線打包的方案。

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

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

3.動態加載

復制代碼代碼如下:

 
<script type="text/javascript"> 
var js = document.createElement("script"); 
js.src = '**.js'; 
document.getElementsByTagName("head")[0].appendChild(js); 
</script> 

這段代碼創建了script標簽，并插入這條標簽到文檔中。關鍵在于，這個腳本的加載時異步的，不會影響頁面渲染的進程，不會阻塞頁面內容的展示。這樣的方式盡管不會阻塞頁面資源的加載，但卻可能會阻塞其他的script腳本，不同瀏覽器在這點上的表現是有非常大的差異的，參看這篇文章動態引入的外部 JS 文件在各瀏覽器中的加載順序不一致
有兩點非常突出，

1.同樣的動態加載代碼，不同瀏覽器對動態加載進來的js，是否阻塞下條Script標簽的表現是不一樣的