快捷導航

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

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

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

沒有defer或async，在head

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

沒有defer或async，在body末尾

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

使用async，在head

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

使用defer，在head

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

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

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

阻塞解析

async會阻止頁面的解析， defer不會。

阻塞渲染

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

domInteractive

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

此時，CSS和圖像仍有待加載和解析。

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

domInteractive之所以重要，是因為它的事件被認為是感知加載速度的衡量標準。

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

另一個贊成用defer的原因

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

如下，有一個index.html文件，引入3個標記async的js文件和3個標記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文件比較大，下載會慢一些