2023-03-03 script標(biāo)簽 defer async

1. script元素和頁面解析的關(guān)系

  1. 瀏覽器在解析HTML的過程中，遇到了script元素是不能繼續(xù)構(gòu)建DOM樹的；

    • 首先下載JavaScript代碼，并且執(zhí)行JavaScript的腳本；

    • 到JavaScript腳本執(zhí)行結(jié)束后，才會繼續(xù)解析HTML，構(gòu)建DOM樹；

  2. 因?yàn)镴avaScript的作用之一就是操作DOM，并且可以修改DOM；

    • 如果我們等到DOM樹構(gòu)建完成并且渲染再執(zhí)行JavaScript，會造成嚴(yán)重的回流和重繪，影響頁面的性能；

    • 所以會在遇到script元素時(shí)，優(yōu)先下載和執(zhí)行JavaScript代碼，再繼續(xù)構(gòu)建DOM樹；

2. defer屬性

  1. defer 屬性告訴瀏覽器不要等待腳本下載，而繼續(xù)解析HTML，構(gòu)建DOM Tree

  2. 是不會阻塞DOM Tree的構(gòu)建過程；

  3. 如果腳本提前下載好了，它會等待DOM Tree構(gòu)建完成，在DOMContentLoaded事件之前先執(zhí)行defer中的代碼；

  4. 多個(gè)帶defer的腳本是可以保持正確的順序執(zhí)行的。

  5. defer可以提高頁面的性能，并且推薦放到head元素中；

注意：defer僅適用于外部腳本，對于script默認(rèn)內(nèi)容會被忽略。

3. async屬性

  1. 瀏覽器不會因 async 腳本而阻塞
  2. async腳本不能保證順序，它是獨(dú)立下載、獨(dú)立運(yùn)行，不會等待其他腳本；

4. 總結(jié)

1. defer通常用于需要在文檔解析后操作DOM的JavaScript代碼，并且對多個(gè)script文件有順序要求的；

2. async通常用于獨(dú)立的腳本，對其他腳本，甚至DOM沒有依賴的；

1

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容