async 和 defer 的區別

2022-05-10 01:16:24 字數 1001 閱讀 2651

摘自:

在開發中我們可以在script中宣告兩個不太常見的屬性:deferasync,下面分別解釋了他們的用法: 

defer

async

沒有deferasync,瀏覽器會立即載入並執行指定的指令碼,「立即」指的是在渲染該script標籤之下的文件元素之前,也就是說不等待後續載入的文件元素,讀到就載入並執行。

async,載入渲染後續文件元素的過程將script.js的載入與執行並行進行(非同步)。

defer,載入後續文件元素的過程將script.js的載入並行進行(非同步),但是script.js的執行要在所有元素解析完成之後,domcontentloaded事件觸發之前完成。

然後從實用角度來說呢,首先把所有指令碼都丟到之前是最佳實踐,因為對於舊瀏覽器來說這是唯一的優化選擇,此法可保證非指令碼的其他一切元素能夠以最快的速度得到載入解析。

domcontentloaded和load的區別:它們都是頁面載入的時候觸發的事件。區別在於觸發的時機不一樣。

1.解析html結構。

2.載入外部指令碼和css檔案。

3.解析並執行指令碼**。

4.dom樹構建完成。(此時會觸發domcontentloaded事件)

5.載入外部等檔案。

6.頁面載入完畢。(此時會觸發load事件)

defer和async的區別

當瀏覽器碰到 script 指令碼的時候 沒有 defer 或 async,瀏覽器會立即載入並執行指定的指令碼,立即 指的是在渲染該 script 標籤之下的文件元素之前,也就是說不等待後續載入的文件元素,讀到就載入並執行。有 async,載入和渲染後續文件元素的過程將和 script.js 的載入...

defer和async的區別

當瀏覽器碰到script指令碼的時候 沒有defer或async,瀏覽器會立即載入並執行指定的指令碼,立即 指的是在渲染該script標籤之下的文件元素之前,也就是說不等待後續載入的文件元素,讀到就載入並執行。有async,載入和渲染後續文件元素的過程將和script.js的載入與執行並行進行 非同...

defer和async的區別

先來試個一句話解釋仨,當瀏覽器碰到script指令碼的時候 沒有defer或async,瀏覽器會立即載入並執行指定的指令碼,立即 指的是在渲染該script標籤之下的文件元素之前,也就是說不等待後續載入的文件元素,讀到就載入並執行。有async,載入和渲染後續文件元素的過程將和script.js的載...