Javascript非同步載入詳解

大括號啊發表於2017-11-03
JavaScript非同步

本文總結一下瀏覽器在 javascript 的載入方式。
關鍵詞：非同步載入（async loading），延遲載入（lazy loading），延遲執行（lazy execution），async 屬性， defer 屬性
一、同步載入與非同步載入的形式

  1. 同步載入
    我們平時最常使用的就是這種同步載入形式：
    <script src="http://yourdomain.com/script.js"></script>
    同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，停止了後續的解析，因此停止了後續的檔案載入（如影像）、渲染、程式碼執行。
    js 之所以要同步執行，是因為 js 中可能有輸出 document 內容、修改dom、重定向等行為，所以預設同步執行才是安全的。
    以前的一般建議是把<script>放在頁面末尾</body>之前，這樣儘可能減少這種阻塞行為，而先讓頁面展示出來。
    簡單說：載入的網路 timeline 是瀑布模型，而非同步載入的 timeline 是併發模型。
  2. 常見非同步載入（Script DOM Element）
(function() {
     var s = document.createElement(`script`);
     s.type = `text/javascript`;
     s.async = true;
     s.src = `http://yourdomain.com/script.js`;
     var x = document.getElementsByTagName(`script`)[0];
     x.parentNode.insertBefore(s, x);
 })();

非同步載入又叫非阻塞，瀏覽器在下載執行 js 同時，還會繼續進行後續頁面的處理。
這種方法是在頁面中<script>標籤內，用 js 建立一個 script 元素並插入到 document 中。這樣就做到了非阻塞的下載 js 程式碼。
async屬性是HTML5中新增的非同步支援，見後文解釋，加上好（不加也不影響）。
此方法被稱為 Script DOM Element 法，不要求 js 同源。
將js程式碼包裹在匿名函式中並立即執行的方式是為了保護變數名洩露到外部可見，這是很常見的方式，尤其是在 js 庫中被普遍使用。
例如 Google Analytics 和 Google+ Badge 都使用了這種非同步載入程式碼：
(function() {
var ga = document.createElement(`script`); ga.type = `text/javascript`; ga.async = true;
ga.src = (`https:` == document.location.protocol ? `https://ssl` : `http://www`) + `.google-analytics.com/ga.js`;
var s = document.getElementsByTagName(`script`)[0]; s.parentNode.insertBefore(ga, s);
})();

(function()
{var po = document.createElement(“script”);
po.type = “text/javascript”; po.async = true;po.src = “https://apis.google.com/js/plusone.js“;
var s = document.getElementsByTagName(“script”)[0];
s.parentNode.insertBefore(po, s);
})();

