js异步加载 defer和async 比较
網上說法很多,很少一句話能總結清楚的,終于找到兩句一針見血的描述,很到位:
?
相同點:都不阻塞DOM解析
?
defer ?:順序:保證先后順序。解析:HTML 解析器遇到它們時,不阻塞(腳本將被異步下載),待文檔解析完成之后,執行腳本。
?
async ?:順序:不保證先后順序。解析:HTML 解析器遇到它們時,不阻塞(腳本將被異步下載,一旦下載完成,立即執行它),并繼續解析之后的文檔。
?
總結一下:defer 效果是 :js異步下載完畢后且DOM解析完成后且DOMContentLoaded 事件觸發之前按照按頁面腳本出現次序順序從上至下依次執行!
? ? ? ? ? ? ??async 效果是:哪個js先下載就先執行,不按頁面腳本出現次序順序,js的執行一定是在?window的load事件觸發之前
?
順便一提:window的load事件會在頁面中的一切都加載完畢時觸發,但這個過程可能會因為要加載外部資源過多而頗費周折。
? ? ? ? ? ? ? 而DOMContentLoaded事件則在形成完成的DOM樹之后就會觸發,不理會圖像、JavaScript文件、CSS文件或其他資源是否已經下載完畢。
?
個人建議:如果加載的JS存在依賴關系,建議使用defer來保證安全,否則使用async即可
? ? ? ? ? ? ? 已獲得廣泛瀏覽器支持,但使用時需要查詢兼容性!
?
轉載于:https://www.cnblogs.com/xmyxm/p/5767043.html
總結
以上是生活随笔為你收集整理的js异步加载 defer和async 比较的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 安装laravel5.1项目命令
- 下一篇: 剑指Offer_12_数值的整数次方