HTML網頁是利用HTML語言編寫的文檔，是一種半結構化的數據表現方式，結構特徵可以歸納爲三種：樹狀結構，層次結構和框結構。
網頁構成
目前市面上大多數的網頁爲動態網頁，在這樣的動態網頁中，JavaScript代碼用來控制網頁內部的邏輯，CSS用來描述網頁的顯示信息。JavaScript是一種解釋型的腳本語言，主要目的是控制用戶端邏輯，同用戶交互，本身可以修改HTML元素及其內容，CSS是一種樣式表語言，用來描述元素的顯示信息，html元素組成一個樹狀結構，在webkit中會被構建成一個DOM樹。
網頁結構
- 框結構：用來對網頁的佈局進行分割，將網頁分成幾個框，在html中”frameset”,”frame”,”iframe”可以用來在當前網頁中嵌入新的框結構，在框中還可以在嵌入框。
- 層次結構：網頁文檔的層次結構，根層在後，子層在前，對於需要複雜變換和處理的元素創建新層，webkit創建新層主要目的是爲了渲染引擎在處理上的方便和高效。
渲染過程
渲染過程主要分成三個階段，第一個階段從網頁的URL到構建完DOM樹，第二階段從DOM樹到構建完webkit的繪圖上下文，第三個階段從繪圖上下文到生成最終的圖像。
第一階段：
① webkit調用資源加載器加載URL對應的網頁；
② 加載器依賴網絡模塊發送請求並接收回復；
③ webkit接收網頁或資源的數據，獲取的方式又分爲同步和異步；
④ 網頁交給HTML解釋器轉變成一系列的詞語（Token）；
⑤ 解釋器根據詞語構建成節點（Node），形成DOM樹；
⑥ 若節點是JavaScript的話要調用JavaScript引擎解釋並執行；
⑦ JavaScript代碼可能會修改DOM樹的結構；
⑧ 若節點需要依賴其他資源，如圖片、CSS、視頻等，調用資源加載器來加載它們，此操作爲異步，不會阻礙當前DOM樹的繼續創建；若是JavaScript資源URL（未標記爲異步方式），需要停止當前DOM樹的創建，直到JavaScript資源加載並被JavaScript引擎執行完後才繼續DOM樹的創建；
第二階段:
webkit利用CSS和DOM樹構建RenderObject樹直到繪圖上下文。
1 CSS 文件被CSS解釋器解釋成內部表示結構；
2 CSS解釋器工作完之後在DOM樹上附加解釋後的樣式信息，構成RenderObject樹；
3 創建RenderObject節點的同時，webkit根據網頁的層次結構創建RenderLayer樹，同時構建一個虛擬的繪圖上下文；
注：RenderObject樹的建立不表示DOM樹會被銷燬，實際上上圖的四個內部表示結構一直存在，直至網頁銷燬，它們對網頁的渲染有很大的作用
第三階段：
根據繪圖上下文生成最終的圖像，這一過程依賴2D和3D圖形庫。
① 繪圖上下文是一個與平臺無關的抽象類，會將每個繪圖操作橋接到不同的具體實現類（繪圖具體實現類）；
② 繪圖實現類可能簡單也可能複雜，chromium中需要chromium合成器來完成多進程和GPU加速機制；
③ 繪圖實現類將2D/3D圖形庫繪製結果保存，交給遊覽器顯示；
