接下來我們對比下 defer 和 async 屬性的區別：

其中藍色線代表JavaScript加載；紅色線代表JavaScript執行；綠色線代表 HTML 解析。

• 1）情況1 <scriptsrc="script.js"> 沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，也就是說不等待后續載入的文檔元素，讀到就加載并執行。

• 2）情況2 (異步下載) async 屬性表示異步執行引入的 JavaScript，與 defer 的區別在于：

  • 如果已經加載好，就會開始執行——無論此刻是 HTML 解析階段還是 DOMContentLoaded 觸發之后。需要注意的是，這種方式加載的 JavaScript 依然會阻塞 load 事件。換句話說，async-script 可能在 DOMContentLoaded 觸發之前或之后執行，但一定在 load 觸發之前執行。

• 3）情況3 (延遲執行) defer 屬性表示延遲執行引入的 JavaScript，即這段 JavaScript 加載時 HTML 并未停止解析，這兩個過程是并行的。

  • 整個 document 解析完畢且 defer-script 也加載完成之后（這兩件事情的順序無關），會執行所有由 defer-script 加載的 JavaScript 代碼，然后觸發 DOMContentLoaded 事件。

defer 與相比普通 script，有兩點區別：

• 載入 JavaScript 文件時不阻塞 HTML 的解析，執行階段被放到 HTML 標簽解析完成之后；
• 在加載多個JS腳本的時候，async是無順序的加載，而defer是有順序的加載。

參考

轉載于:https://juejin.im/post/5cb69c516fb9a0687177b4a5

總結

以上是生活随笔為你收集整理的script 标签中async 属性和defer 属性作用以及区别？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。