HTML5 defer和async的區別

在HTML頁面中插入Javascript的主要方法，就是使用<script>元素。這個元素由Netscape創造並在Netscape Navigator 2中首先實現。後來，這個元素就被加入到正式的HTML規範中。HTML4.01爲<script>定義了6個屬性，包括defer和async。defer和async都是可選的，且只對外部腳本文件有效。

1、當瀏覽器解析到script腳本，沒有defer或async時：

<script src="main.js"></script>

瀏覽器會當即加載並執行指定的腳本，「當即」指在渲染該script標籤之下的文檔元素以前，也就是說不等待後續載入的文檔元素，讀到就加載並執行。

2、當瀏覽器解析到script腳本，有async時：

<script async src="main.js"></script>

瀏覽器會當即下載腳本，但不妨礙頁面中的其餘操做，好比下載其餘資源或等待加載其餘腳本。加載和渲染後續文檔元素的過程和main.js的加載與執行並行進行（異步）。

async不保證按照腳本出現的前後順序執行，所以，確保二者以前互不依賴很是重要，指定async屬性的目的是不讓頁面等待兩個腳本的下載和執行，從而異步加載頁面其餘內容，建議異步腳本不要在加載期間修改DOM。

異步腳本必定會在頁面的load事件前執行，但可能會在DOMContentLoaded事件觸發以前或以後執行。支持異步腳本的瀏覽器有Firefox 3.六、Safari 5 和Chrome。

3、當瀏覽器解析到script腳本，有defer時：

<script defer="defer" src="main1.js"></script>
<script defer="defer"  src="main2.js"></script>

表示腳本會被延遲到文檔徹底被解析和顯示以後再執行，加載後續文檔元素的過程將和main.js的加載並行進行（異步）。HTML5規範要求腳本按照它們出現的前後順序執行，所以第一個延遲腳本會先於第二個延遲腳本執行，而這兩個腳本會先於DOMContentLoaded事件。在現實當中，延遲腳本並不必定會按照順序執行，也不必定會在DOMContentLoaded事件觸發前執行，所以最好只包含一個延遲腳本。

IE4~IE7還支持對嵌入腳本的defer屬性，但IE8以及以後的版本則徹底支持HTML5規定的行爲。

IE4，Firefox 3.5，Safari 5和Chrome是最先支持defer屬性的瀏覽器。其餘瀏覽器胡忽略這個屬性，像日常同樣處理腳本，爲此，把延遲腳本放在頁面底部仍然是最佳選擇。

下圖所示：

藍色線表明網絡讀取，紅色線表明執行時間，這倆都是針對腳本的；綠色線表明 HTML 解析。

此圖告訴咱們如下幾個要點：

1. defer 和 async 在網絡讀取（下載）這塊兒是同樣的，都是異步的（相較於 HTML 解析）
2. 它倆的差異在於腳本下載完以後什麼時候執行，顯然 defer 是最接近咱們對於應用腳本加載和執行的要求的
3. 關於 defer，此圖未盡之處在於它是按照加載順序執行腳本的，這一點要善加利用
4. async 則是一個亂序執行的主，反正對它來講腳本的加載和執行是牢牢挨着的，因此無論你聲明的順序如何，只要它加載完了就會馬上執行
5. 仔細想一想，async 對於應用腳本的用處不大，由於它徹底不考慮依賴（哪怕是最低級的順序執行），不過它對於那些能夠不依賴任何腳本或不被任何腳本依賴的腳原本說倒是很是合適的，最典型的例子：Google Analytics

參考：

《javascript高級程序設計》

defer和async的區別 http://segmentfault.com/q/1010000000640869