畢竟標準歸標準，要高效的實現這些標準，不同的實現肯定有其不同的實現方式，就像不同的Web服務器對HTTP協議標準的實現有所不同一樣，當然不同的實現也會增加一些自身特有的屬性。
下面我們從數據結構的角度來了解WebKit中爲實現網頁佈局所設計的主要類結構及其主要方法。
一、Render樹的構成
在我們編寫網頁及使用JS的時候，大概都知道DOM樹及其主要構成，瞭解到DOM樹的構建其實質是對一個html或xml文件的內容採取樹結構的方式來組織及描述，不同的標籤及其在文檔中的位置決定了其在整顆DOM樹的地位及屬性，針對具體DOM樹的構成及不同樹節點的描述，可以參考有關DOM的相關標準等，以後有機會我們也會單獨來了解。
也許對於Render樹大家就不那麼瞭解了，簡單的說來，它是對DOM樹更進一步的描述，其描述的內容主要與佈局渲染等CSS相關屬性如left、top、width、height、color、font等有關，因爲不同的DOM樹結點可能會有不同的佈局渲染屬性，甚至佈局時會按照標準動態生成一些匿名節點，所以爲了更加方便的描述佈局及渲染，WebKit內核又生成一顆Render樹來描述DOM樹的佈局渲染等特性，當然DOM樹與Render樹不是一一對應，但可以相互關聯，下面分別描述其主要節點：
1、基類RenderObject
RenderObject作爲所有Render樹節點的基類，完全類似與DOM樹中的Node基類，它是構成Render樹的基礎，作用非比尋常，其中包含了構成Render樹所可能涉及到的一些基本屬性及方法，內容相當多，其主要數據成員及方法分別如下：
RenderObject主要數據成員
圖一
其中成員m_parent、m_previous、m_next爲構建Render樹設置好關聯基礎；
m_Node則爲DOM樹中對應的節點；
m_style成員則描述該節點對應的各種CSS基本屬性數據，下面會單獨介紹；
至於其他的諸如m_positioned、m_isText、m_inline、m_floating、m_replaced等則描述其特性，就像CSS標準對不同元素的屬性分類定義一樣，從字面上我們就可以從上一節WebKit網頁佈局實現之基本概念及標準篇中可以找到它們這麼定義的蹤影。
成員m_needsPositionedMovementLayout、m_normalChildNeedsLayout、m_posChildNeedsLayout、m_needsLayout等主要用來描述該RenderObject是否確實需要重新佈局；
當一個新的RenderObject對象插入到Render樹的時候，它會設置其m_needsLayout屬性爲true，同時會根據該RenderObject對象在祖先RenderObject看來是一個positioned(擁有positiong:absolute或fixed屬性)狀態的孩子，如是則將相應祖先RenderObject對象的屬性m_posChildNeedsLayout設置爲true;
如果是一個in-flow(positon:static或relative)狀態的孩子，則將相應祖先RenderObject對象的屬性m_normalChildNeedsLayout設置爲true;
主要方法：
//與是否需要layout相關
bool needsLayout() const { return m_needsLayout || m_normalChildNeedsLayout ||m_posChildNeedsLayout; }
bool selfNeedsLayout() const { return m_needsLayout; }
bool posChildNeedsLayout() const { return m_posChildNeedsLayout; }
bool normalChildNeedsLayout() const { return m_normalChildNeedsLayout; }
//與基本屬性相關
bool isFloating() const { return m_floating; }
bool isPositioned() const { return m_positioned; } // absolute or fixed positioning
bool isRelPositioned() const { return m_relPositioned; } // relative positioning
bool isText() const { return m_isText; }
bool isInline() const { return m_inline; } // inline object
bool isCompact() const { return style()->display() == COMPACT; } // compact object
bool isRunIn() const { return style()->display() == RUN_IN; } // run-in object
bool isDragging() const { return m_isDragging; }
bool isReplaced() const { return m_replaced; } // a "replaced" element (see CSS)
//與外部DOM關聯相關
RenderView* view() const;
// don't even think about making this method virtual!
Node* element() const { return m_isAnonymous ? 0 : m_node; }
Document* document() const { return m_node->document(); }
void setNode(Node* node) { m_node = node; }
Node* node() const { return m_node; }
// RenderObject tree manipulation
//////////////////////////////////////////
virtual bool canHaveChildren() const;
virtual bool isChildAllowed(RenderObject*, RenderStyle*) const { return true; }
virtual void addChild(RenderObject* newChild, RenderObject* beforeChild = 0);
virtual void removeChild(RenderObject*);
virtual bool createsAnonymousWrapper() const { return false; }
// raw tree manipulation
virtual RenderObject* removeChildNode(RenderObject*, bool fullRemove = true);
virtual void appendChildNode(RenderObject*, bool fullAppend = true);
virtual void insertChildNode(RenderObject* child, RenderObject* before, bool fullInsert = true);
// Designed for speed. Don't waste time doing a bunch of work like layer updating and repainting when we know that our
// change in parentage is not going to affect anything.
virtual void moveChildNode(RenderObject*);
virtual void paint(PaintInfo&, int tx, int ty);
/*
* This function should cause the Element to calculate its
* width and height and the layout of its content
*
* when the Element calls setNeedsLayout(false), layout() is no
* longer called during relayouts, as long as there is no
* style sheet change. When that occurs, m_needsLayout will be
* set to true and the Element receives layout() calls
* again.
*/
virtual void layout() = 0;
其中很多方法如paint()、layout()等是虛擬的，不同的子類可以重載它；
其中方法container() 、containingBlock()、paint()、layout()很值得大家深入研究；
總的說來RenderObject基類定義一些通用屬性、方法，以便維護、佈局、渲染Render樹。
2、子類RenderBox
RenderBox代表描述CSS標準中的Box Model，它繼承自RenderObject;
m_style成員則描述該節點對應的各種CSS基本屬性數據，下面會單獨介紹；
至於其他的諸如m_positioned、m_isText、m_inline、m_floating、m_replaced等則描述其特性，就像CSS標準對不同元素的屬性分類定義一樣，從字面上我們就可以從上一節WebKit網頁佈局實現之基本概念及標準篇中可以找到它們這麼定義的蹤影。
成員m_needsPositionedMovementLayout、m_normalChildNeedsLayout、m_posChildNeedsLayout、m_needsLayout等主要用來描述該RenderObject是否確實需要重新佈局；
當一個新的RenderObject對象插入到Render樹的時候，它會設置其m_needsLayout屬性爲true，同時會根據該RenderObject對象在祖先RenderObject看來是一個positioned(擁有positiong:absolute或fixed屬性)狀態的孩子，如是則將相應祖先RenderObject對象的屬性m_posChildNeedsLayout設置爲true;
如果是一個in-flow(positon:static或relative)狀態的孩子，則將相應祖先RenderObject對象的屬性m_normalChildNeedsLayout設置爲true;
主要方法：
//與是否需要layout相關
bool needsLayout() const { return m_needsLayout || m_normalChildNeedsLayout ||m_posChildNeedsLayout; }
bool selfNeedsLayout() const { return m_needsLayout; }
bool posChildNeedsLayout() const { return m_posChildNeedsLayout; }
bool normalChildNeedsLayout() const { return m_normalChildNeedsLayout; }
//與基本屬性相關
bool isFloating() const { return m_floating; }
bool isPositioned() const { return m_positioned; } // absolute or fixed positioning
bool isRelPositioned() const { return m_relPositioned; } // relative positioning
bool isText() const { return m_isText; }
bool isInline() const { return m_inline; } // inline object
bool isCompact() const { return style()->display() == COMPACT; } // compact object
bool isRunIn() const { return style()->display() == RUN_IN; } // run-in object
bool isDragging() const { return m_isDragging; }
bool isReplaced() const { return m_replaced; } // a "replaced" element (see CSS)
//與外部DOM關聯相關
RenderView* view() const;
// don't even think about making this method virtual!
Node* element() const { return m_isAnonymous ? 0 : m_node; }
Document* document() const { return m_node->document(); }
void setNode(Node* node) { m_node = node; }
Node* node() const { return m_node; }
// RenderObject tree manipulation
//////////////////////////////////////////
virtual bool canHaveChildren() const;
virtual bool isChildAllowed(RenderObject*, RenderStyle*) const { return true; }
virtual void addChild(RenderObject* newChild, RenderObject* beforeChild = 0);
virtual void removeChild(RenderObject*);
virtual bool createsAnonymousWrapper() const { return false; }
// raw tree manipulation
virtual RenderObject* removeChildNode(RenderObject*, bool fullRemove = true);
virtual void appendChildNode(RenderObject*, bool fullAppend = true);
virtual void insertChildNode(RenderObject* child, RenderObject* before, bool fullInsert = true);
// Designed for speed. Don't waste time doing a bunch of work like layer updating and repainting when we know that our
// change in parentage is not going to affect anything.
virtual void moveChildNode(RenderObject*);
virtual void paint(PaintInfo&, int tx, int ty);
/*
* This function should cause the Element to calculate its
* width and height and the layout of its content
*
* when the Element calls setNeedsLayout(false), layout() is no
* longer called during relayouts, as long as there is no
* style sheet change. When that occurs, m_needsLayout will be
* set to true and the Element receives layout() calls
* again.
*/
virtual void layout() = 0;
其中很多方法如paint()、layout()等是虛擬的，不同的子類可以重載它；
其中方法container() 、containingBlock()、paint()、layout()很值得大家深入研究；
總的說來RenderObject基類定義一些通用屬性、方法，以便維護、佈局、渲染Render樹。
2、子類RenderBox
RenderBox代表描述CSS標準中的Box Model，它繼承自RenderObject;
RenderBox主要數據成員
圖二
其主要重載了部分繼承而來的方法。
3、子類RenderContainer
在新的 WebKit 中，不再存在。
4、子類RenderFlow
RenderFlow主要用來描述CSS標準中提到的能進行inline-flow、block-flow相關處理的Render樹結點，它繼承自RenderContainer；
RenderFlow主要數據成員
圖四
其主要方法包括在flow的過程中創建、關聯匿名對象等；5、子類RenderBlock
RenderBlock代表CSS標準中的block-level元素，它繼承自RenderFlow；
RenderBlock主要數據成員
圖五
它維護了一組由它定位的positioned樹節點，以及有關overflow方面的設置；
其主要重載了RenderObject繼承下來的layout、paint等方法；
因爲html中的body、div、p等標籤對應RenderBlock類對象，其在Render樹具有非常重要的地位，其layout、paint等方法的實現，往往是WebKit整個佈局、渲染處理的發起中心，內容比較多並且複雜，以後有機會詳解。
RenderInline代表inline-level元素，其繼承自RenderFlow，主要重載了RenderObject關於inline-flow方面處理的方法，提供了splitFlow、splitInlines等處理自動換行的方法。
7、子類RenderText
RenderText代表對html中Text node對應的Render樹節點，它直接繼承自RenderObject；
RenderText主要數據成員
圖六
它提供關於處理文字方面如顯示文字、行高計算、整個Text node對應的寬度等；它沒有重載layout方法，因爲它自身的定位往往由RenderBlock、RenderInline父對象來處理；
8、子類RenderImage
RenderImage代表html中img標籤對應的樹節點，它繼承自RenderBox；
RenderImage繼承關係及主要數據成員
圖七
其主要提供關於圖片顯示、大小設置等方面的處理，其中paintReplaced方法將其圖片顯示出來；
9、子類RenderView
RenderView對應整個html文檔對象的樹節點，可看成是Render樹的根，它繼承自RenderBlock；
RenderView主要數據成員
圖八
其中m_frameview成員對應整個文檔對應的FrameView，而m_widgets則包括了該文檔可能包含的plugin插件等對應的Render樹節點；
RenderView對象作爲Render樹的根，它往往隨着Document對象的創建而創建，它的layout、paint方法的發起往往是整顆Render樹佈局、渲染處理的開始；其中也包含了對選擇處理。
10、其他
整個Render樹中涉及的樹節點類型，還有很多如RenderButton、RenderTable、RenderMedia等；並且各個類的方法及數據成員非常多，這裏只是初步列出主要的類及其主要方法，特別是可能涉及到佈局、渲染方方面的方法，以便我們能從中大致WebKit佈局、渲染所涉及的基本內容及方法。
二、CSS屬性的描述
1、RenderStyle類
RenderObject對象的m_style成員爲RenderStyle類對象，它往往用來描述一個RenderObject所可能涉及的CSS屬性數據(如left、top、align、color、font等等)，其數據成員往往對應於CSS中定義的所有屬性項，內容非常的龐雜，簡單的說來就是將CSS標準中的所有屬性按照一定分類定義到一個數據結構中。
2、RenderStyle類主要方法
爲了獲取、設置CSS屬性所對應的值，RenderStyle類提供了所有的獲取、設置CSS屬性的方法如：
void setDisplay(EDisplay v) { noninherited_flags._effectiveDisplay = v; }
void setOriginalDisplay(EDisplay v) { noninherited_flags._originalDisplay = v; }
void setPosition(EPosition v) { noninherited_flags._position = v; }
void setFloating(EFloat v) { noninherited_flags._floating = v; }
void setLeft(Length v) { SET_VAR(surround,offset.left,v) }
void setRight(Length v) { SET_VAR(surround,offset.right,v) }
void setTop(Length v) { SET_VAR(surround,offset.top,v) }
void setBottom(Length v){ SET_VAR(surround,offset.bottom,v) }
void setWidth(Length v) { SET_VAR(box,width,v) }
void setHeight(Length v) { SET_VAR(box,height,v) }
等等。。。。
三、RenderObject及子類對象的生成
1、CSSParser
CSSParser類顧名思義，主要用來解析文本中各種CSS屬性，並且有效的組織在一個RenderStyle對象中。
其主要方法parseValue、applyProperty的部分代碼示例如下：
bool CSSParser::parseValue(int propId, bool important)
{
.....................................................
case CSSPropertyFloat:
// left | right | none | inherit + center for buggy CSS
if (id == CSSValueLeft || id == CSSValueRight ||
id == CSSValueNone || id == CSSValueCenter)
valid_primitive = true;
break;
case CSSPropertyClear: // none | left | right | both | inherit
if (id == CSSValueNone || id == CSSValueLeft ||
id == CSSValueRight|| id == CSSValueBoth)
valid_primitive = true;
break;
case CSSPropertyWebkitBoxAlign:
if (id == CSSValueStretch || id == CSSValueStart || id == CSSValueEnd ||
id == CSSValueCenter || id == CSSValueBaseline)
valid_primitive = true;
break;
.....................................................
case CSSPropertyWebkitBoxPack:
if (id == CSSValueStart || id == CSSValueEnd ||
id == CSSValueCenter || id == CSSValueJustify)
valid_primitive = true;
break;
....................................................
}
void CSSStyleSelector::applyProperty(int id, CSSValue *value)
{
case CSSPropertyOpacity:
HANDLE_INHERIT_AND_INITIAL(opacity, Opacity)
if (!primitiveValue || primitiveValue->primitiveType() != CSSPrimitiveValue::CSS_NUMBER)
return; // Error case.
// Clamp opacity to the range 0-1
m_style->setOpacity(min(1.0f, max(0.0f, primitiveValue->getFloatValue())));
return;
case CSSPropertyWebkitBoxAlign:
{
HANDLE_INHERIT_AND_INITIAL(boxAlign, BoxAlign)
if (!primitiveValue)
return;
EBoxAlignment boxAlignment = *primitiveValue;
if (boxAlignment != BJUSTIFY)
m_style->setBoxAlign(boxAlignment);
return;
}
...................................................
}
2、CSSStyleSelector類
CSSStyleSelector類其作用是基於所有用戶的stylesheets集合爲一個給定的DOM Element創建出其對應的RenderStyle對象。其主要功能由方法RenderStyle* styleForElement(Element*, RenderStyle* parentstyle=0, bool allowSharing = true, bool resolveForRootDefault = false);來實現。
3、構建Render樹
在構建DOM樹的過程中，Dom Element對象創建完後，往往通過attach方法來創建RenderObject對象，進而構建Render樹。
其基本實現流程如下：void Element::attach()=>createRendererIfNeeded()=>createRenderer；
RenderObject* Element::createRenderer(RenderArena* arena, RenderStyle* style)
{
if (document()->documentElement() == this && style->display() == NONE) {
// Ignore display: none on root elements. Force a display of block in that case.
RenderBlock* result = new (arena) RenderBlock(this);
if (result)
result->setAnimatableStyle(style);
return result;
}
return RenderObject::createObject(this, style);
}
RenderObject* RenderObject::createObject(Node* node, RenderStyle* style)
{
Document* doc = node->document();
RenderArena* arena = doc->renderArena();
const ContentData* contentData = style->contentData();
if (contentData && !contentData->m_next && contentData->m_type == CONTENT_OBJECT && doc != node) {
RenderImageGeneratedContent* image = new (arena) RenderImageGeneratedContent(node);
image->setStyle(style);
if (StyleImage* styleImage = contentData->m_content.m_image)
image->setStyleImage(styleImage);
return image;
}
RenderObject* o = 0;
switch (style->display()) {//往往在CSSStyleSelector::styleForElement或CSSStyleSelector::adjustRenderStyle時//調用setDisplay()以確定其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;
case RUN_IN:
case COMPACT:
o = new (arena) RenderBlock(node);
break;
case TABLE:
case INLINE_TABLE:
o = new (arena) RenderTable(node);
break;
case TABLE_ROW_GROUP:
case TABLE_HEADER_GROUP:
case TABLE_FOOTER_GROUP:
o = new (arena) RenderTableSection(node);
break;
case TABLE_ROW:
o = new (arena) RenderTableRow(node);
break;
case TABLE_COLUMN_GROUP:
case TABLE_COLUMN:
o = new (arena) RenderTableCol(node);
break;
case TABLE_CELL:
o = new (arena) RenderTableCell(node);
break;
case TABLE_CAPTION:
o = new (arena) RenderBlock(node);
break;
case BOX:
case INLINE_BOX:
o = new (arena) RenderFlexibleBox(node);
break;
}
return o;
}
這樣就不同的DOM樹節點結合不同的顯示屬性，創建出不同的RenderObject子類對象，進而形成一個Render樹。
四、總結
其實WebKit涉及網頁佈局方面的數據結構遠不止這些，其中有的也比較複雜，這裏只是列出自己認爲較爲重要的一小部分，希望能對了解WebKit的網頁佈局渲染有一定的基礎性作用
整個Render樹中涉及的樹節點類型，還有很多如RenderButton、RenderTable、RenderMedia等；並且各個類的方法及數據成員非常多，這裏只是初步列出主要的類及其主要方法，特別是可能涉及到佈局、渲染方方面的方法，以便我們能從中大致WebKit佈局、渲染所涉及的基本內容及方法。
二、CSS屬性的描述
1、RenderStyle類
RenderObject對象的m_style成員爲RenderStyle類對象，它往往用來描述一個RenderObject所可能涉及的CSS屬性數據(如left、top、align、color、font等等)，其數據成員往往對應於CSS中定義的所有屬性項，內容非常的龐雜，簡單的說來就是將CSS標準中的所有屬性按照一定分類定義到一個數據結構中。
2、RenderStyle類主要方法
爲了獲取、設置CSS屬性所對應的值，RenderStyle類提供了所有的獲取、設置CSS屬性的方法如：
void setDisplay(EDisplay v) { noninherited_flags._effectiveDisplay = v; }
void setOriginalDisplay(EDisplay v) { noninherited_flags._originalDisplay = v; }
void setPosition(EPosition v) { noninherited_flags._position = v; }
void setFloating(EFloat v) { noninherited_flags._floating = v; }
void setLeft(Length v) { SET_VAR(surround,offset.left,v) }
void setRight(Length v) { SET_VAR(surround,offset.right,v) }
void setTop(Length v) { SET_VAR(surround,offset.top,v) }
void setBottom(Length v){ SET_VAR(surround,offset.bottom,v) }
void setWidth(Length v) { SET_VAR(box,width,v) }
void setHeight(Length v) { SET_VAR(box,height,v) }
等等。。。。
三、RenderObject及子類對象的生成
1、CSSParser
CSSParser類顧名思義，主要用來解析文本中各種CSS屬性，並且有效的組織在一個RenderStyle對象中。
其主要方法parseValue、applyProperty的部分代碼示例如下：
bool CSSParser::parseValue(int propId, bool important)
{
.....................................................
case CSSPropertyFloat:
// left | right | none | inherit + center for buggy CSS
if (id == CSSValueLeft || id == CSSValueRight ||
id == CSSValueNone || id == CSSValueCenter)
valid_primitive = true;
break;
case CSSPropertyClear: // none | left | right | both | inherit
if (id == CSSValueNone || id == CSSValueLeft ||
id == CSSValueRight|| id == CSSValueBoth)
valid_primitive = true;
break;
case CSSPropertyWebkitBoxAlign:
if (id == CSSValueStretch || id == CSSValueStart || id == CSSValueEnd ||
id == CSSValueCenter || id == CSSValueBaseline)
valid_primitive = true;
break;
.....................................................
case CSSPropertyWebkitBoxPack:
if (id == CSSValueStart || id == CSSValueEnd ||
id == CSSValueCenter || id == CSSValueJustify)
valid_primitive = true;
break;
....................................................
}
void CSSStyleSelector::applyProperty(int id, CSSValue *value)
{
case CSSPropertyOpacity:
HANDLE_INHERIT_AND_INITIAL(opacity, Opacity)
if (!primitiveValue || primitiveValue->primitiveType() != CSSPrimitiveValue::CSS_NUMBER)
return; // Error case.
// Clamp opacity to the range 0-1
m_style->setOpacity(min(1.0f, max(0.0f, primitiveValue->getFloatValue())));
return;
case CSSPropertyWebkitBoxAlign:
{
HANDLE_INHERIT_AND_INITIAL(boxAlign, BoxAlign)
if (!primitiveValue)
return;
EBoxAlignment boxAlignment = *primitiveValue;
if (boxAlignment != BJUSTIFY)
m_style->setBoxAlign(boxAlignment);
return;
}
...................................................
}
2、CSSStyleSelector類
CSSStyleSelector類其作用是基於所有用戶的stylesheets集合爲一個給定的DOM Element創建出其對應的RenderStyle對象。其主要功能由方法RenderStyle* styleForElement(Element*, RenderStyle* parentstyle=0, bool allowSharing = true, bool resolveForRootDefault = false);來實現。
3、構建Render樹
在構建DOM樹的過程中，Dom Element對象創建完後，往往通過attach方法來創建RenderObject對象，進而構建Render樹。
其基本實現流程如下：void Element::attach()=>createRendererIfNeeded()=>createRenderer；
RenderObject* Element::createRenderer(RenderArena* arena, RenderStyle* style)
{
if (document()->documentElement() == this && style->display() == NONE) {
// Ignore display: none on root elements. Force a display of block in that case.
RenderBlock* result = new (arena) RenderBlock(this);
if (result)
result->setAnimatableStyle(style);
return result;
}
return RenderObject::createObject(this, style);
}
RenderObject* RenderObject::createObject(Node* node, RenderStyle* style)
{
Document* doc = node->document();
RenderArena* arena = doc->renderArena();
const ContentData* contentData = style->contentData();
if (contentData && !contentData->m_next && contentData->m_type == CONTENT_OBJECT && doc != node) {
RenderImageGeneratedContent* image = new (arena) RenderImageGeneratedContent(node);
image->setStyle(style);
if (StyleImage* styleImage = contentData->m_content.m_image)
image->setStyleImage(styleImage);
return image;
}
RenderObject* o = 0;
switch (style->display()) {//往往在CSSStyleSelector::styleForElement或CSSStyleSelector::adjustRenderStyle時//調用setDisplay()以確定其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;
case RUN_IN:
case COMPACT:
o = new (arena) RenderBlock(node);
break;
case TABLE:
case INLINE_TABLE:
o = new (arena) RenderTable(node);
break;
case TABLE_ROW_GROUP:
case TABLE_HEADER_GROUP:
case TABLE_FOOTER_GROUP:
o = new (arena) RenderTableSection(node);
break;
case TABLE_ROW:
o = new (arena) RenderTableRow(node);
break;
case TABLE_COLUMN_GROUP:
case TABLE_COLUMN:
o = new (arena) RenderTableCol(node);
break;
case TABLE_CELL:
o = new (arena) RenderTableCell(node);
break;
case TABLE_CAPTION:
o = new (arena) RenderBlock(node);
break;
case BOX:
case INLINE_BOX:
o = new (arena) RenderFlexibleBox(node);
break;
}
return o;
}
這樣就不同的DOM樹節點結合不同的顯示屬性，創建出不同的RenderObject子類對象，進而形成一個Render樹。
四、總結
其實WebKit涉及網頁佈局方面的數據結構遠不止這些，其中有的也比較複雜，這裏只是列出自己認爲較爲重要的一小部分，希望能對了解WebKit的網頁佈局渲染有一定的基礎性作用