先來試個(gè)一句話解釋仨沐兰,當(dāng)瀏覽器碰到?script?腳本的時(shí)候:
<script src="script.js"></script>
沒有?defer?或?async于置,瀏覽器會(huì)立即加載并執(zhí)行指定的腳本亲铡,“立即”指的是在渲染該?script?標(biāo)簽之下的文檔元素之前,也就是說不等待后續(xù)載入的文檔元素,讀到就加載并執(zhí)行剖踊。
<script async src="script.js"></script>
有?async,加載和渲染后續(xù)文檔元素的過程將和?script.js?的加載與執(zhí)行并行進(jìn)行(異步)衫贬。
<script defer src="myscript.js"></script>
有?defer德澈,加載后續(xù)文檔元素的過程將和?script.js?的加載并行進(jìn)行(異步),但是?script.js?的執(zhí)行要在所有元素解析完成之后固惯,DOMContentLoaded?事件觸發(fā)之前完成梆造。
然后從實(shí)用角度來說呢,首先把所有腳本都丟到?</body>?之前是最佳實(shí)踐葬毫,因?yàn)閷?duì)于舊瀏覽器來說這是唯一的優(yōu)化選擇镇辉,此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。
接著贴捡,我們來看一張圖咯:
藍(lán)色線代表網(wǎng)絡(luò)讀取忽肛,紅色線代表執(zhí)行時(shí)間,這倆都是針對(duì)腳本的烂斋;綠色線代表 HTML 解析屹逛。
此圖告訴我們以下幾個(gè)要點(diǎn):
1:defer?和?async?在網(wǎng)絡(luò)讀却》稀(下載)這塊兒是一樣的,都是異步的(相較于 HTML 解析)
2:它倆的差別在于腳本下載完之后何時(shí)執(zhí)行煎源,顯然?defer?是最接近我們對(duì)于應(yīng)用腳本加載和執(zhí)行的要求的
3:關(guān)于?defer色迂,此圖未盡之處在于它是按照加載順序執(zhí)行腳本的,這一點(diǎn)要善加利用
4:async?則是一個(gè)亂序執(zhí)行的主手销,反正對(duì)它來說腳本的加載和執(zhí)行是緊緊挨著的歇僧,所以不管你聲明的順序如何,只要它加載完了就會(huì)立刻執(zhí)行
仔細(xì)想想锋拖,async?對(duì)于應(yīng)用腳本的用處不大诈悍,因?yàn)樗耆豢紤]依賴(哪怕是最低級(jí)的順序執(zhí)行),不過它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的兽埃,最典型的例子:Google Analytics