瀏覽器渲染機制

DOM:Document Object Model,瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu),簡稱DOM。CSSOM:CSS Object Model,瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu),簡稱CSSOM。Render Tree: DOM和CSSOM合并后生成Render Tree,如下圖:

image.png

Layout: 計算出Render Tree每個節(jié)點的具體位置。Painting:通過顯卡,將Layout后的節(jié)點內(nèi)容分別呈現(xiàn)到屏幕上。

最后編輯于
?著作權(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ù)。

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

  • 瀏覽器指的是Chrome系瀏覽器【Firefox大同小異,IE未知】以下提到的“節(jié)點”、“標簽”和“元素”不做區(qū)分...
    Yieiy閱讀 4,229評論 4 26
  • 大體分為以下步驟:1.解析HTML標簽,構(gòu)建DOM樹。2.解析CSS標簽,構(gòu)建CSSOM樹。3.把DOM和CSSO...
    饑人谷_張樂閱讀 392評論 0 1
  • 首先需要提到幾個基本概念:DOM:Document Object Model,瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)...
    clark124閱讀 320評論 0 1
  • 眾所周知,瀏覽器是世界上用途最廣泛的軟件了,它們展現(xiàn)著網(wǎng)絡(luò)資源,但達成這個目標的過程是復雜并且遵循著很多不同的標準...
    Ghj_小樹閱讀 813評論 0 0
  • 參考鏈接:瀏覽器渲染的那些事(一)瀏覽器內(nèi)部工作原理瀏覽器的渲染原理簡介有關(guān)網(wǎng)頁渲染,每個前端開發(fā)者都該知道的那點...
    恰皮閱讀 595評論 3 1

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