轉(zhuǎn)載請(qǐng)注明原文地址：http://blog.csdn.net/milado_nju/article/details/7292131

# WebKit渲染基礎(chǔ)

## 概述

WebKit是一個(gè)渲染引擎，而不是一個(gè)瀏覽器，它專(zhuān)注于網(wǎng)頁(yè)內(nèi)容展示，其中渲染是其中核心的部分之一。本章著重于對(duì)渲染部分的基礎(chǔ)進(jìn)行一定程度的了解和認(rèn)識(shí)，主要理解基于DOM樹(shù)來(lái)介紹Render樹(shù)和RenderLayer樹(shù)的構(gòu)建由來(lái)和方式。

那么什么是DOM？簡(jiǎn)單來(lái)說(shuō)，DOM是對(duì)HTML或者XML等文檔的一種結(jié)構(gòu)化表示方法，通過(guò)這種方式，用戶(hù)可以通過(guò)提供標(biāo)準(zhǔn)的接口來(lái)訪(fǎng)問(wèn)HTML頁(yè)面中的任何元素的相關(guān)屬性，并可對(duì)DOM進(jìn)行相應(yīng)的添加、刪除和更新操作等。相關(guān)信息可查閱W3C的文檔，這里不再贅述。

基于DOM樹(shù)的一些可視（visual）的節(jié)點(diǎn)，WebKit來(lái)根據(jù)需要來(lái)創(chuàng)建相應(yīng)的RenderObject節(jié)點(diǎn)，這些節(jié)點(diǎn)也構(gòu)成了一顆樹(shù)，稱(chēng)之為Render樹(shù)?；赗ender樹(shù)，WebKit也會(huì)根據(jù)需要來(lái)為它們中的某些節(jié)點(diǎn)創(chuàng)建新的RenderLayer節(jié)點(diǎn)，從而形成一棵RenderLayer樹(shù)。

Render樹(shù)和RenderLayer樹(shù)是WebKit支持渲染所提供的基礎(chǔ)但是卻非常重要的設(shè)施。這是因?yàn)閃ebKit的布局計(jì)算依賴(lài)它們，瀏覽器的渲染和GPU硬件加速也都依賴(lài)于它們。幸運(yùn)地是，得益于它們接口定義的靈活性，不同的瀏覽器可以很方便地來(lái)實(shí)現(xiàn)自己的渲染和加速機(jī)制。

為了直觀(guān)了解這三種樹(shù)，下圖給出了這三種樹(shù)及其它們之間的對(duì)應(yīng)關(guān)系，后面會(huì)詳細(xì)介紹里面的細(xì)節(jié)。

## Render樹(shù)

###Render樹(shù)的建立

Render樹(shù)是基于DOM樹(shù)建立起來(lái)的一顆新的樹(shù)， 是布局和渲染等機(jī)制的基礎(chǔ)設(shè)施。 Render樹(shù)節(jié)點(diǎn)和DOM樹(shù)節(jié)點(diǎn)不是一一對(duì)應(yīng)關(guān)系，那么哪些情況下需要建立新的Render節(jié)點(diǎn)呢？

a)      DOM樹(shù)的document節(jié)點(diǎn)；

b)      DOM樹(shù)中的可視化節(jié)點(diǎn)，例如HTML，BODY，DIV等，非可視化節(jié)點(diǎn)不會(huì)建立Render樹(shù)節(jié)點(diǎn)，例如HEAD，META，SCRIPT等；

c)      某些情況下需要建立匿名的Render節(jié)點(diǎn)，該節(jié)點(diǎn)不對(duì)應(yīng)于DOM樹(shù)中的任何節(jié)點(diǎn)；

RenderObject對(duì)象在DOM樹(shù)創(chuàng)建的同時(shí)也會(huì)被創(chuàng)建，當(dāng)然，如果DOM中有動(dòng)態(tài)加入元素時(shí)，也可能會(huì)相應(yīng)地創(chuàng)建RenderObject對(duì)象。下圖示例的是RenderObject對(duì)象被創(chuàng)建的函數(shù)調(diào)用過(guò)程。

Render樹(shù)建立之后，布局運(yùn)算會(huì)計(jì)算出相關(guān)的屬性，這其中有位置，大小，是否浮動(dòng)等。有了這些信息之后，渲染引擎才只知道在何處以及如何畫(huà)這些元素。

###RenderObject類(lèi)及其子類(lèi)

