指令碼引用中的defer和async的用法和區別

2022-07-12 12:00:11 字數 807 閱讀 8477

之前的部落格漫談前端優化中的引用資源優化曾經提到過指令碼引用非同步設定deferasync,沒有細說,這裡展開一下,談談它們的作用和區別,先上張圖來個針對沒用過的小夥伴有個初始印象:

是的,就是在頁面指令碼引用的時候設定defer或者async,為什麼會有這兩個屬相來輔助指令碼載入那,因為瀏覽器在遇到script標籤的時候,文件的解析會停止,不再構建document,有時開啟乙個網頁上會出現空白一段時間,瀏覽器顯示是重新整理請求狀態(也就是一直轉圈),這就會給使用者很不好的體驗,defer和async的合理使用就可以避免這個情況,而且通常script的位置建議寫在頁面底部(移動端應用的比較多,這兩個都是html5中的新屬性)。

所以相對於預設的script引用,這裡配合defer和async就有兩種新的用法,它們之間什麼區別那?

1.預設引用 script:

2.async模式 

3.defer模式

它們的核心功能就是非同步,那麼兩種屬性怎麼去區分什麼情況下用哪個那,主要的參考是如果指令碼不依賴於任何指令碼,並不被任何指令碼依賴,那麼則使用 defer,如果指令碼是模組化的,不依賴於任何指令碼,那麼則使用 async;主要功能點說完了,小夥伴們有沒有分清楚他們的區別了那。

指令碼引用中的defer和async的用法和區別,薛陳磊 | share the world

golang中defer和recover函式

defer語句是用來延遲執行 的,意思就是在執行一段 的時候,只有執行完畢那一時間,才會執行defer語句。而且在遇見多個defer的時候,最開始的defer會是最後乙個執行,可以通過以下 看出來 package main import fmt func main defer fmt.println...

JS中defer和async的區別

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

script標籤中defer和async的區別?

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