Javascript無阻塞載入具體方式

看了《高效能JavaScript》的讀書筆記

幾個原則：

1、將指令碼放在底部

<link>還是在head中，用以保證在js載入前，能載入出正常顯示的頁面。

<script>放在</body>前。

2、成組指令碼

由於每個<script>標籤下載時阻塞頁面解析過程，所以限制頁面的<script>總數也可以改善效能。適用於內聯指令碼和外部指令碼。

3、非阻塞指令碼

等頁面完成載入後，再載入js代碼。也就是，在window.load事件發出後開始下載代碼。

（1）defer屬性：支援IE4和fierfox3.5更高版本瀏覽器

<script defer>...</script>

內聯和外部檔案

帶defer屬性的<script>可出現在文檔的任何位置，對應的js檔案將在<script>被解析時啟動下載，但代碼不會執行，直到DOM載入完畢（在onload事件控制代碼被調用之前）。所以實現了和也賣弄其他資源一起並行下載。

（2）動態指令碼元素

文件物件模型（DOM）允許你使用js動態建立HTML的幾乎全部文檔內容。

複製代碼 代碼如下:var script=document.createElement("script");

script.type="text/javascript";

script.src="file.js";

document.getElementByTagName_r("head")[0].appendChild(script);

此技術的重點在於：無論在何處啟動下載，檔案額下載和運行都不會阻塞其他頁面處理過程。即使在head裡（除了用於下載檔案的http連結）。

（3）The YUI3 approach

理念：用一個很小的初始代碼，下載其餘的功能代碼，先引入檔案：

複製代碼 代碼如下:<script type="text/javascript src=http://files.jb51.net/file_images/article/201306/yuanma/combo.js></script>

此種子檔案大約10KB，

使用：

複製代碼 代碼如下:YUI().use("dom",function(Y){

　　Y.Dom.addclass(...)

})

當所有代碼可用時，回呼函數被調用，YUI執行個體作為參數傳入，就可以立即使用新下載的功能。

The LazyLoad library

使用：先引入：lazyload-min.js

(4)

複製代碼 代碼如下:LazyLoad.js("a.js",function(){

Appliction.init();

})

多個檔案：複製代碼 代碼如下:LazyLoad.js(["a.js","b.js"],function(){

Application.init();

})

(5)The LABjs library

先引入：lab.js

複製代碼 代碼如下:$LAB.script("a.js").wait(function(){

Application.init();

})

多個檔案，就鏈式寫法

他的獨特之處在於能夠管理依賴關係。

可以通過wait()函數指定哪些檔案應該等待其他檔案。

例如：b.js的代碼保證不在a.js之前運行

複製代碼 代碼如下:$LAB.script("a.js").wait().script("b.js").wait(function(){

Application.init();

})

這樣，雖然兩個檔案是並行下載的，卻能保證a.js能在b.js之前執行