DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Script的加載方法小結
Script的加載方法小結
編輯:關於JavaScript     

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

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

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標簽的表現是不一樣的

3

2.實現動態加載的那段代碼順序不同,對同一個浏覽器來說,結果可能是非常迥異的,
如:

1 2

代碼順序的調換,IE的表現就不一樣

所以,對動態加載腳本,需要重點關注的一個問題是,所動態加載的JS腳本的接口依賴問題。這個問題的解決方案也不復雜,既根據實現業務的需要跟蹤所加載腳本的加載狀態。加載狀態的判斷在IE下用readyState屬性,非IE浏覽器支持,腳本加載完成後的onload方法的調用。

業界優秀的延遲加載庫

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved