淺談async、defer以普通script加載的區(qū)別
如果用一張圖片詮釋這幾種script加載的特點(diǎn)，應(yīng)該是這樣的：
結(jié)合圖片我們可以將三種方式的特點(diǎn)總結(jié)如下：
<script>: 當(dāng)HTML解析過(guò)程中遇到script標(biāo)簽時(shí)，瀏覽器中斷HTML解析，隨即下載script文件，完成后立即執(zhí)行script，執(zhí)行完成后再繼續(xù)HTML解析<script async>: 當(dāng)HTML解析過(guò)程中遇到script標(biāo)簽時(shí)，不會(huì)中斷HTML解析，同時(shí)并行下載script文件，下載完成后中斷HTML解析并執(zhí)行script，執(zhí)行完成后再繼續(xù)HTML解析（script的執(zhí)行順序不一定按照script標(biāo)簽的出現(xiàn)順序，而是取決于script下載完成的順序）<script defer>: 當(dāng)HTML解析過(guò)程中遇到script標(biāo)簽時(shí)，不會(huì)中斷HTML解析，同時(shí)并行下載script文件，直到HTML解析完成再執(zhí)行script（script的執(zhí)行順序與script標(biāo)簽出現(xiàn)順序一致）
我們可以通過(guò)一個(gè)小項(xiàng)目驗(yàn)證上面的結(jié)論。
index.html:
<!DOCTYPE html><html lang="en"><head> <script> console.time("timer"); console.timeLog("timer", "--- Start parsing HTML"); document.addEventListener("DOMContentLoaded", function () { console.timeLog("timer", "--- Document loaded"); }); </script></head><body> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima. </p> <!-- 此處省略500行重復(fù)元素 --> <script>console.timeLog("timer", "--- Start loading 1.js")</script> <script src="./1.js"></script> <script>console.timeLog("timer", "--- Start loading 2.js")</script> <script src="./2.js"></script> <script>console.timeLog("timer", "--- Start loading 3.js")</script> <script src="./3.js"></script> <!-- 此處省略1500行重復(fù)元素 --> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima. </p> <script> console.timeLog("timer", "--- End parsing HTML") </script></body></html>1.js:
const text1 = ` // 超長(zhǎng)文本`text1.split(" ");console.timeLog("timer", "--- 1.js excuted");2.js:
const text2 = ` // 超長(zhǎng)文本`text2.split(" ");console.timeLog("timer", "--- 2.js excuted");3.js:
const text3 = ` // 超長(zhǎng)文本`text3.split(" ");console.timeLog("timer", "--- 3.js excuted");我們分別使用普通、async和defer的方式加載1.js、2.js、3.js，觀察控制臺(tái)的打印結(jié)果：
普通:
結(jié)論：script出現(xiàn)會(huì)中斷HTML加載，且script會(huì)順序的加載、執(zhí)行，所有script執(zhí)行完成后再解析HTML。
Async:
結(jié)論：HTML解析和script下載同步進(jìn)行，script執(zhí)行會(huì)中斷HTML解析；script執(zhí)行順序和tag出現(xiàn)順序不一定相同；script可能會(huì)在document loaded之后執(zhí)行。
Defer:
結(jié)論：HTML解析和script下載同步進(jìn)行；script會(huì)在HTML解析完成后和document loaded之前執(zhí)行，且執(zhí)行順序和tag出現(xiàn)順序一致。
由以上實(shí)驗(yàn)可知：如果使用普通方式時(shí)通常建議將script放到<body>的最后，以免阻塞HTML解析影響網(wǎng)頁(yè)打開(kāi)速度。而defer相對(duì)于async更具優(yōu)勢(shì)，不會(huì)阻塞HTML解析且script的執(zhí)行順序可以預(yù)測(cè)，有一些需要預(yù)先下載執(zhí)行的script可以使用defer的方式在<head>中引用。
到此這篇關(guān)于淺談async、defer以普通script加載的區(qū)別的文章就介紹到這了,更多相關(guān)async、defer以及普通script加載內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！
相關(guān)文章：
1. spring boot使用@Async異步注解的實(shí)現(xiàn)原理+源碼2. python 使用事件對(duì)象asyncio.Event來(lái)同步協(xié)程的操作3. springboot實(shí)現(xiàn)異步調(diào)用@Async的示例4. Spring Boot Async異步執(zhí)行任務(wù)過(guò)程詳解5. SpringBoot項(xiàng)目@Async方法問(wèn)題解決方案6. python開(kāi)發(fā)實(shí)例之Python的Twisted框架中Deferred對(duì)象的詳細(xì)用法與實(shí)例7. JS async 函數(shù)的含義和用法實(shí)例總結(jié)8. 解決SpringBoot中使用@Async注解失效的問(wèn)題9. python多進(jìn)程執(zhí)行方法apply_async使用說(shuō)明10. Java 利用DeferredResult實(shí)現(xiàn)http輪詢(xún)實(shí)時(shí)返回?cái)?shù)據(jù)接口
網(wǎng)公網(wǎng)安備