當(dāng)瀏覽器碰到 script 腳本的時候:
<script src="script.js"></script>
沒有 defer 或 async梦抢,瀏覽器會立即加載并執(zhí)行指定的腳本鞍匾,“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前交洗,也就是說不等待后續(xù)載入的文檔元素,讀到就加載并執(zhí)行橡淑。并且過程中會中斷HTML的渲染构拳。
<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)閷τ谂f瀏覽器來說這是唯一的優(yōu)化選擇行贪,此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。
接著模闲,來看一張圖:
此圖告訴我們以下幾個要點(diǎn):
- defer 和 async 在網(wǎng)絡(luò)讀葐拧(加載)這塊兒是一樣的,都是異步的(相較于 HTML 解析)实夹。
- 它倆的差別在于腳本加載完之后何時執(zhí)行橄浓,顯然 defer 是最接近我們對于應(yīng)用腳本加載和執(zhí)行的要求的粒梦。
- 關(guān)于 defer,此圖未盡之處在于它是按照加載順序執(zhí)行腳本的荸实,這一點(diǎn)要善加利用
- async 則是腳本的加載和執(zhí)行是緊緊挨著的匀们,所以不管你聲明的順序如何,只要它加載完了就會立刻執(zhí)行泪勒。就是先加載完的先執(zhí)行昼蛀。
- 仔細(xì)想想,async 對于應(yīng)用腳本的用處不大圆存,因?yàn)樗耆豢紤]依賴(哪怕是最低級的順序執(zhí)行)叼旋,不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的,最典型的例子:Google Analytics沦辙。