異步加載的方式

時間 2019-11-12

標籤異步加載方式简体版

原文原文鏈接

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

1. 同步加載

咱們平時最常使用的就是這種同步加載形式：<script src="http://yourdomain.com/script.js"></script> javascript

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

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

之前的通常建議是把<script>放在頁面末尾</body>以前，這樣儘量減小這種阻塞行爲，而先讓頁面展現出來。ajax

簡單說：加載的網絡 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 同時，還會繼續進行後續頁面的處理。api

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

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.$(document).ready()

須要引入jquery
兼容全部瀏覽器

$(document).ready(function() { alert("加載完成！"); });

5.<script>標籤的async="async"屬性

async屬性是HTML5新增屬性，須要Chrome、FireFox、IE9+瀏覽器支持；
async屬性規定一旦腳本可用，則會異步執行；
async屬性僅適用於外部腳本；
此方法不能保證腳本按順序執行；
他們將在onload事件以前完成。

6.<script>標籤的defer="defer"屬性

defer屬性規定是否對腳本執行進行延遲，直到頁面加載爲止；
若是腳本不會改變文檔的內容，可將defer屬性加入到<script>標籤中，以便加快處理文檔的速度；
兼容全部瀏覽器；
此方法能夠確保全部設置了defer屬性的腳本按順序執行。

7.異步加載的其它方法

因爲Javascript的動態特性，還有不少異步加載方法：

XHR Eval
XHR Injection
Script in Iframe
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 屬性

defer屬性聲明這個腳本中將不會有 document.write 或 dom 修改。

瀏覽器將會並行下載 file.js 和其它有 defer 屬性的script，而不會阻塞頁面後續處理。

defer屬性在IE 4.0中就實現了，超過13年了！Firefox 從 3.5 開始支持defer屬性。

注：全部的defer腳本保證是按順序依次執行的。

2. async 屬性

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中不支持。

說明：

（1）沒有 async 屬性，script 將當即獲取（下載）並執行，而後才繼續後面的處理，這期間阻塞了瀏覽器的後續處理。

（2）若是有 async 屬性，那麼 script 將被異步下載並執行，同時瀏覽器繼續後續的處理。

（3）HTML4中就有了defer屬性，它提示瀏覽器這個 script 不會產生任何文檔元素（沒有document.write），所以瀏覽器會繼續後續處理和渲染。

（4）若是沒有 async 屬性可是有 defer 屬性，那麼script 將在頁面parse以後執行。

（5）若是同時設置了兩者，那麼 defer 屬性主要是爲了讓不支持 async 屬性的老瀏覽器按照原來的 defer 方式處理，而不是同步方式。

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

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

3、延遲加載（lazy loading）

前面解決了異步加載（async loading）問題，再談談什麼是延遲加載。

延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而是稍後的某些狀況才須要的。延遲加載就是一開始並不加載這些暫時不用的js，而是在須要的時候或稍後再經過js 的控制來異步加載。

也就是將 js 切分紅許多模塊，頁面初始化時只加載須要當即執行的 js ，而後其它 js 的加載延遲到第一次須要用到的時候再加載。

特別是頁面有大量不一樣的模塊組成，不少可能暫時不用或根本就沒用到。就像圖片的延遲加載，在圖片出如今可視區域內時（在滾動條下拉）才加載顯示圖片。

4、script 的兩階段加載與延遲執行（lazy execution）

JS的加載實際上是由兩階段組成：下載內容（download bytes）和執行（parse and execute）。

瀏覽器在下載完 js 的內容後就會當即對其解析和執行，不論是同步加載仍是異步加載。

前面說的異步加載，解決的只是下載階段的問題，但代碼在下載後會當即執行。

而瀏覽器在解析執行 JS 階段是阻塞任何操做的，這時的瀏覽器處於無響應狀態。

咱們都知道經過網絡下載 script 須要明顯的時間，但容易忽略了第二階段，解析和執行也是須要時間的。script的解析和執行所花的時間比咱們想象的要多，尤爲是script 不少很大的時候。有些是須要馬上執行，而有些則不須要（好比只是在展現某個界面或執行某個操做時才須要）。

這些script 能夠延遲執行，先異步下載緩存起來，但不當即執行，而是在第一次須要的時候執行一次。

利用特殊的技巧能夠作到下載與執行的分離 (再次感謝 javascript 的動態特性)。好比將 JS 的內容做爲 Image或 object 對象加載緩存起來，因此就不會當即執行了，而後在第一次須要的時候再執行。

5、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）直到真正須要時。

6、異步加載的問題

在異步加載的時候，沒法使用 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元素做爲目標，這樣就知道位置了，異步加載以後就能夠對這個元素進行修改。