使用async 和 defer 屬性異步加載執行JavaScript

檢視原文：http://www.ibloger.net/article/390.html

HTML5讓我興奮的一個最大的原因是，它裡面實作的新功能和新特征都是我們長久以來一直期待的。比如，我以前一直在使用[placeholders]，但以前必須要用JavaScript實作。而HTML5裡給JavaScript标記提供的

async

屬性，使JavaScript能異步加載執行。之前我需要各種的JavaScript插件來實作這種功能，但現在這個新屬性能讓我們輕松的實作異步加載。

async – HTML代碼

真的非常簡單，就像下面這樣：

事實上，如果你是個有嚴謹精神的程式員，你應該在你90%以上的SCRIPT标記上使用

async

屬性。

defer – HTML代碼

還有一個跟

async

屬性相似的

defer

屬性：

跟

async

屬性的在文法上非常相似。

async & defer – 不同之處

這篇WebKit部落格将

defer

和

async

之間的不同之處解釋的非常清楚：

浏覽器對标記有

async

屬性或

defer

屬性的scripts會立即加載并解析，同時也會支援依賴于這個腳本進行初始化的

onload

事件。

async

屬性和

defer

屬性的不同之處在于何時執行這個腳本。标注有

async

屬性的Script會在下載下傳完成後即可執行，不需要等待window的

load

事件。這意味着标記有

async

屬性的腳本并不一定會按在頁面中嵌入的順序執行。而标記有

defer

屬性的腳本卻一定會按它們在頁面上的順序依次執行。執行會在解析完全完成後開始，但會在document的

DOMContentLoaded

事件之前。

支援 async 和 defer 屬性的浏覽器有哪些？

引用Safari部落格上的話：

WebKit引擎的浏覽器(谷歌浏覽器和Safari浏覽器)。火狐浏覽器從3.6版開始支援

async

和

defer

屬性。IE也很早就支援

defer

屬性，但對

async

屬性不支援，在IE9中支援

onload

屬性。

async 太有用了！

看到各浏覽器實作

async

功能着實讓我非常高興。浏覽器網站頁面時被JavaScript卡住的确是個很大的問題，

async

屬性的異步加載、執行能力一定會讓網站的頁面速度增色不少。