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

來自：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的順序

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

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

三、若是遇到語義解釋性的標籤嵌入文件（JS腳本，CSS樣式），那麼此時IE的下載過程會啓用單獨鏈接進行下載。

四、而且在下載後進行解析，解析過程當中，中止頁面全部往下元素的下載。阻塞加載

五、樣式表在下載完成後，將和之前下載的全部樣式表一塊兒進行解析，解析完成後，將對此前全部元素（含之前已經渲染的）從新進行渲染。

六、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樹的狀況，因此 就會阻塞其餘的下載和呈現.