溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關Javascript中 異步加載的底層原理是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
一、同步加載與異步加載的形式
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 時還要執行額外的渲染工作等，所以還是會阻塞部分頁面的初始化處理。
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 和淘寶的那兩個講義。二、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 的相關鏈接。 小技巧：1. 模擬較長的下載時間：
寫個后端腳本，讓其 sleep 一定時間。如在 jsp 中 Thread.sleep(5000); ，這樣5秒后才能收到內容。
2. 模擬較長的 js 代碼執行時間（因為這步一般比較快不容易觀察到）：
var t_start = Number(new Date());
while ( t_start + 5000 > Number(new Date()) ) {}
這個代碼將使 js 執行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）直到真正需要時；
六、異步加載的問題在異步加載的時候，無法使用 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元素作為目標，這樣就知道位置了，異步加載之后就可以對這個元素進行修改。六、JS 模塊化管理異步加載，需要將所有 js 內容按模塊化的方式來切分組織，其中就存在依賴關系，而異步加載不保證執行順序。
另外，namespace 如何管理 等相關問題。這部分已超出本文內容，可參考：
RequireJS 、 CommonJS 以及
王保平(淘寶)的 SeaJS 及其博客 。七、JS最佳實踐：1. 最小化 js 文件，利用壓縮工具將其最小化，同時開啟http gzip壓縮。工具：
2. 盡量不要放在 <head> 中，盡量放在頁面底部，最好是</body>之前的位置
3. 避免使用 document.write 方法
4. 異步加載 js ，使用非阻塞方式，就是此文內容。
5. 盡量不直接在頁面元素上使用 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
看完上述內容，你們對Javascript中 異步加載的底層原理是什么有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
