<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事件觸發之前完成。
4015838-64f5d39d3b31da25.png
藍色線代表網絡讀取,紅色線代表執行時間,這倆都是針對腳本的;綠色線代表 HTML 解析。
由圖得知:
1 defer 和 async 在網絡讀取(下載)這部分是一樣的,都是異步的(相較于 HTML 解析)。
2 兩者的差別在于腳本下載完之后何時執行,顯然 defer 是最接近我們對于應用腳本加載和執行的要求的。
3 關于 defer,由圖知它是按照加載順序執行腳本的,這一點要善加利用。
4 async 則是亂序執行,反正對它來說腳本的加載和執行是緊緊挨著的,所以不管你聲明的順序如何,只要它加載完了就會立刻執行。
5 async 對于應用腳本的用處不大,因為它完全不考慮依賴(哪怕是最低級的順序執行),不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的,最典型的例子:Google Analytics。