Dom樹 CSS樹渲染樹(render樹) 規則、原理-有解無憂

? 前端不可不學的瀏覽器渲染機制，阿里年年問，去一個栽一個，聽說百度也在考這個，你還不準備學嗎？

首先你要了解瀏覽器渲染的順序：
? 1.構建dom 樹
? 2.構建css 樹
? 3.構建渲染樹
? 4.節點布局
? 5.頁面渲染

什么是dom 樹？

? 瀏覽器將HTML決議成樹形的資料結構，簡稱DOM，
? DOM 是檔案物件模型 (Document Object Model) 的縮寫，它是 HTML 檔案的物件表示，同時也是外部內容（例如 JavaScript）與 HTML 元素之間的介面，決議樹的根節點是Document物件，
在這里插入圖片描述

那我們就可以這樣操作 dom 樹：

<html> 
<head> 
<title>never-online'swebsite</title> 
<script> 
	functionchangedivText(strText){  
	varnodeRoot=document;//這個是根結點  
	varnodeHTML=nodeRoot.childNodes[0];//這個是html結點  
	varnodeBody=nodeHTML.childNodes[1];//body結點  
	varnodeDiv=nodeBody.childNodes[0];//DIV結點  
	varnodeText=nodeDiv.childNodes[0];//文本結點'  
	nodeText.data=strText;//文本節點有data這個屬性，  
	因此我們可以改變這個屬性，也就成功的操作了DOM樹中的一個結點了  
}  
</script> 
</head> 
<body> 
	<div>tutorialofDHTMLandjavascriptprogramming</div> 
	<input onclick="changedivText('change?')" type="button" value="change"/> 
</body> 
</html>

注：
? 1.跨域除外，跨域通常是在操作frame 上，簡單的說，就是兩個frame 不屬于同一域名，
? 2.上面的操作為了演示，采用的方法是從根結點一直到文本結點的遍歷，在DOM 方法上，有更簡潔的方法，這些以后會有更多示例加以說明，

你還可以這樣理解 dom 樹：
? 1.DOM樹揭示了DOM物件之間的層次關系，這樣就方便動態地對html檔案進行增刪改查，
? 2.增刪改查必須要遵循層次關系
? 3.文本物件是最底層的節點
? 4.獲取物件的值 .value

什么是CSS樹？

在這里插入圖片描述
? 看著有點像 less 寫法（less這種預處理語言，就是借用DOM樹的思想，來將less這種語法結構，轉譯成普通的css語法，最終我們用的還是普通的css語法構成的css檔案），

什么是渲染樹(render樹)？

? 瀏覽器在構造DOM樹的同時也在構造著另一棵樹-Render Tree,與DOM樹相對應暫且叫它Render樹，我們知道DOM樹為javascript提供了一些列的訪問介面（DOM API），但這棵樹是不對外的，它的主要作用就是把HTML按照一定的布局與樣式顯示出來，用到了CSS的相關知識，從MVC的角度來說，可以將render樹看成是V，dom樹看成是M，C則是具體的調度者，比HTMLDocumentParser等，

class RenderObject{
    virtual void layout();
    virtual void paint(PaintInfo);
    virtual void rect repaintRect();
    Node* node;  //the DOM node
    RenderStyle* style;  // the computed style
    RenderLayer* containgLayer; //the containing z-index layer
}

? 從中我們可以發現renderer包含了一個dom物件以及為其計算好的樣式規則，提供了布局以及顯示方法，具體效果圖如下：（firefox的Frames對應renderers,content對應dom）
在這里插入圖片描述
? 具體顯示的時候，每一個renderer體現了一個矩形區塊的東西，即我們常說的CSS盒子模型的概念，它本身包含了一些幾何學相關的屬性，如寬度width，高度height，位置position等，每一個renderer還有一個很重要的屬性，就是如何顯示它，display，我們知道元素的display有很多種，常見的就有none,inline,block,inline-block…，不同的display它們之間到底有啥不同呢？我們看一下代碼：

RenderObject* RenderObject::createObject(Node* node, RenderStyle* style)
{
    Document* doc = node->document();
    RenderArena* arena = doc->renderArena();
    ...
    RenderObject* o = 0;
  
    switch (style->display()) {
        case NONE:
            break;
        case INLINE:
            o = new (arena) RenderInline(node);
            break;
        case BLOCK:
            o = new (arena) RenderBlock(node);
            break;
        case INLINE_BLOCK:
            o = new (arena) RenderBlock(node);
            break;
        case LIST_ITEM:
            o = new (arena) RenderListItem(node);
            break;
       ...
    }
  
    return o;
}

? 說了這么多render樹，我們還沒見一下它的真容呢，它到底會是個什么模樣呢？我們看一下圖，
在這里插入圖片描述

