瀏覽器工作原理之樹的構建

一、dom樹的構建

dom 輸出的樹，也就是解析樹，是由dom元素及屬性節點組成的。dom是文件物件模型的縮寫，它是html文件的物件表示，作為html元素的外部介面供js等呼叫。樹的根是「document」物件。

dom和標籤基本是一一對應的關係，例如，如下的標籤：

hello dom

將會被轉換為下面的dom樹：

圖1：示例標籤對應的dom樹

和html一樣，dom的規範也是由w3c組織制定的。訪問這是使用文件的一般規範。乙個模型描述一種特定的html元素，可以在檢視html定義。

這裡所謂的樹包含了dom節點是說樹是由實現了dom介面的元素構建而成的，瀏覽器使用已被瀏覽器內部使用的其他屬性的具體實現。

二、渲染樹的構建

當dom樹構建完成時，瀏覽器開始構建另一棵樹——渲染樹。渲染樹由元素顯示序列中的可見元素組成，它是文件的視覺化表示，構建這棵樹是為了以正確的順序繪製文件內容。firefox將渲染樹中的元素稱為frames，webkit則用renderer或渲染物件來描述這些元素。

乙個渲染物件知道怎麼布局及繪製自己及它的children。renderobject是webkit的渲染物件基類，它的定義如下：

class renderobject

每個渲染物件用乙個和該節點的css盒模型相對應的矩形區域來表示，正如css2所描述的那樣，它包含諸如寬、高和位置之類的幾何資訊。盒模型的型別受該節點相關的display樣式屬性的影響（參考樣式計算章節）。下面的webkit**說明了如何根據display屬性決定某個節點建立何種型別的渲染物件。

renderobject* renderobject::createobject(node* node, renderstyle* style)
return o;
}

元素的型別也需要考慮，例如，表單控制項和**帶有特殊的框架。在webkit中，如果乙個元素想建立乙個特殊的渲染物件，它需要重寫「createrenderer」方法，使渲染物件指向不包含幾何資訊的樣式物件。