好久想寫一篇關(guān)于瀏覽器內(nèi)核的博客了烛恤，一直沒抽出時間岛宦，幸好白夜追兇完結(jié)了，趕緊寫出來莉擒。

1. 瀏覽器

說瀏覽器內(nèi)核之前先聊聊幾個瀏覽器大佬酿炸，目前有可觀市場份額的瀏覽器有5個，分別是Internet Explorer涨冀、Firefox填硕、Safari、Chrome和 Opera瀏覽器鹿鳖。

來看看市場份額占有率：

2017 9

數(shù)據(jù)來自StatCounter2017年九月的數(shù)據(jù)統(tǒng)計扁眯。
其中Firefox、Safari和Chrome是部分開源的翅帜，他們?nèi)齻€的份額占到了將近80%姻檀，看來開源才是互聯(lián)網(wǎng)發(fā)展趨勢。

2. 瀏覽器的主要組件

1. 用戶界面 - 包括地址欄涝滴、前進(jìn)/后退按鈕绣版、書簽菜單等。除了瀏覽器主窗口顯示的你請求的頁面外歼疮，其他顯示的各個部分都屬于用戶界面杂抽。
2. 瀏覽器引擎 - 在用戶界面和渲染引擎之間傳送指令。
3. 渲染引擎 - 負(fù)責(zé)顯示請求的內(nèi)容韩脏。如果請求的內(nèi)容是 HTML缩麸，它就負(fù)責(zé)解析 HTML 和 CSS 內(nèi)容，并將解析后的內(nèi)容顯示在屏幕上赡矢。
4. 網(wǎng)絡(luò) - 用于網(wǎng)絡(luò)調(diào)用杭朱，比如 HTTP 請求。其接口與平臺無關(guān)吹散，并為所有平臺提供底層實現(xiàn)弧械。
5. 用戶界面后端 - 用于繪制基本的窗口小部件，比如組合框和窗口空民。其公開了與平臺無關(guān)的通用接口刃唐，而在底層使用操作系統(tǒng)的用戶界面方法。
6. JavaScript 解釋器袭景。用于解析和執(zhí)行 JavaScript 代碼唁桩，比如chrome的javascript解釋器是V8闭树。
7. 數(shù)據(jù)存儲耸棒。這是持久層。瀏覽器需要在硬盤上保存各種數(shù)據(jù)报辱，例如 Cookie与殃。新的 HTML 規(guī)范 (HTML5)定義了“網(wǎng)絡(luò)數(shù)據(jù)庫”单山，這是一個完整（但是輕便）的瀏覽器內(nèi)數(shù)據(jù)庫。

主要組件

本文只就瀏覽器渲染引擎部分進(jìn)行討論幅疼。

3. 渲染引擎(The rendering engine)

渲染引擎的職責(zé)就是渲染米奸，即在瀏覽器窗口中顯示所請求的內(nèi)容。這是每一個瀏覽器的核心部分爽篷，所以渲染引擎也稱為瀏覽器內(nèi)核悴晰。
　　默認(rèn)情況下，渲染引擎可顯示 HTML 和 XML 文檔及圖片逐工。通過插件（或瀏覽器擴(kuò)展程序）铡溪，還瀏覽器渲染引擎也可以顯示其它類型的內(nèi)容。例如泪喊，使用 PDF 查看器插件就能顯示 PDF 文檔棕硫。
在本章中，我們將集中介紹其主要用途：顯示應(yīng)用了CSS的 HTML 內(nèi)容和圖片袒啼。

3.1 渲染引擎介紹

Firefox 使用的是 Gecko哈扮，這是 Mozilla 公司“自制”的渲染引擎。而 Safari 和 Chrome(28版本以前)瀏覽器使用的都是 Webkit蚓再。

2013年7月10日發(fā)布的Chrome 28 版本中滑肉，Chrome瀏覽器開始正式使用Blink內(nèi)核对途。所以赦邻，Webkit已經(jīng)成為了Chrome瀏覽器的前內(nèi)核。

3.2 渲染流程

渲染引擎一開始會從網(wǎng)絡(luò)層獲取請求文檔的內(nèi)容实檀，通常以8K分塊的方式完成。
獲取了文檔內(nèi)容之后膳犹，渲染引擎開始正式工作恬吕，其基本流程：

渲染引擎的基本流程

渲染引擎解析HTML文檔，并將文檔中的標(biāo)簽轉(zhuǎn)化為dom節(jié)點樹须床，即”內(nèi)容樹”铐料。同時，它也會解析外部CSS文件以及style標(biāo)簽中的樣式數(shù)據(jù)豺旬。這些樣式信息連同HTML中的”可見內(nèi)容”一道钠惩，被用于構(gòu)建另一棵樹——”渲染樹(Render樹)”。
　　渲染樹由一些帶有視覺屬性(如顏色族阅、大小等)的矩形組成篓跛，這些矩形將按照正確的順序顯示在頻幕上。
　　渲染樹構(gòu)建完畢之后坦刀，將會進(jìn)入”布局”處理階段愧沟，即為每一個節(jié)點分配一個屏幕坐標(biāo)蔬咬。再下一步就是繪制(painting)，即遍歷render樹沐寺，并使用UI后端層繪制每個節(jié)點林艘。

值得注意的是，這個過程是逐步完成的混坞，為了更好的用戶體驗狐援，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會等到所有的html都解析完成之后再去構(gòu)建和布局render樹究孕。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容咕村，同時，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容蚊俺。
主流程示例：

Webkit 主流程

Mozilla 的 Gecko 渲染引擎主流程

1. Gecko將視覺格式化元素組成的樹稱為”框架樹”(frame)懈涛。每個元素都是一個框架。Webkit使用的術(shù)語是”渲染樹”(render)泳猬，它由”渲染對象”組成批钠。
2. 對于元素的放置，Webkit 使用的術(shù)語是”布局”(layout)得封，而 Gecko 稱之為”重排”(reflow)埋心。
3. Webkit稱利用dom節(jié)點及樣式信息去構(gòu)建render樹的過程為attachment，Gecko在html和dom樹之間附加了一層忙上，這層稱為內(nèi)容接收器拷呆，相當(dāng)制造dom元素的工廠。

4. 參考博客

• 瀏覽器工作原理詳解