瀏覽器渲染的那些事（二）

MadPecker 發布于2019-08-30 13:02 / 1852人閱讀

摘要：接上一篇瀏覽器渲染的那些事一繼續說。哈希表的選擇器各不相同，包括，標記名稱等。例如，如果選擇器是，就把規則放入的哈希表中還有一種通用哈希表，適合不屬于上述類別的規則。

接上一篇瀏覽器渲染的那些事（一）繼續說。

構建呈現樹 Render Tree/Frame Tree 渲染的流程：

在這部分我們來講一下構建Render Tree的過程。
呈現樹主要是負責布局并將自身及其子元素繪制出來。
Webkits RenderObject類是所有呈現器的基類。定義如下：

class RenderObject{
    virtual void layout();
    virtual void paint(PaintInfo);
    virtual void rect repeatRect();
    Node* node; //DOM node
    RenderStyle* style; //the computed style
    RenderLayer* containgLayer; //the 
}

每個呈現器都代表了一個矩形區域，一般對應于相關節點的css框，包含寬度、高度、位置等幾何信息。
不過對于一些具有復雜結構的元素，就對應了幾個可見對象，這就不是一個矩形能表現出來的了。例如select元素【對應一個顯示區域，一個下拉列表以及一個按鈕】。
不規范的html也會產生多個渲染對象。【css規范中，一個行內元素只能僅包含行內元素或僅包含塊狀元素，在存在混合內容時，將會創建匿名的塊狀渲染對象包裹住行內元素。】

呈現樹與DOM樹關系

呈現樹與DOM元素相對應，但不是一一對應。
非可視化的DOM元素就不會插入呈現樹，例如head元素。
display為"none"的元素也不會顯示在呈現樹中【visibility:hidden的元素仍會顯示】

除此之外，一些渲染對象和其對應的DOM節點不是在樹上的位置也有所不同。
例如浮動元素和絕對定位元素在文本流之外，那么呈現樹會標識出真實的結構，并用一個占位結構標識出它們原先的位置。

webkit代碼中說明了如何根據display屬性決定某個節點創建什么對象的渲染對象。

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

樣式處理

構建呈現樹的時候，需要計算每一個呈現對象的可視化屬性，也就是計算每個元素的樣式屬性來完成。這部分比較繁瑣。有的部分是我自己翻譯理解的【如果有誤請指出，謝謝】

樣式計算的復雜性
樣式計算是個復雜的工程，首先存儲了無數的樣式屬性，可能會造成內存問題；如果沒有進行優化，那么為每個元素查找匹配的規則都需要遍歷一遍規則列表，而且選擇器的結構可能會造成走錯匹配路徑。除此之外，應用規則也有復雜的層疊規則。【!important需要創建一個額外的規則對象 CSSImportantRule】

webkit內核瀏覽器的處理方案
webkit有樣式對象，直接把這個style對象存在對應的DOM結點上。因此會對匹配的聲明遍歷4次，首先應用非重要高優先級的屬性，其次是高優先級重要規則，然后是普通優先級非重要規則，最后是普通優先級重要規則。多次出現的屬性會根據正確的層疊順序進行解析，最后出現的最終生效。

firefox的處理方案
firefox采用了規則樹和樣式上下文樹來簡化樣式計算。

規則樹包含了所有已經知道規則匹配的路徑。

在計算某個特定元素的樣式上下文時，先計算規則樹中的對應路徑，或使用現有路徑，從路徑中最高優先級的底層節點開始，向上遍歷規則樹，直到在新的樣式上下文中結構填充完成。也就是css優先級。（在之前寫的css選擇器中有講到。）【規則樹只有當某個節點樣式需要計算時，才會添加新的計算路徑。不會在開始時候就為所有節點進行計算】。

如果沒有滿足這個元素的樣式，對于inherit的屬性就會使用initial value【例如"font-size","color"】，對于reset類型的屬性就使用默認值【例如"border","background"】

css rule processor處理方式

css rule processor會將所有規則按照級聯順序排序，然后放入RuleHash。哈希表的選擇器各不相同，包括ID,class，標記名稱等。【例如，如果選擇器是ID，就把規則放入ID的哈希表中】還有一種通用哈希表，適合不屬于上述類別的規則。匹配樣式時，就在RuleHash"s table查找，然后合并已經保存的樣式列表，然后SelectorMatchesTree 會去找真正匹配的那個選擇器。

【查找id和class的速度比屬性選擇器快得多！】

對于偽元素，是保存在一個元素hash內，所以查找偽元素只需要查找一個哈希表。
有點難理解，看個栗子【來自MDN】。

