眾所周知，瀏覽器是世界上用途最廣泛的軟件了弊决，它們展現(xiàn)著網(wǎng)絡資源仅政，但達成這個目標的過程是復雜并且遵循著很多不同的標準。里面的運行機制是具有迷惑性和反常規(guī)的静汤，理解瀏覽器的運行機制給了我們提升網(wǎng)絡性能和網(wǎng)絡應用效率的洞察力琅催。
接下來，就讓我們來簡單認識下瀏覽器渲染的基本原理虫给。
一藤抡、首先，讓我們認識幾個基本概念
- DOM：（Document Object Model）抹估，瀏覽器將HTML解析成樹形的數(shù)據(jù)結構缠黍，簡稱DOM。DOM 是文檔對象模型 (Document Object Model) 的縮寫药蜻。它是 HTML 文檔的對象表示瓷式，同時也是外部內(nèi)容（例如 JavaScript）與 HTML 元素之間的接口。 解析樹的根節(jié)點是Document對象语泽。
- CSSOM：（CSS Object Model）贸典，瀏覽器將CSS代碼解析成樹形的數(shù)據(jù)結構。
-
渲染引擎 ：渲染引擎就是在瀏覽器的屏幕上顯示請求的內(nèi)容湿弦。
默認情況下瓤漏，呈現(xiàn)引擎可顯示 HTML 和 XML 文檔與圖片。通過插件（或瀏覽器擴展程序）颊埃，還可以顯示其他類型的內(nèi)容蔬充；例如，使用 PDF 查看器插件就能顯示 PDF 文檔班利。但是在本章中饥漫，我們將集中介紹其主要用途：顯示使用 CSS 格式化的 HTML 內(nèi)容和圖片。Firefox罗标、Chrome和Safari是基于兩種渲染引擎構建的庸队，F(xiàn)irefox使用Geoko——Mozilla自主研發(fā)的渲染引擎，Safari和Chrome都使用webkit闯割。Webkit是一款開源渲染引擎彻消，它本來是為Linux平臺研發(fā)的，后來由Apple移植到Mac及Windows上
二宙拉、渲染的主流程
渲染引擎首先通過網(wǎng)絡獲得所請求文檔的內(nèi)容宾尚，通常以8K分塊的方式完成。
下面是渲染引擎在取得內(nèi)容之后的基本流程：
1. 解析html為dom樹，解析css為cssom煌贴。
渲染引擎開始解析html御板，并將標簽轉(zhuǎn)化為內(nèi)容樹中的dom節(jié)點。
2. 把dom和cssom結合起來生成渲染樹(render)
接著牛郑，它解析外部CSS文件及style標簽中的樣式信息怠肋。這些樣式信息以及html中的可見性指令將被用來構建另一棵樹——render樹。Render樹由一些包含有顏色和大小等屬性的矩形組成淹朋，它們將被按照正確的順序顯示到屏幕上笙各。
3. 布局渲染樹，計算幾何形狀
Render樹構建好了之后瑞你，將會執(zhí)行布局過程酪惭，它將確定每個節(jié)點在屏幕上的確切坐標。
4. 把渲染樹展示到屏幕上
再下一步就是繪制者甲，即遍歷render樹春感，并使用UI后端層繪制每個節(jié)點。
解析html以構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪制render樹
優(yōu)化這個嚴格的過程讓我們可以以最快的速度向用戶展示我們的網(wǎng)頁內(nèi)容虏缸。
值得注意的是鲫懒，關鍵的點在于上述的4個過程并不是以嚴格順序執(zhí)行的。渲染引擎會以最快的速度展示內(nèi)容刽辙，所以第二階段不會等到第一階段結束才開始窥岩，而是在第一階段有輸出的時候就開始執(zhí)行。其它階段也是如此宰缤。由于瀏覽器會嘗試盡快展示內(nèi)容颂翼，所以內(nèi)容有時會在樣式還沒有加載的時候展示出來。
這就是經(jīng)常發(fā)生的FOCU(flash of unstyled content)或白屏問題慨灭。
主流程示例
圖：WebKit 主流程
圖：Mozilla 的 Gecko 呈現(xiàn)引擎主流程
從上圖我們可以看出朦乏，雖然 WebKit 和 Gecko 使用的術語略有不同，但整體流程是基本相同的氧骤。
Gecko 將視覺格式化元素組成的樹稱為“框架樹”呻疹。每個元素都是一個框架。WebKit 使用的術語是“呈現(xiàn)樹”筹陵，它由“呈現(xiàn)對象”組成刽锤。對于元素的放置，WebKit 使用的術語是“布局”朦佩，而 Gecko 稱之為“重排”并思。對于連接 DOM 節(jié)點和可視化信息從而創(chuàng)建呈現(xiàn)樹的過程，WebKit 使用的術語是“附加”语稠。有一個細微的非語義差別纺荧，就是 Gecko 在 HTML 與 DOM 樹之間還有一個稱為“內(nèi)容模塊（Content Model）”的層，用于生成 DOM 元素.
