來自：https://blog.csdn.net/qq243541844/article/details/51922947

【瀏覽器渲染原理】 渲染樹和頁面渲染

• 我們主要討論以下列出的幾個問題：
• 什麽是渲染樹？和DOM樹及CSSOM樹有什麽關系？
• 渲染樹是如何形成的？
• 瀏覽器渲染順序問題

1.什麽是渲染樹？和DOM樹及CSSOM樹有什麽關系？

首先我們得先了解一下渲染的基本步驟
當用戶請求的資源通過瀏覽器網絡層到達渲染引擎後。渲染工作就會開始。
第一步：瀏覽器解析HTML文檔和解析CSS樣式表形成DOM樹和CSSOM樹
第二步 : 結合DOM樹和CSSDOM樹形成 render樹。 也就是我們所說的渲染樹。渲染樹
第三步： 瀏覽器在render樹內對每個render節點進行布局處理，計算出每一個元素的大小和位置。確定其在屏幕上的位置
第四步：繪制。通過遍歷render樹將實際的像素顯示到屏幕上

以上的步驟是一個漸進的步驟，但是為了提高用戶體驗，瀏覽器並不會等待所有html文檔加載完成之後才建立渲染樹並渲染。 他會在從網絡層獲取html文檔的同時把已經接收到的局部內容先渲染出來

2.渲染樹是如何形成的？
基於DOM樹的一些可視化的節點，WebKit根據需要來創建相應的RenderObject節點，這些節點也構成了一顆樹，稱為render樹。

Render樹是基於Dom樹建立起來的新的一棵樹，Render節點和Dom節點並不是一一對應。所以什麽情況下需要建立新的render節點呢？
- DOM樹document節點
- DOM樹種的可視化節點
- 某些情況下建立匿名的render節點
有一個問題就是什麽算可視化節點呢？
比如 Html,Body,Div,P等就是可視化結點， 而非可視化節點就是 Head, Meta, Script等。
比如一個DIV的display屬性是none，那麽它就是非可視節點。
但是註意. 如果DIV的visibility屬性是hidden，它是可視節點。
這是一個細節需要註意。
什麽情況下建立匿名的render節點？
RenderBlock用來是用來表示塊級元素， 為了處理上的方便，某些情況下需要建立匿名的RenderBlock對象，因為RenderBlock的子女必須都是內嵌的元素或者都是非內嵌的元素。所以，當它包含兩種元素的時候，那麽它會為相鄰的內嵌元素創建一個塊級RenderBlock節點，然後設置該節點為自己的子女並且設置這些內嵌元素為它的子女。

瀏覽器的渲染順序問題（摘抄）

1.瀏覽器加載和渲染html的順序

1、IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。

2、在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（並不是說所有相關聯的元素都已經下載完）

3、如果遇到語義解釋性的標簽嵌入文件（JS腳本，CSS樣式），那麽此時IE的下載過程會啟用單獨連接進行下載。

4、並且在下載後進行解析，解析過程中，停止頁面所有往下元素的下載。阻塞加載

5、樣式表在下載完成後，將和以前下載的所有樣式表一起進行解析，解析完成後，將對此前所有元素（含以前已經渲染的）重新進行渲染。

6、JS、CSS中如有重定義，後定義函數將覆蓋前定義函數

2. JS的加載

2.1 不能並行下載和解析（阻塞下載）

2.2 當引用了JS的時候，瀏覽器發送1個js request就會一直等待該request的返回。因為瀏覽器需要1個穩定的DOM樹結構，而JS中很有可能有代碼直接改變了DOM樹結構，比如使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉，瀏覽器為了防止出現JS修改DOM樹，需要重新構建DOM樹的情況，所以 就會阻塞其他的下載和呈現.

【瀏覽器渲染原理】 渲染樹和頁面渲染