//HTML代碼

   A few quotes
   
       Franklin said that 
       "A penny saved is a penny earned."
   
   
       FDR said 
       "We have nothing tofear but 
           fear itself."

//css樣式如下
/ rule 1 / doc { display: block; text-indent: 1em; }

/* rule 2 */ title { display: block; font-size: 3em; }
/* rule 3 */ para { display: block; }
/* rule 4 */ [class="emph"] { font-style: italic; }

Rule tree規則樹如下：

Style context tree樣式上下文樹如下：

4.匹配規則順序
前面有說到樣式對象的屬性，如果定義有多個，那么就需要通過層疊順序來決定最終的顯示效果。

層疊順序優先級由高到低：
用戶重要聲明>作者重要聲明>作者普通聲明>用戶普通聲明>瀏覽器聲明

選擇器的優先級呢，可以看我之前寫的css選擇器總結

規則排序
匹配段規則會根據級聯順序進行排序。webkit對于較小列表使用冒泡排序，對于較大的列表使用歸并排序。

參考文獻：

瀏覽器內部工作原理

瀏覽器的渲染原理簡介

How browsers work

有關網頁渲染，每個前端開發者都該知道的那點事

前端文摘：深入解析瀏覽器的幕后工作原理

MDN:Style System Overview

高性能計算云服務器那些事 webrtc支持那些瀏覽器 jsp 瀏覽器渲染那些奇怪的錯誤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115262.html

瀏覽器渲染的那些事（二）

摘要：接上一篇瀏覽器渲染的那些事一繼續說。哈希表的選擇器各不相同，包括，標記名稱等。例如，如果選擇器是，就把規則放入的哈希表中還有一種通用哈希表，適合不屬于上述類別的規則。接上一篇瀏覽器渲染的那些事（一）繼續說。構建呈現樹 Render Tree/Frame Tree 渲染的流程：在這部分我們來講一下構建Render Tree的過程。呈現樹主要是負責布局并將自身及其子元素繪制出來。We...

沈建明 2019-08-02 15:55 評論0 收藏0
瀏覽器渲染的那些事（二）

摘要：接上一篇瀏覽器渲染的那些事一繼續說。哈希表的選擇器各不相同，包括，標記名稱等。例如，如果選擇器是，就把規則放入的哈希表中還有一種通用哈希表，適合不屬于上述類別的規則。接上一篇瀏覽器渲染的那些事（一）繼續說。構建呈現樹 Render Tree/Frame Tree 渲染的流程：在這部分我們來講一下構建Render Tree的過程。呈現樹主要是負責布局并將自身及其子元素繪制出來。We...

Crazy_Coder 2019-08-19 18:23 評論0 收藏0
JS異步那些事五（異步腳本加載）

摘要：遵循的是異步模塊定義規范，遵循的是通用模塊定義規范。不同的腳本加載這個模塊，得到的都是同一個實例。關于異步那些事就寫到這里了，很多地方理解的不夠深刻希望大家多多指教。 JS異步那些事一（基礎知識）JS異步那些事二（分布式事件）JS異步那些事三（Promise）JS異步那些事四（HTML 5 Web Workers）JS異步那些事五（異步腳本加載）異步腳本加載阻塞性...

terasum 2019-08-21 13:50 評論0 收藏0
前端計劃——JavaScript中關于setTimeout的那些事

摘要：需要注意的是，及更早的瀏覽器不支持第一種語法中向延遲函數傳遞額外參數的功能。如果在不改變遞歸模式的前提下修善這段代碼解決方案加入定時器題目四考察和系列解釋立即的對象，是在本輪事件循環的結束時，而不是在下一輪事件循環的開始時。前言：setTimeout是JavaScript中常見的一個window對象方法，本文將介紹關于它的一些基礎知識和易出錯的地方。 1、基礎知識作用：setTim...

sihai 2019-08-20 17:16 評論0 收藏0
瀏覽器渲染那些事之 Reflow、Repaint

摘要：原文鏈接瀏覽器渲染那些事之瀏覽器內核渲染引擎在各個瀏覽器廠商你追我趕的形勢下，截止今日，產生了很多不同的瀏覽器，各個瀏覽器本質大同小異，核心部分基本相似，由渲染引擎和引擎組成。原文鏈接瀏覽器渲染那些事之 Reflow、Repaint 瀏覽器內核（渲染引擎）在各個瀏覽器廠商你追我趕的形勢下，截止今日，產生了很多不同的瀏覽器，各個瀏覽器本質大同小異，核心部分基本相似，由渲染引擎和 J...

morgan 2019-08-29 12:19 評論0 收藏0