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)容