1. script元素和頁面解析的關(guān)系
-
瀏覽器在解析HTML的過程中,遇到了script元素是不能繼續(xù)構(gòu)建DOM樹的;
首先下載JavaScript代碼,并且執(zhí)行JavaScript的腳本;
到JavaScript腳本執(zhí)行結(jié)束后,才會繼續(xù)解析HTML,構(gòu)建DOM樹;
-
因?yàn)镴avaScript的作用之一就是操作DOM,并且可以修改DOM;
如果我們等到DOM樹構(gòu)建完成并且渲染再執(zhí)行JavaScript,會造成嚴(yán)重的回流和重繪,影響頁面的性能;
所以會在遇到script元素時(shí),優(yōu)先下載和執(zhí)行JavaScript代碼,再繼續(xù)構(gòu)建DOM樹;
2. defer屬性
defer 屬性告訴瀏覽器不要等待腳本下載,而繼續(xù)解析HTML,構(gòu)建DOM Tree
是不會阻塞DOM Tree的構(gòu)建過程;
如果腳本提前下載好了,它會等待DOM Tree構(gòu)建完成,在DOMContentLoaded事件之前先執(zhí)行defer中的代碼;
多個(gè)帶defer的腳本是可以保持正確的順序執(zhí)行的。
defer可以提高頁面的性能,并且推薦放到head元素中;
注意:defer僅適用于外部腳本,對于script默認(rèn)內(nèi)容會被忽略。
3. async屬性
- 瀏覽器不會因 async 腳本而阻塞
- async腳本不能保證順序,它是獨(dú)立下載、獨(dú)立運(yùn)行,不會等待其他腳本;
4. 總結(jié)
1. defer通常用于需要在文檔解析后操作DOM的JavaScript代碼,并且對多個(gè)script文件有順序要求的;
2. async通常用于獨(dú)立的腳本,對其他腳本,甚至DOM沒有依賴的;
1