簡單介紹HTML5 defer和async的差別

下面小編就為大家帶來一篇淺談HTML5 defer和async的差別。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

在HTML頁面中插入Javascript的主要方法，就是使用3f1c4e4b6b16bbbd69b2ee476dc4f83a元素。這個元素是由Netscape創造並在Netscape Navigator 2中先實作。後來，這個元素就被加入到正式的HTML規範中。 HTML4.01為3f1c4e4b6b16bbbd69b2ee476dc4f83a定義了6個屬性，包括defer和async。 defer和async都是可選的，而且只對外部腳本檔案有效。
 
一、當瀏覽器解析到script腳本，沒有defer或async時：
 

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

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

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

瀏覽器會立即下載腳本，但不會妨礙頁面中的其他操作，例如下載其他資源或等待載入其他腳本。載入和渲染後續文檔元素的過程和main.js的載入與執行並行進行（非同步）。
 
async不保證按照腳本出現的先後順序執行，因此，確保兩者之前互不依賴非常重要，指定async屬性的目的是不讓頁面等待兩個腳本的下載和執行，從而異步加載頁面其他內容，建議非同步腳本不要在載入期間修改DOM。
 
非同步腳本一定會在頁面的load事件前執行，但可能會在DOMContentLoaded事件觸發之前或之後執行。支援非同步腳本的瀏覽器有Firefox 3.6、Safari 5 和Chrome。
 
三、當瀏覽器解析到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 解析。
 
此圖告訴我們以下幾個重點：
 
defer 和async 在網路上讀取（下載）這塊兒是一樣的，都是非同步的（相較於HTML 解析）

它兩個的差別在於腳本下載完之後何時執行，顯然defer 是最接近我們對於應用程式腳本載入和執行的要求的

關於defer，此圖未盡之處在於它是按照加載順序執行腳本的，這一點要善加利用

async 則是一個亂序執行的主，反正對它來說腳本的加載和執行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會立刻執行

仔細想想，async 對於應用腳本的用處不大，因為它完全不考慮依賴（即使是最低階的順序執行），不過它對那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google Analytics

以上是簡單介紹HTML5 defer和async的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！