先來試個一句話解釋仨,當瀏覽器碰到script
指令碼的時候:
沒有
defer
或async
,瀏覽器會立即載入並執行指定的指令碼,「立即」指的是在渲染該script
標籤之下的文件元素之前,也就是說不等待後續載入的文件元素,讀到就載入並執行。
有
async
,載入和渲染後續文件元素的過程將和script.js
的載入與執行並行進行(非同步)。
有
defer
,載入後續文件元素的過程將和script.js
的載入並行進行(非同步),但是script.js
的執行要在所有元素解析完成之後,domcontentloaded
事件觸發之前完成。
然後從實用角度來說呢,首先把所有指令碼都丟到之前是最佳實踐,因為對於舊瀏覽器來說這是唯一的優化選擇,此法可保證非指令碼的其他一切元素能夠以最快的速度得到載入和解析。 接著,我們來看一張圖咯:
關於 defer,此圖未盡之處在於它是按照載入順序執行指令碼的,這一點要善加利用
async 則是乙個亂序執行的主,反正對它來說指令碼的載入和執行是緊緊挨著的,所以不管你宣告的順序如何,只要它載入完了就會立刻執行
仔細想想,async 對於應用指令碼的用處不大,因為它完全不考慮依賴(哪怕是最低階的順序執行),不過它對於那些可以不依賴任何指令碼或不被任何指令碼依賴的指令碼來說卻是非常合適的,最典型的例子:google analytics
script的defer和async
mrcxt
進入mrcxt的wordpress部落格
Js中的defer屬性和async屬性
一 defer和async 1 defer 指外部js檔案和當前html頁面同時載入 非同步載入 但只在當前頁面解析完成之後執行js async 指外部js檔案和當前html頁面同時載入 非同步載入 在當前js檔案載入完成後,執行js 二 defer和sync屬性只對外部指令碼檔案有效 上圖表明 這...
script標籤中defer和async的區別?
defer 延遲 async 非同步 先來試個一句話解釋仨,當瀏覽器碰到 script 指令碼的時候 沒有 defer 或 async,瀏覽器會立即載入並執行指定的指令碼,立即 指的是在渲染該 script 標籤之下的文件元素之前,也就是說不等待後續載入的文件元素,讀到就載入並執行。有 async,...
defer和async的區別
當瀏覽器碰到 script 指令碼的時候 沒有 defer 或 async,瀏覽器會立即載入並執行指定的指令碼,立即 指的是在渲染該 script 標籤之下的文件元素之前,也就是說不等待後續載入的文件元素,讀到就載入並執行。有 async,載入和渲染後續文件元素的過程將和 script.js 的載入...