接下來(lái)我們對(duì)比下 defer 和 async 屬性的區(qū)別：

其中藍(lán)色線代表JavaScript加載；紅色線代表JavaScript執(zhí)行；綠色線代表 HTML 解析。

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

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

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

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

  • 整個(gè) document 解析完畢且 defer-script 也加載完成之后（這兩件事情的順序無(wú)關(guān)），會(huì)執(zhí)行所有由 defer-script 加載的 JavaScript 代碼，然后觸發(fā) DOMContentLoaded 事件。

defer 與相比普通 script，有兩點(diǎn)區(qū)別：

• 載入 JavaScript 文件時(shí)不阻塞 HTML 的解析，執(zhí)行階段被放到 HTML 標(biāo)簽解析完成之后；
• 在加載多個(gè)JS腳本的時(shí)候，async是無(wú)順序的加載，而defer是有順序的加載。

參考

轉(zhuǎn)載于:https://juejin.im/post/5cb69c516fb9a0687177b4a5

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。