? 對渲染樹的解釋我們暫且告一段落，接下來看一看瀏覽器的渲染原理：

深入淺出瀏覽器渲染原理

? 首先瀏覽器的內核是指支持瀏覽器運行的最核心的程式，分為兩個部分的，一是渲染引擎，另一個是JS引擎，渲染引擎在不同的瀏覽器中也不是都相同的，比如在 Firefox 中叫做 Gecko，在 Chrome 和 Safari 中都是基于 WebKit 開發的，
在這里插入圖片描述

瀏覽器作業大體流程

? 渲染引擎首先通過網路獲得所請求檔案的內容，通常以8K分塊的方式完成，
下面是渲染引擎在取得內容之后的基本流程：
? 1.決議html為dom樹，決議css為cssom，渲染引擎開始決議html，并將標簽轉化為內容樹中的dom節點，
? 2. 把dom和cssom結合起來生成渲染樹(render)，接著，它決議外部CSS檔案及style標簽中的樣式資訊，這些樣式資訊以及html中的可見性指令將被用來構建另一棵樹——render樹，Render樹由一些包含有顏色和大小等屬性的矩形組成，它們將被按照正確的順序顯示到螢屏上，
? 3. 布局渲染樹，計算幾何形狀，Render樹構建好了之后，將會執行布局程序，它將確定每個節點在螢屏上的確切坐標，
? 4. 把渲染樹展示到螢屏上，再下一步就是繪制，即遍歷render樹，并使用UI后端層繪制每個節點，

在這里插入圖片描述

瀏覽器要決議的三樣東西：

1.一個是HTML/SVG/XHTML，事實上，Webkit有三個C++的類對應這三類檔案，決議這三種檔案會產生一個DOM Tree，
2.CSS，決議CSS會產生CSS規則樹，
3.Javascript，腳本，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree.

構造dom 樹
在這里插入圖片描述
? 瀏覽器從磁盤或網路讀取HTML的原始位元組，并根據檔案的指定編碼（例如 UTF-8）將它們轉換成字串，
? 在網路中傳輸的內容其實都是 0 和 1 這些位元組資料，當瀏覽器接收到這些位元組資料以后，它會將這些位元組資料轉換為字串，也就是我們寫的代碼，
? 將字串轉換成Token，例如：、等，Token中會標識出當前Token是“開始標簽”或是“結束標簽”亦或是“文本”等資訊，
? 事實上，構建DOM的程序中，不是等所有Token都轉換完成后再去生成節點物件，而是一邊生成Token一邊消耗Token來生成節點物件，換句話說，每個Token被生成后，會立刻消耗這個Token創建出節點物件，注意：帶有結束標簽標識的Token不會創建節點物件，

比如：

<html>
<head>
    <title>Web page parsing</title>
</head>
<body>
    <div>
        <h1>Web page parsing</h1>
        <p>This is an example Web page.</p>
    </div>
</body>
</html>

在這里插入圖片描述

構建CSSOM

? DOM會捕獲頁面的內容，但瀏覽器還需要知道頁面如何展示，所以需要構建CSSOM，

? 構建CSSOM的程序與構建DOM的程序非常相似，當瀏覽器接收到一段CSS，瀏覽器首先要做的是識別出Token，然后構建節點并生成CSSOM，

? 在這一程序中，瀏覽器會確定下每一個節點的樣式到底是什么，并且這一程序其實是很消耗資源的，因為樣式你可以自行設定給某個節點，也可以通過繼承獲得，在這一程序中，瀏覽器得遞回 CSSOM 樹，然后確定具體的元素到底是什么樣式，

? 注意：CSS匹配HTML元素是一個相當復雜和有性能問題的事情，所以，DOM樹要小，CSS盡量用id和class，千萬不要過渡層疊下去，

構建渲染樹

? 當我們生成 DOM 樹和 CSSOM 樹以后，就需要將這兩棵樹組合為渲染樹，
在這里插入圖片描述
值得注意的是：
? 關鍵的點在于上述的4個程序并不是以嚴格順序執行的，渲染引擎會以最快的速度展示內容，所以第二階段不會等到第一階段結束才開始，而是在第一階段有輸出的時候就開始執行，其它階段也是如此，由于瀏覽器會嘗試盡快展示內容，所以內容有時會在樣式還沒有加載的時候展示出來，

? 這就是經常發生的FOCU(flash of unstyled content)或白屏問題，

布局與繪制

? 當瀏覽器生成渲染樹以后，就會根據渲染樹來進行布局（也可以叫做回流），這一階段瀏覽器要做的事情是要弄清楚各個節點在頁面中的確切位置和大小，通常這一行為也被稱為“自動重排”，