但是，這種載入方式在載入執行完之前會阻止 onload 事件的觸發，而現在很多頁面的程式碼都在 onload 時還要執行額外的渲染工作等，所以還是會阻塞部分頁面的初始化處理。

  1. onload 時的非同步載入
    (function() {
    function async_load(){
    var s = document.createElement(`script`);
    s.type = `text/javascript`;
    s.async = true;
    s.src = `http://yourdomain.com/script.js`;
    var x = document.getElementsByTagName(`script`)[0];
    x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
    window.attachEvent(`onload`, async_load);
    else
    window.addEventListener(`load`, async_load, false);
    })();

這和前面的方式差不多，但關鍵是它不是立即開始非同步載入 js ，而是在 onload 時才開始非同步載入。這樣就解決了阻塞 onload 事件觸發的問題。
補充：DOMContentLoaded 與 OnLoad 事件
DOMContentLoaded : 頁面(document)已經解析完成，頁面中的dom元素已經可用。但是頁面中引用的圖片、subframe可能還沒有載入完。
OnLoad：頁面的所有資源都載入完畢（包括圖片）。瀏覽器的載入進度在這時才停止。
這兩個時間點將頁面載入的timeline分成了三個階段。
4.非同步載入的其它方法
由於Javascript的動態特性，還有很多非同步載入方法：
XHR Eval
XHR Injection
Script in Iframe
Script Defer
document.write Script Tag
還有一種方法是用 setTimeout 延遲0秒 與 其它方法組合。
XHR Eval ：通過 ajax 獲取js的內容，然後 eval 執行。
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open(`GET`, `A.js`, true);
xhrObj.send(“);

Script in Iframe：建立並插入一個iframe元素，讓其非同步執行 js 。
var iframe = document.createElement(`iframe`);
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write(`<body onload=”insertJS()”>`);
doc.close();

GMail Mobile：頁內 js 的內容被註釋，所以不會執行，然後在需要的時候，獲取script元素中 text 內容，去掉註釋後 eval 執行。
<script type=”text/javascript”>
/*
var …
*/
</script>

詳見參考資料中2010年的Velocity 大會 Steve Souders 和淘寶的那兩個講義。
二、async 和 defer 屬性

  1. defer 屬性
    <script src=”file.js” defer></script>
    defer屬性宣告這個指令碼中將不會有 document.write 或 dom 修改。
    瀏覽器將會並行下載 file.js 和其它有 defer 屬性的script，而不會阻塞頁面後續處理。
    defer屬性在IE 4.0中就實現了，超過13年了！Firefox 從 3.5 開始支援defer屬性 。
    注：所有的defer 指令碼保證是按順序依次執行的。

  2. async 屬性
    <script src=”file.js” async></script>
    async屬性是HTML5新增的。作用和defer類似，但是它將在下載後儘快執行，不能保證指令碼會按順序執行。它們將在onload 事件之前完成。
    Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支援 async 屬性。可以同時使用 async 和 defer，這樣IE 4之後的所有 IE 都支援非同步載入。

  3. 詳細解釋
    <script> 標籤在 HTML 4.01 與 HTML5 的區別：
    type 屬性在HTML 4中是必須的，在HTML5中是可選的。
    async 屬性是HTML5中新增的。
    個別屬性（xml:space）在HTML5中不支援。
    說明：
    沒有 async 屬性，script 將立即獲取（下載）並執行，然後才繼續後面的處理，這期間阻塞了瀏覽器的後續處理。
    如果有 async 屬性，那麼 script 將被非同步下載並執行，同時瀏覽器繼續後續的處理。
    HTML4中就有了defer屬性，它提示瀏覽器這個 script 不會產生任何文件元素（沒有document.write），因此瀏覽器會繼續後續處理和渲染。
    如果沒有 async 屬性 但是有 defer 屬性，那麼script 將在頁面parse之後執行。
    如果同時設定了二者，那麼 defer 屬性主要是為了讓不支援 async 屬性的老瀏覽器按照原來的 defer 方式處理，而不是同步方式。
    另參見官方說明：script async
    個人補充：
    既然 HTML5 中已經支援非同步載入，為什麼還要使用前面推薦的那種麻煩（動態建立 script 元素）的方式？
    答：為了相容尚不支援 async 老瀏覽器。如果將來所有瀏覽器都支援了，那麼直接在script中加上async 屬性是最簡單的方式。
    三、延遲載入（lazy loading）
    前面解決了非同步載入（async loading）問題，再談談什麼是延遲載入。
    延遲載入：有些 js 程式碼並不是頁面初始化的時候就立刻需要的，而稍後的某些情況才需要的。延遲載入就是一開始並不載入這些暫時不用的js，而是在需要的時候或稍後再通過js 的控制來非同步載入。
    也就是將 js 切分成許多模組，頁面初始化時只載入需要立即執行的 js ，然後其它 js 的載入延遲到第一次需要用到的時候再載入。
    特別是頁面有大量不同的模組組成，很多可能暫時不用或根本就沒用到。
    就像圖片的延遲載入，在圖片出現在可視區域內時（在滾動條下拉）才載入顯示圖片。
    四、script 的兩階段載入 與 延遲執行（lazy execution）
    JS的載入其實是由兩階段組成：下載內容（download bytes）和執行（parse and execute）。
    瀏覽器在下載完 js 的內容後就會立即對其解析和執行，不管是同步載入還是非同步載入。
    前面說的非同步載入，解決的只是下載階段的問題，但程式碼在下載後會立即執行。
    而瀏覽器在解析執行 JS 階段是阻塞任何操作的，這時的瀏覽器處於無響應狀態。
    我 們都知道通過網路下載 script 需要明顯的時間，但容易忽略了第二階段，解析和執行也是需要時間的。script的解析和執行所花的時間比我們想象的要多，尤其是script 很多很大的時候。有些是需要立刻執行，而有些則不需要（比如只是在展示某個介面或執行某個操作時才需要）。
    這些script 可以延遲執行，先非同步下載快取起來，但不立即執行，而是在第一次需要的時候執行一次。
    利用特殊的技巧可以做到 下載 與 執行的分離 (再次感謝 javascript 的動態特性)。比如將 JS 的內容作為 Image或 object 物件載入快取起來，所以就不會立即執行了，然後在第一次需要的時候再執行。
    此部分的更多解釋 請檢視末尾參考資料中 ControlJS 的相關連結。
    小技巧：

  4. 模擬較長的下載時間：
    寫個後端指令碼，讓其 sleep 一定時間。如在 jsp 中 Thread.sleep(5000); ，這樣5秒後才能收到內容。

  5. 模擬較長的 js 程式碼執行時間（因為這步一般比較快不容易觀察到）：
    var t_start = Number(new Date());
    while ( t_start + 5000 > Number(new Date()) ) {}
    這個程式碼將使 js 執行5秒才能完成！
    五、script 標籤使用的歷史

  6. script 放在 HEAD 中
    <head>
    <script src=“…”></script>
    </head>

阻止了後續的下載；
在IE 6-7 中 script 是順序下載的，而不是現在的 “並行下載、順序執行” 的方式；
在下載和解析執行階段阻止渲染（rendering）；

  1. script 放在頁面底部（2007）
    …
    <script src=“…”></script>
    </body>

不阻止其它下載；
在IE 6-7 中 script 是順序下載的；
在下載和解析執行階段阻止渲染（rendering）；

  1. 非同步載入script（2009）
    var se = document.createElement
    (`script`);
    se.src = `http://anydomain.com/A.js`;
    document.getElementsByTagName(`head`)
    [0].appendChild(se);

這就是本文主要說的方式。
不阻止其它下載；
在所有瀏覽器中，script都是並行下載；
只在解析執行階段阻止渲染（rendering）；

  1. 非同步下載 + 按需執行 (2010)
    var se = new Image();
    se.onload = registerScript();
    se.src = `http://anydomain.com/A.js`;
    把下載 js 與 解析執行 js 分離出來
    不阻止其它下載；
    在所有瀏覽器中，script都是並行下載；
    不阻止渲染（rendering）直到真正需要時；
    六、非同步載入的問題
    在非同步載入的時候，無法使用 document.write 輸出文件內容。
    在同步模式下，document.write 是在當前 script 所在的位置輸 出文件的。而在非同步模式下，瀏覽器繼續處理後續頁面內容，根本無法確定 document.write 應該輸出到什麼位置，所以非同步模式下 document.write 不可行。而到了頁面已經 onload 之後，再執行 document.write 將導致當前頁面的內容被清空，因為它會自動觸發 document.open 方法。
    實際上document.write的名聲並不好，最好少用。
    替代方法：
  2. 雖然非同步載入不能用 document.write，但還是可以onload之後執行操作dom（建立dom或修改dom）的，這樣可以實現一些自己的動態輸出。比如要在頁面非同步建立一個浮動元素，這和它在頁面中的位置就沒關係了，只要建立出該dom元素新增到 document 中即可。
  3. 如果需要在固定位置非同步生成元素的內容，那麼可以在該固定位置設定一個dom元素作為目標，這樣就知道位置了，非同步載入之後就可以對這個元素進行修改。
    六、JS 模組化管理
    非同步載入，需要將所有 js 內容按模組化的方式來切分組織，其中就存在依賴關係，而非同步載入不保證執行順序。
    另外，namespace 如何管理 等相關問題。這部分已超出本文內容，可參考：
    RequireJS 、 CommonJS 以及 王保平(淘寶)的 SeaJS 及其部落格 。
    七、JS最佳實踐：
  4. 最小化 js 檔案，利用壓縮工具將其最小化，同時開啟http gzip壓縮。工具：
  5. 儘量不要放在 <head> 中，儘量放在頁面底部，最好是</body>之前的位置
  6. 避免使用 document.write 方法
  7. 非同步載入 js ，使用非阻塞方式，就是此文內容。
  8. 儘量不直接在頁面元素上使用 Inline Javascript，如onClick 。有利於統一維護和快取處理。
    參考資料：
    Lazy Loading Asyncronous Javascript
    Load Non-blocking JavaScript with HTML5 Async and Defer
    2010年 Velocity China 上的兩個講義：
    Steve Souders(Google)的 Even Faster Web Sites (pdf)
    李穆(淘寶)的 第三方廣告程式碼穩定性和效能優化實戰 (pdf)

http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html


相關文章