本文總結一下瀏覽器在 javascript 的載入方式。 關鍵詞：非同步載入（async loading），延遲載入（lazy loading），延遲執行（lazy execution），async 屬性， defer 屬性 一、同步載入與非同步載入的形式 1. 同步載入 我們平時最常使用的就是這種同步 ...
本文總結一下瀏覽器在 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 時還要執行額外的渲染工作等，所以還是會阻塞部分頁面的初始化處理。
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秒 與 其它方法組合。
var xhrObj = getXHRObject();Script in Iframe：創建並插入一個iframe元素，讓其非同步執行 js 。
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
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">詳見參考資料中2010年的Velocity 大會 Steve Souders 和淘寶的那兩個講義。 二、async 和 defer 屬性 1. defer 屬性
/*
var ...
*/
</script>
<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 方式處理，而不是同步方式。
<head>
<script src=“…”></script>
</head>
- 阻止了後續的下載；
- 在IE 6-7 中 script 是順序下載的，而不是現在的 “並行下載、順序執行” 的方式；
- 在下載和解析執行階段阻止渲染（rendering）；
...
<script src=“…”></script>
</body>
- 不阻止其它下載；
- 在IE 6-7 中 script 是順序下載的；
- 在下載和解析執行階段阻止渲染（rendering）；
var se = document.createElement這就是本文主要說的方式。
('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);
- 不阻止其它下載；
- 在所有瀏覽器中，script都是並行下載；
- 只在解析執行階段阻止渲染（rendering）；
var se = new Image();
se.onload = registerScript();
se.src = 'http://anydomain.com/A.js';
把下載 js 與 解析執行 js 分離出來
- 不阻止其它下載；
- 在所有瀏覽器中，script都是並行下載；
- 不阻止渲染（rendering）直到真正需要時；
