JavaScript系列—script defer和async的用法和區別

1.script defer是什麼

HTML <script> 標籤的 defer 屬性

 示例

<html>
<body>

<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>

<p>上面的腳本會從下面的段落中請求信息。通常,這是做不到的,因爲在段落加載之前,腳本已經運行過了。</p>

<p id="p1">Hello World!</p>

<p>然而,defer 屬性規定了腳本必須在頁面加載完畢後執行。這樣,腳本就可以從段落中請求數據了。</p>

<p><b>註釋:</b>該屬性只能在 Internet Explorer 中運行。</p>

</body>
</html>

定義和用法

defer 屬性規定是否對腳本執行進行延遲,直到頁面加載爲止。

有的 javascript 腳本 document.write 方法來創建當前的文檔內容,其他腳本就不一定是了。

如果您的腳本不會改變文檔的內容,可將 defer 屬性加入到 <script> 標籤中,以便加快處理文檔的速度。因爲瀏覽器知道它將能夠安全地讀取文檔的剩餘部分而不用執行腳本,它將推遲對腳本的解釋,直到文檔已經顯示給用戶爲止。

關於defer和async的區別 ,看一下《JS高程》的解釋

向 HTML 頁面中插入 JavaScript 的主要方法,就是使用 <script> 元素。這個元素由 Netscape 創造
並在 Netscape Navigator 2中首先實現。後來,這個元素被加入到正式的 HTML 規範中。HTML 4.01 爲
<script> 定義了下列 6 個屬性。

 async :可選。表示應該立即下載腳本,但不應妨礙頁面中的其他操作,比如下載其他資源或
等待加載其他腳本。只對外部腳本文件有效。

 defer :可選。表示腳本可以延遲到文檔完全被解析和顯示之後再執行。只對外部腳本文件有
效。IE7 及更早版本對嵌入腳本也支持這個屬性。

看一個網上的答案(寫的很好)

先來試個一句話解釋仨,當瀏覽器碰到 script 腳本的時候:

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

    沒有 defer 或 async,瀏覽器會立即加載並執行指定的腳本,“立即”指的是在渲染該 script 標籤之下的文檔元素之前,也就是說不等待後續載入的文檔元素,讀到就加載並執行。

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

    有 async,加載和渲染後續文檔元素的過程將和 script.js 的加載與執行並行進行(異步)。

  3. <script defer src="myscript.js"></script>

    有 defer,加載後續文檔元素的過程將和 script.js 的加載並行進行(異步),但是 script.js 的執行要在所有元素解析完成之後,DOMContentLoaded 事件觸發之前完成。

然後從實用角度來說呢,首先把所有腳本都丟到 </body> 之前是最佳實踐,因爲對於舊瀏覽器來說這是唯一的優化選擇,此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。

接着,我們來看一張圖咯:

請輸入圖片描述

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

此圖告訴我們以下幾個要點:

  1. defer 和 async 在網絡讀取(下載)這塊兒是一樣的,都是異步的(相較於 HTML 解析)
  2. 它倆的差別在於腳本下載完之後何時執行,顯然 defer 是最接近我們對於應用腳本加載和執行的要求的
  3. 關於 defer,此圖未盡之處在於它是按照加載順序執行腳本的,這一點要善加利用
  4. async 則是一個亂序執行的主,反正對它來說腳本的加載和執行是緊緊挨着的,所以不管你聲明的順序如何,只要它加載完了就會立刻執行
  5. 仔細想想,async 對於應用腳本的用處不大,因爲它完全不考慮依賴(哪怕是最低級的順序執行),不過它對於那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的,最典型的例子:Google Analytics
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章