JavaScript 異步加載

時間 2019-11-12

原文原文鏈接

本文轉載自：http://blog.csdn.net/m13666368773/article/details/7586106
javascript

1、同步加載與異步加載的形式

1. 同步加載

咱們平時最常使用的就是這種同步加載形式：java

<script src="http://yourdomain.com/script.js"></script>

同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，中止了後續的解析，所以中止了後續的文件加載（如圖像）、渲染、代碼執行。ajax

js 之因此要同步執行，是由於 js 中可能有輸出 document 內容、修改dom、重定向等行爲，因此默認同步執行纔是安全的。api

之前的通常建議是把<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 同源。app

將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 時還要執行額外的渲染工做等，因此仍是會阻塞部分頁面的初始化處理。

3. 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 和淘寶的那兩個講義。

2、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.六、Opera 10.五、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 方式處理，而不是同步方式。

我的補充：

既然 HTML5 中已經支持異步加載，爲何還要使用前面推薦的那種麻煩（動態建立 script 元素）的方式？

答：爲了兼容尚不支持 async 老瀏覽器。若是未來全部瀏覽器都支持了，那麼直接在script中加上async 屬性是最簡單的方式。

3、異步加載的問題

在異步加載的時候，沒法使用 document.write 輸出文檔內容。

在同步模式下，document.write 是在當前 script 所在的位置輸出文檔的。而在異步模式下，瀏覽器繼續處理後續頁面內容，根本沒法肯定 document.write 應該輸出到什麼位置，因此異步模式下 document.write 不可行。而到了頁面已經 onload 以後，再執行 document.write 將致使當前頁面的內容被清空，由於它會自動觸發 document.open 方法。

實際上document.write的名聲並很差，最好少用。

替代方法：

1. 雖然異步加載不能用 document.write，但仍是能夠onload以後執行操做dom（建立dom或修改dom）的，這樣能夠實現一些本身的動態輸出。好比要在頁面異步建立一個浮動元素，這和它在頁面中的位置就不要緊了，只要建立出該dom元素添加到 document 中便可。

2. 若是須要在固定位置異步生成元素的內容，那麼能夠在該固定位置設置一個dom元素做爲目標，這樣就知道位置了，異步加載以後就能夠對這個元素進行修改。

4、script 標籤使用的歷史

1. script 放在 HEAD 中

<head>
  <script src=「…」></script>
  </head>

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

2. script 放在頁面底部（2007）

... 
 <script src=「…」></script> 
 </body>

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

3. 異步加載script（2009）

var se = document.createElement
 ('script'); 
 se.src = 'http://anydomain.com/A.js'; 
 document.getElementsByTagName('head') 
 [0].appendChild(se);

這就是本文主要說的方式。

不阻止其它下載；
在全部瀏覽器中，script都是並行下載；
只在解析執行階段阻止渲染（rendering）；

4. 異步下載 + 按需執行 (2010)

var se = new Image(); 
 se.onload = registerScript(); 
 se.src = 'http://anydomain.com/A.js';
 把下載 js 與 解析執行 js 分離出來

不阻止其它下載；
在全部瀏覽器中，script都是並行下載；
不阻止渲染（rendering）直到真正須要時；

5、經驗總結

1. 最小化 js 文件，利用壓縮工具將其最小化，同時開啓http gzip壓縮。工具：

2. 儘可能不要放在 <head> 中，儘可能放在頁面底部，最好是</body>以前的位置

3. 避免使用 document.write 方法

4. 異步加載 js ，使用非阻塞方式，就是此文內容。

5. 儘可能不直接在頁面元素上使用 Inline Javascript，如onClick 。有利於統一維護和緩存處理。

6. 異步加載，須要將全部 js 內容按模塊化的方式來切分組織，其中就存在依賴關係，而異步加載不保證執行順序。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。