在javascript高級程序設計里,介紹了有關defer和async的區別,可是比較淺顯,於是在segmentfault里面找到了大佬的回答,
收錄在我的博客中。
原文鏈接:https://segmentfault.com/q/1010000000640869
當瀏覽器碰到 script
腳本的時候:
-
<script src="script.js"></script>
沒有
defer
或async
,瀏覽器會立即加載並執行指定的腳本,“立即”指的是在渲染該script
標簽之下的文檔元素之前,也就是說不等待后續載入的文檔元素讀到就加載並執行。 -
<script async src="script.js"></script>
有
async
,加載和渲染后續文檔元素的過程將和script.js
的加載與執行並行進行(異步)。 -
<script defer src="myscript.js"></script>
有
defer
,加載后續文檔元素的過程將和script.js
的加載並行進行(異步),但是script.js
的執行要在所有元素解析完成之后,DOMContentLoaded
事件觸發之前完成。
然后從實用角度來說呢,首先把所有腳本都丟到 </body>
之前是最佳實踐,因為對於舊瀏覽器來說這是唯一的優化選擇,此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。
接着,我們來看一張圖:
藍色線代表網絡讀取,紅色線代表執行時間,這倆都是針對腳本的;綠色線代表 HTML 解析。
此圖告訴我們以下幾個要點:
- defer 和 async 在網絡讀取(下載)這塊兒是一樣的,都是異步的(相較於 HTML 解析)
- 它倆的差別在於腳本下載完之后何時執行,顯然 defer 是最接近我們對於應用腳本加載和執行的要求的
- 關於 defer,此圖未盡之處在於它是按照加載順序執行腳本的,這一點要善加利用
- async 則是一個亂序執行的主,反正對它來說腳本的加載和執行是緊緊挨着的,所以不管你聲明的順序如何,只要它加載完了就會立刻執行
- 仔細想想,async 對於應用腳本的用處不大,因為它完全不考慮依賴(哪怕是最低級的順序執行),不過它對於那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的,最典型的例子:Google Analytics