? 布局流程的輸出是一個“盒模型”，它會精確地捕獲每個元素在視口內的確切位置和尺寸，所有相對測量值都將轉換為螢屏上的絕對像素，

? 布局完成后，瀏覽器會立即發出“Paint Setup”和“Paint”事件，將渲染樹轉換成螢屏上的像素，

WebKit 主流程示意：
在這里插入圖片描述

Mozilla 的 Gecko 呈現引擎主流程：
在這里插入圖片描述

? 從上圖我們可以看出，雖然 WebKit 和 Gecko 使用的術語略有不同，但整體流程是基本相同的，Gecko 將視覺格式化元素組成的樹稱為“框架樹”，每個元素都是一個框架，WebKit 使用的術語是“呈現樹”，它由“呈現物件”組成，對于元素的放置，WebKit 使用的術語是“布局”，而 Gecko 稱之為“重排”，對于連接 DOM 節點和可視化資訊從而創建呈現樹的程序，WebKit 使用的術語是“附加”，有一個細微的非語意差別，就是 Gecko 在 HTML 與 DOM 樹之間還有一個稱為“內容模塊（Content Model）”的層，用于生成 DOM 元素，

渲染程序中遇到JS檔案怎么處理？

? JavaScript的加載、決議與執行會阻塞DOM的構建，也就是說，在構建DOM時，HTML決議器若遇到了JavaScript，那么它會暫停構建DOM，將控制權移交給JavaScript引擎，等JavaScript引擎運行完畢，瀏覽器再從中斷的地方恢復DOM構建，

? 也就是說，如果你想首屏渲染的越快，就越不應該在首屏就加載 JS 檔案，這也是都建議將 script 標簽放在 body 標簽底部的原因，當然在當下，并不是說 script 標簽必須放在底部，因為你可以給 script 標簽添加 defer 或者 async 屬性（下文會介紹這兩者的區別），

? JS檔案不只是阻塞DOM的構建，它會導致CSSOM也阻塞DOM的構建，

? 原本DOM和CSSOM的構建是互不影響，井水不犯河水，但是一旦引入了JavaScript，CSSOM也開始阻塞DOM的構建，只有CSSOM構建完畢后，DOM再恢復DOM構建，

? 這是什么情況？

? 這是因為JavaScript不只是可以改DOM，它還可以更改樣式，也就是它可以更改CSSOM，前面我們介紹，不完整的CSSOM是無法使用的，但JavaScript中想訪問CSSOM并更改它，那么在執行JavaScript時，必須要能拿到完整的CSSOM，所以就導致了一個現象，如果瀏覽器尚未完成CSSOM的下載和構建，而我們卻想在此時運行腳本，那么瀏覽器將延遲腳本執行和DOM構建，直至其完成CSSOM的下載和構建，也就是說，在這種情況下，瀏覽器會先下載和構建CSSOM，然后再執行JavaScript，最后在繼續構建DOM，

你真的了解回流和重繪嗎?

在這里插入圖片描述

重繪：
? 當元素屬性發生改變且不影響布局時（背景顏色、透明度、字體樣式等），產生重繪，相當于不重繪頁面，動態更新內容，
回流：
? 當元素屬性發生改變且影響布局時（寬度、高度、內外邊距等），產生回流，相當于重繪頁面，

重繪不一定引起回流，回流必將引起重繪

如何減少回流和重繪？

? 1.使用 transform 替代 top
? 2.使用 visibility 替換 display: none ，因為前者只會引起重繪，后者會引發回流（改變了布局）
? 3.不要使用 table 布局，可能很小的一個小改動會造成整個 table 的重新布局
? 4.影片實作的速度的選擇，影片速度越快，回流次數越多，也可以選擇使用requestAnimationFrame
? 5.CSS 選擇符從右往左匹配查找，避免節點層級過多
? 6.將頻繁重繪或者回流的節點設定為圖層，圖層能夠阻止該節點的渲染行為影響別的節點，比如對于 video 標簽來說，瀏覽器會自動將該節點變為圖層，

推薦閱讀：
5分鐘學會 vue 路由守衛
10分鐘搞懂 vuex
vue 組件設計原則
淺談hooks
月入過萬的都看它
Tree Shaking 概念詳解
深入解讀 vue 修飾符 sync

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/169399.html

標籤：其他

上一篇：「查漏補缺」Vue2.0 原始碼重寫『資料劫持』【面試必備】

下一篇：「零基礎學PHP-2」陣列和物件的定義、創建、使用、洗掉

Dom樹 CSS樹 渲染樹(render樹) 規則、原理

Dom樹 CSS樹渲染樹(render樹) 規則、原理