快捷導(dǎo)航

使用defer和async實(shí)現(xiàn)高效加載JavaScript

更新時(shí)間：2024年06月17日 08:47:27 作者：yanessa_yu

async和defer都是異步加載腳本,但async是加載完腳本后立即執(zhí)行,而defer是在HTML解析完成后再執(zhí)行腳本,本文給大家介紹了如何使用defer和async高效加載JavaScript,文中通過代碼和圖文講解的非常詳細(xì),需要的朋友可以參考下

沒有defer或async，在head

解析將暫停，直到獲取并執(zhí)行腳本為止。完成此操作后，解析將繼續(xù)。

沒有defer或async，在body末尾

解析是在沒有任何停頓的情況下完成的，當(dāng)它完成時(shí)，腳本會(huì)被fetched并執(zhí)行。解析是在腳本下載之前完成的，因此頁面顯示早于前面的示例。

使用async，在head

腳本是異步獲取的，當(dāng)它下載完，HTML解析會(huì)暫停以執(zhí)行腳本，腳本執(zhí)行完，再接著解析HTML。

使用defer，在head

腳本是異步獲取的，當(dāng)HTML解析完，再執(zhí)行腳本。

“在head使用defer”和“在body末尾”都是在HTML解析完再執(zhí)行腳本，但“在head使用defer”比“在body末尾”執(zhí)行腳本的時(shí)間要早，因?yàn)?ldquo;在head使用defer”腳本是在HTML解析的同時(shí)下載的，而“在body末尾”腳本是在HTML解析完再下載的。

因此，就速度而言，這個(gè)是最優(yōu)的方式。

阻塞解析

async會(huì)阻止頁面的解析， defer不會(huì)。

阻塞渲染

async和defer都不能保證不阻塞渲染。這取決于你和你的腳本（例如，確保你的腳本在onLoad事件之后運(yùn)行）。

domInteractive

標(biāo)記為defer的腳本在domInteractive事件之后立即執(zhí)行，該事件發(fā)生在加載、解析HTML和構(gòu)建DOM之后。

此時(shí)，CSS和圖像仍有待加載和解析。

完成此操作后，瀏覽器將發(fā)出domComplete事件，然后發(fā)出onLoad。

domInteractive之所以重要，是因?yàn)樗氖录徽J(rèn)為是感知加載速度的衡量標(biāo)準(zhǔn)。

考慮到延遲的優(yōu)點(diǎn)，在各種場景下，它似乎是比異步更好的選擇。

另一個(gè)贊成用defer的原因

標(biāo)記為async的腳本在可用時(shí)會(huì)按隨意順序執(zhí)行。標(biāo)記為defer的腳本將按標(biāo)記中定義的順序執(zhí)行（在解析完成后）。

如下，有一個(gè)index.html文件，引入3個(gè)標(biāo)記async的js文件和3個(gè)標(biāo)記defer的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./1.js" async></script>
    <script src="./2.js" async></script>
    <script src="./3.js" async></script>
    <script src="./11.js" defer></script>
    <script src="./12.js" defer></script>
    <script src="./13.js" defer></script>
</body>
</html>

2.js 和 12.js文件比較大，下載會(huì)慢一些