dom樹和渲染樹有什么區別？

DOM樹是包含了所有html節點的樹,渲染樹是DOM樹和CSSOM樹組合而成的,最終渲染在頁面上的樹。DOM樹和渲染樹都是瀏覽器生成的

Dom Tree 包含了所有的HTMl標簽,包括display:none ,JS動態添加的元素等。

Dom Tree 和樣式結構體結合后構建呈現Render Tree。Render Tree 能識別樣式,解析 HTML 構建 DOM(DOM 樹)，并行請求 css/image/js

CSS 文件下載完成，開始構建 CSSOM(CSS 樹)

CSSOM 構建結束后，和 DOM 一起生成 Render Tree(渲染樹)

布局(Layout)：計算出每個節點在屏幕中的位置

顯示(Painting)：通過顯卡把頁面畫到屏幕上

DOM 樹 和 渲染樹 的區別：

DOM 樹與 HTML 標簽一一對應，包括 head 和隱藏元素

渲染樹不包括 head 和隱藏元素，大段文本的每一個行都是獨立節點，每一個節點都有對應的 css 屬性