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

DOM樹

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

Node.h

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

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

渲染樹

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

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

RenderObject.h

DOM節(jié)點(diǎn)對(duì)應(yīng)的RenderObject可以使用Node類的Renderer方法獲得：

RenderObject* renderer() const

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

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

創(chuàng)建渲染樹

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

void attach()

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

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

銷毀渲染樹

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

void detach()

分離(detachment)是一個(gè)自底向上的遞歸操作。子孫節(jié)點(diǎn)總是在父親節(jié)點(diǎn)之前銷毀對(duì)應(yīng)的渲染對(duì)象(renderer)。

存取樣式信息

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

RenderStyle.h

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

void setStyle(RenderStyle*)

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

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

RenderStyle* style() const

CSS盒子模型(The CSS Box Model)

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

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

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

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

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

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

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