RenderObject 樹
RenderObject 物件儲存著為緩制Dom 節點所需要的各種資訊，例如佈局資訊，經過webkit 處理之後，RenderObject 物件知道如何繪製自己，RenderObject 物件同DOM 節點類似，它們也構成一棵樹，可以稱之為RenderObject 樹。 RenderObject 樹是基於 Dom 樹建立起來的一棵樹，是為了佈局計算和渲染等機制而構建的一種新的內部表示。RenderObject 樹節點與DOM 節點不是一一對應的關係。以下三條規則會為Dom 樹節點建立一個RenderObject 物件。
- Dom 樹的 document 節點。
- Dom 樹中的可視節點，如 html、body、 div 、p 等等。webkit 不會會非可視節點建立 RenderObject 節點，如 head script。
- 某些情況下，webkit 需要建立 RenderObject 節點，該節點不應對於 dom 樹中的任何節點，而是webkit 處理上的需要，典型的例子就是匿名的RenderBlock 節點。
網頁層次和 RenderLayer 樹
網頁是分層的，一是方便開發者設定網頁的層次，二是為了webkit 處理上的便 利，也是就為了簡化渲染的邏輯。RenderLayer 樹是基於 RenderObject 樹建立起來的一棵新樹。RenderLayer 節點和 RenderObject 節點不是一一對應的關係，而是一對多的關係。下面三條原則 RenderObject 節點需要建立 新的 RenderLayer 節點。
- DOM 樹的Document 節點對應的RenderView 節點。
- DOM 樹中的Document 的子女節點，也就是HTML 節點對應的RenderBlock 節點
- 顯式的指定css 位置的RenderObject 節點。
- 有透明效果的 RenderObject 節點。
- 有節點溢位（overflow、alpha）反身等效果的 RenderObject 節點。
- 使用 Canvas 2D 3D (WEBGL)技術的 RenderObject 節點。
- Video 節點對應的RenderObject 節點。
渲染方式
- 繪圖上下文 RenderObject 物件知道如何繪製自己，但是 RenderObject 是用什麼來繪製內容的呢？ webkit中，繪圖操作被定義了一個抽象層，這就是繪圖上下文 ，所有繪圖的操作都是在該文中進行的。
- 繪圖上下文分為兩種方式，第一種是繪製2D圖形上下文，第二種是繪製3D圖形的上下文，稱之為3D圖形的上下文。
- 網頁渲染的方式，目前主要有兩種，第一種是軟體渲染，第二種是硬體加速渲染，還有一種混合模式。
硬體加速機制
- 硬體加速是指使用GPU 的硬體能力來幫助渲染網頁，因為GPU的主要作用是用來繪製3D 圖形並且效能特別好，這是它的專長所在。