瀏覽器渲染的步驟
HTML 解析出 DOM Tree
CSS 解析出 Style Rules
兩者關(guān)聯(lián)生成 Render Tree
Layout（布局）根據(jù) Render Tree 計算每個節(jié)點的信息
Painting 根據(jù)計算好的信息進行渲染整個頁面
瀏覽器解析文檔的過程中，如果遇到 script 標簽，會立即解析腳本，停止解析文檔（因為 JS 可能會改變 DOM 和 CSS,如果繼續(xù)解析會造成浪費）。
如果是外部 script, 會等待腳本下載完成之后在繼續(xù)解析文檔。現(xiàn)在 script 標簽增加了 defer 和 async 屬性，腳本解析會將腳本中改變 DOM 和 css 的地方> 解析出來，追加到 DOM Tree 和 Style Rules 上
瀏覽器渲染的步驟
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- （注1：如果有問題歡迎留言探討，一起學習！轉(zhuǎn)載請注明出處，喜歡可以點個贊哦?。ㄗ?：更多內(nèi)容請查看我的目錄[ht...
- 目錄一、介紹二、渲染引擎三、解析與DOM樹構(gòu)建四、渲染樹構(gòu)建五、布局六、繪制七、動態(tài)變化八、渲染引擎的線程九、CS...
