|
轉(zhuǎn)載請(qǐng)注明原文地址：http://blog.csdn.net/milado_nju/article/details/7292131 # WebKit渲染基礎(chǔ) ## 概述 WebKit是一個(gè)渲染引擎，而不是一個(gè)瀏覽器，它專注于網(wǎng)頁內(nèi)容展示，其中渲染是其中核心的部分之一。本章著重于對(duì)渲染部分的基礎(chǔ)進(jìn)行一定程度的了解和認(rèn)識(shí)，主要理解基于DOM樹來介紹Render樹和RenderLayer樹的構(gòu)建由來和方式。 那么什么是DOM？簡單來說，DOM是對(duì)HTML或者XML等文檔的一種結(jié)構(gòu)化表示方法，通過這種方式，用戶可以通過提供標(biāo)準(zhǔn)的接口來訪問HTML頁面中的任何元素的相關(guān)屬性，并可對(duì)DOM進(jìn)行相應(yīng)的添加、刪除和更新操作等。相關(guān)信息可查閱W3C的文檔，這里不再贅述。 基于DOM樹的一些可視（visual）的節(jié)點(diǎn)，WebKit來根據(jù)需要來創(chuàng)建相應(yīng)的RenderObject節(jié)點(diǎn)，這些節(jié)點(diǎn)也構(gòu)成了一顆樹，稱之為Render樹?；赗ender樹，WebKit也會(huì)根據(jù)需要來為它們中的某些節(jié)點(diǎn)創(chuàng)建新的RenderLayer節(jié)點(diǎn)，從而形成一棵RenderLayer樹。 Render樹和RenderLayer樹是WebKit支持渲染所提供的基礎(chǔ)但是卻非常重要的設(shè)施。這是因?yàn)閃ebKit的布局計(jì)算依賴它們，瀏覽器的渲染和GPU硬件加速也都依賴于它們。幸運(yùn)地是，得益于它們接口定義的靈活性，不同的瀏覽器可以很方便地來實(shí)現(xiàn)自己的渲染和加速機(jī)制。 為了直觀了解這三種樹，下圖給出了這三種樹及其它們之間的對(duì)應(yīng)關(guān)系，后面會(huì)詳細(xì)介紹里面的細(xì)節(jié)。 ## Render樹 ###Render樹的建立 Render樹是基于DOM樹建立起來的一顆新的樹， 是布局和渲染等機(jī)制的基礎(chǔ)設(shè)施。 Render樹節(jié)點(diǎn)和DOM樹節(jié)點(diǎn)不是一一對(duì)應(yīng)關(guān)系，那么哪些情況下需要建立新的Render節(jié)點(diǎn)呢？ a) DOM樹的document節(jié)點(diǎn)； b) DOM樹中的可視化節(jié)點(diǎn)，例如HTML，BODY，DIV等，非可視化節(jié)點(diǎn)不會(huì)建立Render樹節(jié)點(diǎn)，例如HEAD，META，SCRIPT等； c) 某些情況下需要建立匿名的Render節(jié)點(diǎn)，該節(jié)點(diǎn)不對(duì)應(yīng)于DOM樹中的任何節(jié)點(diǎn)； RenderObject對(duì)象在DOM樹創(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)用過程。
Render樹建立之后，布局運(yùn)算會(huì)計(jì)算出相關(guān)的屬性，這其中有位置，大小，是否浮動(dòng)等。有了這些信息之后，渲染引擎才只知道在何處以及如何畫這些元素。 ###RenderObject類及其子類 RenderObject是Render樹的節(jié)點(diǎn)基礎(chǔ)類，提供了一組公共的接口。它有很多的子類，這些子類可能對(duì)應(yīng)一些DOM樹中的節(jié)點(diǎn)，例如RenderText，有些則是容器類，例如RenderBlock。下圖給出了一些常用的類的繼承關(guān)系圖，這其中RenderBlock是一個(gè)非常重要的類。
### 匿名RenderBlock對(duì)象 CSS中有塊級(jí)元素和內(nèi)嵌(inline)元素之分。內(nèi)嵌元素表現(xiàn)的是行布局形式，就是說這些元素以行進(jìn)行顯示。以’div’元素為例，如果設(shè)置屬性’style’為’display:inline’時(shí)，則那是內(nèi)嵌元素，那么它可能與前面的元素在同一行；如果該元素沒有設(shè)置這個(gè)屬性時(shí)，則是塊級(jí)元素，那么在新的行里顯示。 RenderBlock用來是用來表示塊級(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樹 RenderLayer樹是基于Render樹建立起來的一顆新的樹。同樣，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樹的document節(jié)點(diǎn)對(duì)應(yīng)的RenderView節(jié)點(diǎn) b) DOM樹中的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樹。 每個(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ǔ)，而后通過合成器來把這些不同的后端合成在一起，最終形成網(wǎng)頁的可視化內(nèi)容。 RenderLayer在創(chuàng)建RenderObject對(duì)象的時(shí)候，如果需要，也會(huì)同時(shí)被創(chuàng)建，當(dāng)然也有可能在執(zhí)行JavaScript代碼時(shí)，更新頁面的樣式從而需要新創(chuàng)建一個(gè)RenderLayer。 ## 一個(gè)例子 以上說了那么多，一堆堆的類，一個(gè)個(gè)的建立規(guī)則，聽起來太抽象，不太容易理解，那么一個(gè)具體的Render樹和RenderLayer樹到底是怎么樣的呢？為了可視化理解Render樹和RenderLayer樹，下面給出一個(gè)具體的例子來加以解釋和說明。 首先，讓我們來看一個(gè)簡單的HTML網(wǎng)頁，源代碼如下所示。 上面的代碼結(jié)構(gòu)很簡單，就是一些HTML的基本元素組成的，例如HTML，HEAD，DIV，A, IMG， TABLE等等， 然后包含一個(gè)特別的HTML5元素CANVAS，而且還有一小段JavaScript代碼。照顧到一些沒有相關(guān)背景的讀者，簡單解釋一下這段代碼的含義。這段代碼是對(duì)CANVAS元素創(chuàng)建一個(gè)WebGL的Context，有了這個(gè)context，就可以在canvas元素上繪制3D的內(nèi)容。這個(gè)類似于OpenGL或者OpenGLES的context，具體canvas和WebGL會(huì)有另外專門的章節(jié)來介紹。 這段HTML源代碼被WebKit解析后會(huì)生成一顆DOM樹。這段代碼的DOM樹主要結(jié)構(gòu)如本章第一幅圖中的‘DOM樹’部分所示。當(dāng)DOM樹生成時(shí)，WebKit同時(shí)建立了一顆Render樹，如上所說，代碼的Render樹被打印成如下圖所示的文本信息。
首先，上圖中的“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元素沒有相應(yīng)的RenderObject，如上面所解釋的，因?yàn)樗皇且粋€(gè)可視的元素。第二，Canvas元素不在其中，而是在第三個(gè)layer中（RenderHTMLCanvas）。但是它仍然是RenderBody節(jié)點(diǎn)的子女。第三，匿名的RenderBlock節(jié)點(diǎn)，它包含了RenderText， RenderInline等節(jié)點(diǎn)，原因如前所說。 再次，來看一下第三個(gè)layer。因?yàn)閺腃anvas創(chuàng)建了一個(gè)WebGL3D Context對(duì)象，這里需要重新生成一個(gè)新的layer。 最后，來說明一下三個(gè)layer的創(chuàng)建時(shí)間。第一和第二個(gè)layer在創(chuàng)建DOM樹后，會(huì)觸發(fā)創(chuàng)建；第三個(gè)layer測試資源加載解析好之后，執(zhí)行后面的JavaScript代碼后所創(chuàng)建。 基于上面的描述，相信大家已經(jīng)對(duì)Render樹和RenderLayer樹有了一定的了解?，F(xiàn)在讓我們回憶一下本章的第一幅圖。該圖其實(shí)是給出了示例的HTML網(wǎng)頁在WebKit中三種樹的對(duì)應(yīng)關(guān)系（僅選取其中重要的部分），相信現(xiàn)在你已經(jīng)了解它們的含義了。 ## 源代碼目錄 WebKit/Source/WebCore/rendering WebKit為支持渲染所涉及的各個(gè)類 WebKit/Source/WebCore/dom/ DOM樹的相關(guān)文件，包括一些基礎(chǔ)類及其接口定義 WebKit/Source/WebCore/html/ 為HTML網(wǎng)頁的元素所定義的相關(guān)的基礎(chǔ)類，它們基于DOM的Node類 ## 參考文獻(xiàn) 1. Google design documents: http://www./developers/design-documents/gpu-accelerated-compositing-in-chrome By yongsheng@ |
|
|
