原文鏈接：http:///blog/114/webcore-rendering-i-the-basics/

DOM樹

web頁面 解析 后形成節(jié)點樹，稱作文檔對象模型（簡稱DOM），樹上所有節(jié)點的基類是Node。

Node.h

節(jié)點分為幾類，與渲染代碼相關的節(jié)點類型有：

• Document - 樹的根節(jié)點總是Document，WebCore中有三個文檔類: Document, HTMLDocument和SVGDocument。Document用于除了SVG文檔之外的所有XML文檔。HTMLDocument繼承自 Document，僅適用于HTML文檔。SVGDocument也是繼承自Document，適用于SVG文檔。
Document.h
HTMLDocument.h
• Element - HTML和XML源代碼中出現(xiàn)的所有標記都是元素(elements)。從渲染的角度看，元素就是一個節(jié)點，它具有標記名并可以轉(zhuǎn)化（cast）成一個能查詢渲染所需數(shù)據(jù)的子類。
Element.h
• Text - 元素之間出現(xiàn)的原始文本(raw text)就是文本節(jié)點。Text節(jié)點存儲原始文本(raw text)，渲染樹能夠查詢節(jié)點，獲得字符串數(shù)據(jù)。
Text.h

渲染樹

渲染的核心是渲染樹。渲染樹非常類似于DOM，樹中的每個對象都對應著文檔、元素或文本節(jié)點。渲染樹也可以包含沒有對應DOM節(jié)點的對象。

所有渲染樹節(jié)點的基類是RenderObject。

RenderObject.h

DOM節(jié)點對應的RenderObject可以使用Node類的Renderer方法獲得：

RenderObject* renderer() const

下列方法通常用來遍歷渲染樹：

這里的示例展示了如何遍歷渲染對象的子節(jié)點，這是渲染代碼中最常見的遍歷方式：

創(chuàng)建渲染樹

渲染對象(renderer)通過DOM創(chuàng)建，這一過程稱為附著(attachment)。當文檔解析，DOM節(jié)點添加時，DOM節(jié)點的attach方法被調(diào)用來創(chuàng)建渲染對象(renderer)。

void attach()

attach方法獲得DOM節(jié)點的樣式信息，如果元素的display CSS屬性為none或者節(jié)點是具有display:none集合的元素的后代，將不創(chuàng)建任何渲染對象(renderer)。節(jié)點的子類和CSS display屬性值一起決定為該節(jié)點創(chuàng)建什么樣的渲染對象(renderer)。

附著(attach)是一個自頂向下的遞歸操作，父親節(jié)點總是在子孫節(jié)點之前創(chuàng)建他們對應的渲染對象(renderer)。

銷毀渲染樹

當DOM節(jié)點從文檔移除時，或者在文檔關閉時（比如標簽頁/窗口關閉時），渲染對象(renderer)被銷毀。DOM節(jié)點的detach方法被調(diào)用來斷開并銷毀渲染對象(renderer)。

void detach()

分離(detachment)是一個自底向上的遞歸操作。子孫節(jié)點總是在父親節(jié)點之前銷毀對應的渲染對象(renderer)。

存取樣式信息

附著(attachment)過程中，DOM查詢CSS獲得元素的樣式信息，結果存放在RenderStyle對象中。

RenderStyle.h

webkit所支持的每個單獨CSS屬性都可以通過該對象查詢到。RenderStyle是一個引用計數(shù)對象。如果DOM創(chuàng)建了一個渲染對象(renderer)，它通過渲染對象(renderer)的setStyle方法關聯(lián)樣式信息到渲染對象(renderer)。

void setStyle(RenderStyle*)

渲染對象(renderer)將在Style上增加一個引用，并一直維持著直到得到新的樣式或者被銷毀。

RenderStyle可以使用style()方法從渲染對象(renderer)獲得。

RenderStyle* style() const

CSS盒子模型(The CSS Box Model)

RenderObject的基本子類之一就是RenderBox，該類表示遵從CSS盒子模型的對象，它們包括具有邊框、填充(padding)、 邊距、寬度和高度的任何對象。現(xiàn)在有些對象并沒有符合CSS盒子模型（比如SVG對象）但仍然從RenderBox派生，這實際上是一個錯誤，將在以后進 行渲染樹重構時修復。

CSS 2.1規(guī)格的示意圖說明了CSS盒子的各部分，下列方法可用來獲得邊框/邊距/填充的寬度。除非是查看原始的樣式信息，否則RenderStyle不應該使用，因為最終RenderObject得到的計算值會有很大不同（特別是表格，可以覆蓋單元格的填充，單元格之間也可以有展開的邊框）

width()和height()方法獲得包括邊界在內(nèi)的盒子寬度和高度。

客戶盒子(client box)是盒子(box)除邊框和滾動條之外但包括填充在內(nèi)的區(qū)域。

內(nèi)容盒子(content box)用來表示CSS盒子除邊框和填充之外的區(qū)域。

當盒子有垂直或這水平滾動條時，它們放在填充和邊框之間，滾動條的寬度和高度包括在client寬度和client高度中。滾動條不是內(nèi)容盒子 (content box)的組成部分?？蓾L動區(qū)域的尺寸和當前滾動的位置都可以從RenderObject獲得。我將在關于滾動的另一章節(jié)詳細闡述。

盒子(box)還有x和y位置，這些位置都是相對于祖先節(jié)點的，它們負責決定盒子(box)放在何處。但存在一些例外，這也是渲染樹讓人難以理解的領域之一。