向html頁面中插入javascript代碼的主要方法就是通過script標(biāo)簽。其中包括兩種形式，第一種直接在script標(biāo)簽之間插入js代碼，第二種即是通過src屬性引入外部js文件。由于解釋器在解析執(zhí)行js代碼期間會(huì)阻塞頁面其余部分的渲染，對(duì)于存在大量js代碼的頁面來說會(huì)導(dǎo)致瀏覽器出現(xiàn)長(zhǎng)時(shí)間的空白和延遲，為了避免這個(gè)問題，建議把全部的js引用放在</body>標(biāo)簽之前。

　　script標(biāo)簽存在兩個(gè)屬性，defer和async，因此script標(biāo)簽的使用分為三種情況：

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

　　　沒有defer或async屬性，瀏覽器會(huì)立即加載并執(zhí)行相應(yīng)的腳本。也就是說在渲染script標(biāo)簽之后的文檔之前，不等待后續(xù)加載的文檔元素，讀到就開始加載和執(zhí)行，此舉會(huì)阻塞后續(xù)文檔的加載；

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

　　 有了async屬性，表示后續(xù)文檔的加載和渲染與js腳本的加載和執(zhí)行是并行進(jìn)行的，即異步執(zhí)行；

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

有了defer屬性，加載后續(xù)文檔的過程和js腳本的加載(此時(shí)僅加載不執(zhí)行)是并行進(jìn)行的(異步)，js腳本的執(zhí)行需要等到文檔所有元素解析完成之后，DOMContentLoaded事件觸發(fā)執(zhí)行之前。

　　下圖可以直觀的看出三者之間的區(qū)別:

　　其中藍(lán)色代表js腳本網(wǎng)絡(luò)加載時(shí)間，紅色代表js腳本執(zhí)行時(shí)間，綠色代表html解析。

　　從圖中我們可以明確一下幾點(diǎn)：

　　1.defer和async在網(wǎng)絡(luò)加載過程是一致的，都是異步執(zhí)行的；

　　2.兩者的區(qū)別在于腳本加載完成之后何時(shí)執(zhí)行，可以看出defer更符合大多數(shù)場(chǎng)景對(duì)應(yīng)用腳本加載和執(zhí)行的要求；

　　3.如果存在多個(gè)有defer屬性的腳本，那么它們是按照加載順序執(zhí)行腳本的；而對(duì)于async，它的加載和執(zhí)行是緊緊挨著的，無論聲明順序如何，只要加載完成就立刻執(zhí)行，它對(duì)于應(yīng)用腳本用處不大，因?yàn)樗耆豢紤]依賴。

小結(jié)：

defer 和 async 的共同點(diǎn)是都是可以并行加載JS文件，不會(huì)阻塞頁面的加載，不同點(diǎn)是 defer的加載完成之后，JS會(huì)等待整個(gè)頁面全部加載完成了再執(zhí)行，而async是加載完成之后，會(huì)馬上執(zhí)行JS，所以假如對(duì)JS的執(zhí)行有嚴(yán)格順序的話，那么建議用 defer加載。

以上所述是小編給大家介紹的JS中script標(biāo)簽defer和async屬性的區(qū)別詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論