RenderObject是Render樹(shù)的節(jié)點(diǎn)基礎(chǔ)類(lèi)，提供了一組公共的接口。它有很多的子類(lèi)，這些子類(lèi)可能對(duì)應(yīng)一些DOM樹(shù)中的節(jié)點(diǎn)，例如RenderText，有些則是容器類(lèi)，例如RenderBlock。下圖給出了一些常用的類(lèi)的繼承關(guān)系圖，這其中RenderBlock是一個(gè)非常重要的類(lèi)。

### 匿名RenderBlock對(duì)象

CSS中有塊級(jí)元素和內(nèi)嵌(inline)元素之分。內(nèi)嵌元素表現(xiàn)的是行布局形式，就是說(shuō)這些元素以行進(jìn)行顯示。以’div’元素為例，如果設(shè)置屬性’style’為’display:inline’時(shí)，則那是內(nèi)嵌元素，那么它可能與前面的元素在同一行；如果該元素沒(méi)有設(shè)置這個(gè)屬性時(shí)，則是塊級(jí)元素，那么在新的行里顯示。

RenderBlock用來(lái)是用來(lái)表示塊級(jí)元素， 為了處理上的方便，某些情況下需要建立匿名的RenderBlock對(duì)象，因?yàn)镽enderBlock的子女必須都是內(nèi)嵌的元素或者都是非內(nèi)嵌的元素。所以，當(dāng)它包含兩種元素的時(shí)候，那么它會(huì)為相鄰的內(nèi)嵌元素創(chuàng)建一個(gè)塊級(jí)RenderBlock節(jié)點(diǎn)，然后設(shè)置該節(jié)點(diǎn)為自己的子女并且設(shè)置這些內(nèi)嵌元素為它的子女。

##RenderLayer樹(shù)

RenderLayer樹(shù)是基于Render樹(shù)建立起來(lái)的一顆新的樹(shù)。同樣，RenderLayer節(jié)點(diǎn)和Render節(jié)點(diǎn)不是一一對(duì)應(yīng)關(guān)系，而是一對(duì)多的關(guān)系。那么哪些情況下的RenderObject節(jié)點(diǎn)需要建立新的RenderLayer節(jié)點(diǎn)呢？

a)      DOM樹(shù)的document節(jié)點(diǎn)對(duì)應(yīng)的RenderView節(jié)點(diǎn)

b)      DOM樹(shù)中的document 的子女節(jié)點(diǎn)，也就是HTML節(jié)點(diǎn)對(duì)應(yīng)的RenderBlock節(jié)點(diǎn)

c)      顯式的CSS位置

d)      有透明效果的對(duì)象

e)      節(jié)點(diǎn)有溢出（overflow），alpha或者反射等效果的

f)       Canvas 2D和3D (WebGL)

g)      Video節(jié)點(diǎn)對(duì)應(yīng)的RenderObject對(duì)象

一個(gè)RenderLayer被建立之后，其所在的RenderObject對(duì)象的所有后代均包含在該RenderLayer，除非這些后代需要建立自己的RenderLayer。而后代的RenderLayer的父親就是自己最近的祖先所在的不同的RenderLayer，這樣，它們也構(gòu)成了一顆RenderLayer樹(shù)。

每個(gè)RenderLayer對(duì)應(yīng)的Render節(jié)點(diǎn)內(nèi)容均會(huì)繪制在該RenderLayer所對(duì)應(yīng)的層次上（或者內(nèi)部存儲(chǔ)結(jié)構(gòu)上）。不同的RenderLayer可以共享同一個(gè)內(nèi)部存儲(chǔ)結(jié)構(gòu)，也可以有各自的后端存儲(chǔ)，這取決于不同的移植。在軟件渲染下，通常各個(gè)RenderLayer的內(nèi)容都繪制在同一塊后端存儲(chǔ)上。在GPU硬件加速的下，某些RenderLayer可能有自己獨(dú)立的后端存儲(chǔ)，而后通過(guò)合成器來(lái)把這些不同的后端合成在一起，最終形成網(wǎng)頁(yè)的可視化內(nèi)容。

RenderLayer在創(chuàng)建RenderObject對(duì)象的時(shí)候，如果需要，也會(huì)同時(shí)被創(chuàng)建，當(dāng)然也有可能在執(zhí)行JavaScript代碼時(shí)，更新頁(yè)面的樣式從而需要新創(chuàng)建一個(gè)RenderLayer。

 ## 一個(gè)例子

