1. 一些必要的背景知識
目前使用的主流瀏覽器有五個：Internet Explorer、Firefox、Safari、Chrome 瀏覽器和 Opera。本文中以開放源代碼瀏覽器為例，即 Firefox、Chrome 瀏覽器和 Safari（部分開源）。根據(jù) StatCounter 瀏覽器統(tǒng)計數(shù)據(jù)，目前（2017 年 3 月）Firefox、Safari 和 Chrome 瀏覽器的總市場占有率已達70%+。由此可見，如今開放源代碼瀏覽器在瀏覽器市場中占據(jù)了非常堅實的部分。
瀏覽器的作用，從本質上來講，就是響應請求，從服務器獲取內容，然后通過瀏覽器窗口呈現(xiàn)給用戶。獲取的內容包括 HTML、CSS、JS，以及圖片、文字、音頻視頻等內容信息。
瀏覽器的7大核心組成
- 用戶界面 - 包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示的您請求的頁面外，其他顯示的各個部分都屬于用戶界面。
- 瀏覽器引擎 - 在用戶界面和渲染引擎之間傳送指令。
- 渲染引擎 - 負責顯示請求的內容。如果請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，并將解析后的內容顯示在屏幕上。
- 網(wǎng)絡 - 用于網(wǎng)絡調用，比如 HTTP 請求。其接口與平臺無關，并為所有平臺提供底層實現(xiàn)。
- 用戶界面后端 - 用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操作系統(tǒng)的用戶界面方法。
- JavaScript 解釋器 - 用于解析和執(zhí)行 JavaScript 代碼。
- 數(shù)據(jù)存儲 - 這是持久層。瀏覽器需要在硬盤上保存各種數(shù)據(jù)，例如 Cookie。新的 HTML 規(guī)范 (HTML5) 定義了“網(wǎng)絡數(shù)據(jù)庫”，這是一個完整（但是輕便）的瀏覽器內數(shù)據(jù)庫。
2. 現(xiàn)在讓我們集中于“渲染引擎”
本文所討論的瀏覽器（Firefox、Chrome 瀏覽器和 Safari）是基于兩種渲染引擎構建的。Firefox 使用的是 Gecko，這是 Mozilla 公司“自制”的。Safari 和 Chrome 使用的是 WebKit。
WebKit 是一個開源渲染引擎，起初用于 Linux 平臺，隨后由 Apple 公司進行修改，從而支持蘋果機和 Windows。詳情參閱 webkit.org。
主流程
渲染引擎一開始會從網(wǎng)絡層獲取請求文檔的內容，內容的大小一般限制在 8000 個塊以內。然后會按照一個基本流程進行渲染：
- 渲染引擎解析 HTML 文檔，形成一個“DOM(Document Object Model)”樹，每個 HTML 標簽都是一個 DOM 節(jié)點。
與此同時，渲染引擎也會解析 CSS 樣式數(shù)據(jù)（包括內聯(lián)及外部引入樣式）。這些樣式信息將會創(chuàng)建另一個樹結構：CSSOM樹。
- 構建渲染樹，Rendering Tree。
渲染樹構建完畢之后，進入“布局”處理階段，也就是為每個節(jié)點分配一個應出現(xiàn)在屏幕上的確切坐標。
下一個階段是繪制 - 渲染引擎會遍歷渲染樹，由用戶界面后端層將每個節(jié)點繪制出來。
需要著重指出的是，這是一個漸進的過程。為達到更好的用戶體驗，渲染引擎會力求盡快將內容顯示在屏幕上。它不必等到整個 HTML 文檔解析完畢之后，就會開始構建呈現(xiàn)樹和設置布局。在不斷接收和處理來自網(wǎng)絡的其余內容的同時，渲染引擎會將部分內容解析并顯示出來。
渲染流程示例
WebKit 渲染流程
Mozilla 的 Gecko 引擎渲染流程
WebKit 和 Gecko 的整體渲染流程是基本相同，HTML+CSS 部分會有小的區(qū)別。
更加詳細的內容，可以通過下面兩篇文章，進一步了解。
參考：
