首先我們先來看一下Script標(biāo)簽的各項(xiàng)屬性：
script標(biāo)簽也支持HTML中的全局屬性：
下面我們來看看一看js的異步加載詳情：
一、同步加載與異步加載的形式
這種方法是在頁面中標(biāo)簽內(nèi)，用 js 創(chuàng)建一個 script 元素并插入到 document 中。這樣就做到了非阻塞的下載 js 代碼。
async屬性是HTML5中新增的異步支持，見后文解釋，加上好（不加也不影響）。
此方法被稱為?Script DOM Element 法，不要求 js 同源。
將js代碼包裹在匿名函數(shù)中并立即執(zhí)行的方式是為了保護(hù)變量名泄露到外部可見，這是很常見的方式，尤其是在 js 庫中被普遍使用。function的包裹括號也可換成！、+、—等符號。
例如 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);
})();
但是，這種加載方式在加載執(zhí)行完之前會阻止 onload 事件的觸發(fā)，而現(xiàn)在很多頁面的代碼都在 onload 時還要執(zhí)行額外的渲染工作等，所以還是會阻塞部分頁面的初始化處理。
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);
})();
這和前面的方式差不多，但關(guān)鍵是它不是立即開始異步加載 js ，而是在 onload 時才開始異步加載。這樣就解決了阻塞 onload 事件觸發(fā)的問題。
補(bǔ)充：DOMContentLoaded 與?OnLoad 事件
DOMContentLoaded : 頁面(document)已經(jīng)解析完成，頁面中的dom元素已經(jīng)可用。但是頁面中引用的圖片、subframe可能還沒有加載完。
OnLoad：頁面的所有資源都加載完畢（包括圖片）。瀏覽器的載入進(jìn)度在這時才停止。
這兩個時間點(diǎn)將頁面加載的timeline分成了三個階段。
簡言之，DOMContentLoaded事件在OnLoad事件之前觸發(fā)
4.異步加載的其它方法
由于Javascript的動態(tài)特性，還有很多異步加載方法：
XHR Eval
XHR Injection
Script in Iframe
Script Defer
document.write Script Tag
還有一種方法是用 setTimeout 延遲0秒 與 其它方法組合。
XHR Eval：通過 ajax 獲取js的內(nèi)容，然后 eval 執(zhí)行。
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：創(chuàng)建并插入一個iframe元素，讓其異步執(zhí)行 js 。
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('');
doc.close();
GMail Mobile：頁內(nèi) js 的內(nèi)容被注釋，所以不會執(zhí)行，然后在需要的時候，獲取script元素中 text 內(nèi)容，去掉注釋后 eval 執(zhí)行。
/*
var ...
*/
詳見參考資料中2010年的Velocity 大會 Steve Souders 和淘寶的那兩個講義。
二、async 和 defer 屬性
標(biāo)簽在 HTML 4.01 與 HTML5 的區(qū)別：
type 屬性在HTML 4中是必須的，在HTML5中是可選的。
async 屬性是HTML5中新增的。
個別屬性（xml:space）在HTML5中不支持。
說明：
沒有 async 屬性，script 將立即獲取（下載）并執(zhí)行，然后才繼續(xù)后面的處理，這期間阻塞了瀏覽器的后續(xù)處理。
如果有 async 屬性，那么 script 將被異步下載并執(zhí)行，同時瀏覽器繼續(xù)后續(xù)的處理。
HTML4中就有了defer屬性，它提示瀏覽器這個 script 不會產(chǎn)生任何文檔元素（沒有document.write），因此瀏覽器會繼續(xù)后續(xù)處理和渲染。
如果沒有 async 屬性 但是有 defer 屬性，那么script 將在頁面parse之后執(zhí)行。
如果同時設(shè)置了二者，那么?defer 屬性主要是為了讓不支持 async 屬性的老瀏覽器按照原來的 defer 方式處理，而不是同步方式。
另參見官方說明：script async
三、延遲加載（lazy loading）
前面解決了異步加載（async loading）問題，再談?wù)勈裁词茄舆t加載。
延遲加載：有些 js 代碼并不是頁面初始化的時候就立刻需要的，而稍后的某些情況才需要的。延遲加載就是一開始并不加載這些暫時不用的js，而是在需要的時候或稍后再通過js 的控制來異步加載。
也就是將 js 切分成許多模塊，頁面初始化時只加載需要立即執(zhí)行的 js ，然后其它 js 的加載延遲到第一次需要用到的時候再加載。
特別是頁面有大量不同的模塊組成，很多可能暫時不用或根本就沒用到。
就像圖片的延遲加載，在圖片出現(xiàn)在可視區(qū)域內(nèi)時（在滾動條下拉）才加載顯示圖片。
四、script 的兩階段加載 與 延遲執(zhí)行（lazy execution）
JS的加載其實(shí)是由兩階段組成：下載內(nèi)容（download bytes）和執(zhí)行（parse and execute）。
瀏覽器在下載完 js 的內(nèi)容后就會立即對其解析和執(zhí)行，不管是同步加載還是異步加載。
前面說的異步加載，解決的只是下載階段的問題，但代碼在下載后會立即執(zhí)行。
而瀏覽器在解析執(zhí)行 JS 階段是阻塞任何操作的，這時的瀏覽器處于無響應(yīng)狀態(tài)。
我 們都知道通過網(wǎng)絡(luò)下載 script 需要明顯的時間，但容易忽略了第二階段，解析和執(zhí)行也是需要時間的。script的解析和執(zhí)行所花的時間比我們想象的要多，尤其是script 很多很大的時候。有些是需要立刻執(zhí)行，而有些則不需要（比如只是在展示某個界面或執(zhí)行某個操作時才需要）。
這些script 可以延遲執(zhí)行，先異步下載緩存起來，但不立即執(zhí)行，而是在第一次需要的時候執(zhí)行一次。
利用特殊的技巧可以做到 下載 與 執(zhí)行的分離 (再次感謝 javascript 的動態(tài)特性)。比如將 JS 的內(nèi)容作為?Image或 object 對象加載緩存起來，所以就不會立即執(zhí)行了，然后在第一次需要的時候再執(zhí)行。
此部分的更多解釋 請查看末尾參考資料中?ControlJS 的相關(guān)鏈接。
小技巧：
1.模擬較長的下載時間：
寫個后端腳本，讓其 sleep 一定時間。如在 jsp 中?Thread.sleep(5000); ，這樣5秒后才能收到內(nèi)容。
2.模擬較長的 js 代碼執(zhí)行時間（因?yàn)檫@步一般比較快不容易觀察到）：
var t_start = Number(new Date());
while ( t_start + 5000 > Number(new Date()) ) {}
這個代碼將使 js 執(zhí)行5秒才能完成
五、目前常用的加載方式：
1.放在頭部（一般用于加載cdn）
2.放在底部
3. 異步加載script
var se = document.createElement('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);
這就是本文主要說的方式。
不阻止其它下載；
在所有瀏覽器中，script都是并行下載；
只在解析執(zhí)行階段阻止渲染（rendering）；
4. 異步下載 + 按需執(zhí)行
var se = new Image();
se.onload = registerScript();
se.src = 'http://anydomain.com/A.js'
把下載 js 與 解析執(zhí)行 js 分離出來
不阻止其它下載；
在所有瀏覽器中，script都是并行下載；
不阻止渲染（rendering）直到真正需要時；
六、異步加載的問題
在異步加載的時候，無法使用 document.write 輸出文檔內(nèi)容。
在同步模式下，document.write 是在當(dāng)前 script 所在的位置輸 出文檔的。而在異步模式下，瀏覽器繼續(xù)處理后續(xù)頁面內(nèi)容，根本無法確定?document.write 應(yīng)該輸出到什么位置，所以異步模式下?document.write 不可行。而到了頁面已經(jīng) onload 之后，再執(zhí)行?document.write 將導(dǎo)致當(dāng)前頁面的內(nèi)容被清空，因?yàn)樗鼤詣佑|發(fā)?document.open 方法。
實(shí)際上document.write的名聲并不好，最好少用。
替代方法：
1. 雖然異步加載不能用 document.write，但還是可以onload之后執(zhí)行操作dom（創(chuàng)建dom或修改dom）的，這樣可以實(shí)現(xiàn)一些自己的動態(tài)輸出。比如要在頁面異步創(chuàng)建一個浮動元素，這和它在頁面中的位置就沒關(guān)系了，只要創(chuàng)建出該dom元素添加到 document 中即可。
2. 如果需要在固定位置異步生成元素的內(nèi)容，那么可以在該固定位置設(shè)置一個dom元素作為目標(biāo)，這樣就知道位置了，異步加載之后就可以對這個元素進(jìn)行修改。
七、JS最佳實(shí)踐：
1. 最小化 js 文件，利用壓縮工具將其最小化，同時開啟http gzip壓縮。工具：
2. 盡量不要放在 中，盡量放在頁面底部，最好是之前的位置
3. 避免使用?document.write 方法
4. 異步加載 js ，使用非阻塞方式，就是此文內(nèi)容。
5. 盡量不直接在頁面元素上使用 Inline Javascript，如onClick 。有利于統(tǒng)一維護(hù)和緩存處理。
寫在最后：
scirpt標(biāo)簽也可用于跨域，詳見下篇文章《jsonp跨域原理》：www.lxweimin.com/p/f24434e3a094
文章摘自：http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html，感謝