以上說(shuō)了那么多，一堆堆的類(lèi)，一個(gè)個(gè)的建立規(guī)則，聽(tīng)起來(lái)太抽象，不太容易理解，那么一個(gè)具體的Render樹(shù)和RenderLayer樹(shù)到底是怎么樣的呢？為了可視化理解Render樹(shù)和RenderLayer樹(shù)，下面給出一個(gè)具體的例子來(lái)加以解釋和說(shuō)明。

首先，讓我們來(lái)看一個(gè)簡(jiǎn)單的HTML網(wǎng)頁(yè)，源代碼如下所示。

上面的代碼結(jié)構(gòu)很簡(jiǎn)單，就是一些HTML的基本元素組成的，例如HTML，HEAD，DIV，A,  IMG， TABLE等等， 然后包含一個(gè)特別的HTML5元素CANVAS，而且還有一小段JavaScript代碼。照顧到一些沒(méi)有相關(guān)背景的讀者，簡(jiǎn)單解釋一下這段代碼的含義。這段代碼是對(duì)CANVAS元素創(chuàng)建一個(gè)WebGL的Context，有了這個(gè)context，就可以在canvas元素上繪制3D的內(nèi)容。這個(gè)類(lèi)似于OpenGL或者OpenGLES的context，具體canvas和WebGL會(huì)有另外專(zhuān)門(mén)的章節(jié)來(lái)介紹。

這段HTML源代碼被WebKit解析后會(huì)生成一顆DOM樹(shù)。這段代碼的DOM樹(shù)主要結(jié)構(gòu)如本章第一幅圖中的‘DOM樹(shù)’部分所示。當(dāng)DOM樹(shù)生成時(shí)，WebKit同時(shí)建立了一顆Render樹(shù)，如上所說(shuō)，代碼的Render樹(shù)被打印成如下圖所示的文本信息。

首先，上圖中的“l(fā)ayer at (x, x)”表示不同的RenderLayer節(jié)點(diǎn)，下面的所有RenderObject均屬于該RenderLayer。以第一個(gè)layer為例，它對(duì)應(yīng)于DOM中的Document節(jié)點(diǎn)。后面的(0, 0)表示該節(jié)點(diǎn)在坐標(biāo)系中的位置，最后的1028x683表示該節(jié)點(diǎn)的大小。它包含的RenderView節(jié)點(diǎn)后面的信息也是同樣的意思。

其次，看其中最大的部分－第二個(gè)layer，包含了HTML中的絕大部分元素。這里有三點(diǎn)需要解釋一下：第一，Head元素沒(méi)有相應(yīng)的RenderObject，如上面所解釋的，因?yàn)樗皇且粋€(gè)可視的元素。第二，Canvas元素不在其中，而是在第三個(gè)layer中（RenderHTMLCanvas）。但是它仍然是RenderBody節(jié)點(diǎn)的子女。第三，匿名的RenderBlock節(jié)點(diǎn)，它包含了RenderText， RenderInline等節(jié)點(diǎn)，原因如前所說(shuō)。

再次，來(lái)看一下第三個(gè)layer。因?yàn)閺腃anvas創(chuàng)建了一個(gè)WebGL3D Context對(duì)象，這里需要重新生成一個(gè)新的layer。

最后，來(lái)說(shuō)明一下三個(gè)layer的創(chuàng)建時(shí)間。第一和第二個(gè)layer在創(chuàng)建DOM樹(shù)后，會(huì)觸發(fā)創(chuàng)建；第三個(gè)layer測(cè)試資源加載解析好之后，執(zhí)行后面的JavaScript代碼后所創(chuàng)建。

基于上面的描述，相信大家已經(jīng)對(duì)Render樹(shù)和RenderLayer樹(shù)有了一定的了解?，F(xiàn)在讓我們回憶一下本章的第一幅圖。該圖其實(shí)是給出了示例的HTML網(wǎng)頁(yè)在WebKit中三種樹(shù)的對(duì)應(yīng)關(guān)系（僅選取其中重要的部分），相信現(xiàn)在你已經(jīng)了解它們的含義了。 

## 源代碼目錄

WebKit/Source/WebCore/rendering

         WebKit為支持渲染所涉及的各個(gè)類(lèi)

WebKit/Source/WebCore/dom/

         DOM樹(shù)的相關(guān)文件，包括一些基礎(chǔ)類(lèi)及其接口定義

WebKit/Source/WebCore/html/

         為HTML網(wǎng)頁(yè)的元素所定義的相關(guān)的基礎(chǔ)類(lèi)，它們基于DOM的Node類(lèi) 

## 參考文獻(xiàn)

1.      Google design documents:

http://www./developers/design-documents/gpu-accelerated-compositing-in-chrome

 By yongsheng@