瀏覽器渲染步驟

  1. HTML解析出DOM Tree

  2. Css解析出Style rules

  3. 兩者關(guān)聯(lián)生成Render Tree

  4. Layout（布局）：根據(jù)Render Tree 計(jì)算每個(gè)節(jié)點(diǎn)的信息

  5. Painting：根據(jù)計(jì)算好的信息進(jìn)行渲染整個(gè)頁(yè)面

  6. 注意：

    瀏覽器解析文檔的過(guò)程中，如果遇到 script 標(biāo)簽，會(huì)立即解析腳本，停止解析文檔（因?yàn)?JS 可能會(huì)改變 DOM 和 CSS,如果繼續(xù)解析會(huì)造成浪費(fèi)）。 如果是外部 script, 會(huì)等待腳本下載完成之后在繼續(xù)解析文檔?，F(xiàn)在 script 標(biāo)簽增加了 defer 和 async 屬性，腳本解析會(huì)將腳本中改變 DOM 和 css 的地方解析出來(lái)，追加到 DOM Tree 和 Style Rules 上。


    瀏覽器解析過(guò)程圖.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容