目前，主要的web瀏覽器有 Internet Explorer，Firefox，Safari，Chrome和Opera。根據W3C瀏覽器統計,開源瀏覽器Firefox，Safari和Chrome的使用率最多，其中Chrome占了70%多。下面主要講這三種瀏覽器渲染引擎的渲染過程。
渲染引擎
渲染引擎的作用是在瀏覽器的窗口上顯示所請求的內容。默認情況下，渲染引擎可以顯示HTML和XML文檔和圖像。
Chrome和Safari都是基于webkit渲染引擎構建的；Firefox使用Gecko渲染引擎。
主要流程
渲染引擎將從網絡層開始獲取所請求文檔的內容。渲染引擎的基本流程：
渲染引擎將開始解析HTML文檔，并將標簽轉到稱為“內容樹”的樹中的DOM節點。它將分析外部CSS文件和樣式元素中的樣式數據。樣式信息以及HTML中的視覺指令將用于創建另一個樹 - 渲染樹。渲染樹包含具有顏色和尺寸等視覺屬性的矩形。矩形以正確的順序顯示在屏幕上。渲染樹的構建之后，通過“ 布局”過程。這意味著給每個節點在屏幕上出現的確切坐標。下一個階段是繪制- 渲染樹將被遍歷，每個節點將使用UI后端層進行繪制。
webkit渲染引擎的主流程：
- 解析 HTML 標簽, 構建 DOM 樹
- 解析 CSS 標簽, 構建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎上進行布局, 計算每個節點的幾何結構
- 把每個節點繪制到屏幕上 (painting)
Gecko渲染引擎主流程：
Gecko 將視覺格式化元素組成的樹稱為“框架樹”。每個元素都是一個框架。Webkit 使用的術語是“呈現樹”，它由“呈現對象”組成。對于元素的放置，Webkit 使用的術語是“布局”，而 Gecko 稱之為“重排”。對于連接 DOM 節點和可視化信息從而創建呈現樹的過程，Webkit 使用的術語是“附加”。有一個細微的非語義差別，就是 Gecko 在 HTML 與 DOM 樹之間還有一個稱為“內容槽”的層，用于生成 DOM 元素。
參考文獻：
How browsers work
前端文摘：深入解析瀏覽器的幕后工作原理
