瀏覽器底層工作那些事兒
瀏覽器已經(jīng)成為我每天都需要打交道的工具，然而對于這個我們的老朋友，即使一些 web 開發(fā)人員也對它的底層工作原理不是非常清楚，今天我們就來簡單談一談瀏覽器的底層工作原理。
瀏覽器的主要功能
如果非要用一句話來概括瀏覽器的功能，那么瀏覽器就是一個請求資源，然后顯示資源的軟件。
這里的資源主要就是我們經(jīng)常提到的 html,css,js,還有圖片等。
瀏覽器共有的接口：
- 地址欄
- 前進后退按鈕
- 刷新按鈕
- 主頁按鈕
- 收藏按鈕
通過這些接口我們就基本掌握了瀏覽器的基本操作。
瀏覽器的架構(gòu)
瀏覽器對外表現(xiàn)就是一個內(nèi)容展示的容器，但是內(nèi)部它卻由很多組件組成。
- 用戶接口（我們前面提到的那些公用操作接口）
- 瀏覽器引擎（UI 和渲染引擎的封裝）
- 渲染引擎（負責顯示請求的內(nèi)容，根據(jù) css 和 html 顯示內(nèi)容布局）
- 網(wǎng)絡(luò)引擎（負責 http 請求，負責網(wǎng)絡(luò)管理）
- UI 引擎（負責繪制基本 html 元素，比如下拉框，輸入框等）
- js 解析引擎（解析和執(zhí)行 JavaScript 代碼）
- 數(shù)據(jù)存儲引擎（存儲 cookie，localStorage，IndexedDB，websql 等數(shù)據(jù)）
其中渲染引擎可以說是最重要的一部分，它一般決定著用戶看到網(wǎng)頁加載體驗。
不同的瀏覽器使用不同的渲染引擎，之前的 IE 使用的是 Trident，F(xiàn)irefox 使用 Gecko，Chrome 使用 WebKit 等，目前現(xiàn)在基本都使用 Blink 引擎。
渲染引擎的工作流程大致是這樣的。
首選它獲取到請求到的內(nèi)容，然后開始解析 html 結(jié)構(gòu)，將它們轉(zhuǎn)換成 dom 樹，然后渲染引擎解析 css 樣式，生成一個 css 樹，最后，根據(jù)樣式信息和 html 結(jié)構(gòu)生成 render 樹，我們稱之為渲染樹。
渲染樹主要包含了顏色，尺寸等視覺信息。構(gòu)建渲染樹之后，渲染樹的每個節(jié)點將會經(jīng)歷布局，找到在屏幕上的坐標。然后 UI 引擎會繪制各個節(jié)點。
渲染樹的構(gòu)建是漸進的，它會根據(jù)結(jié)構(gòu)一點點處理，盡量在屏幕上快速顯示部分內(nèi)容。
對于解析它主要包括兩部分，一部分是詞法分析，一部分是語法分析。
詞法分析，主要是按照詞匯表進行分析標記，構(gòu)建塊的集合。
語法分析，主要是根據(jù)詞法規(guī)則構(gòu)建解析樹的解析器。
HTML 解析
html 的標記和語法都是被定義好的，因此在解析的時候只要按照規(guī)則即可。
html 文檔格式是 DTD，它是一個上下文無關(guān)的文檔格式。它更加寬容，可以省略一些標記，因此解析器處理起來會很復雜。
dom 樹是由 dom 元素和屬性構(gòu)成的樹形結(jié)構(gòu)。其中 dom 和 html 中的標記是對應(yīng)的。
<html>
<body>
<p> Hello World </p>
<div>
<img src="example.png"/>
</div>
</body>
<html>
html 結(jié)構(gòu)不能采用常規(guī)的自頂向下或者自底向上的解析器進行解析，因此它需要采用自定義的解析器進行解析，通過標記法和樹構(gòu)造進行解析。
例如，將初始狀態(tài)標記為數(shù)據(jù)狀態(tài)，然后從<開始進行標記，遇到 a-z 創(chuàng)建令牌，標記為 tag open 狀態(tài)，直到遇到>，狀態(tài)變回數(shù)據(jù)狀態(tài)。
在創(chuàng)建解析器的時候，會創(chuàng)建文檔對象，在解析樹構(gòu)造的時候，會向 dom 樹添加元素。
標記法標記的節(jié)點會由解析樹的構(gòu)造函數(shù)進行處理。當元素被添加到 dom 樹的時候，也會被添加到堆棧中。
在解析 dom 樹的時候，js 引擎也會解析 js 腳本，dom 解析后，這些腳本會執(zhí)行。
解析樹是具有包容性的，當遇到一些錯誤的時候，它只會內(nèi)部進行標記，并不會報錯給用戶。
css 解析
WebKit 引擎使用 Flex 和 Bison 解析器生成器從 CSS 語法文件自動創(chuàng)建解析器。Bison 創(chuàng)建了一個自底向上的 shift-reduce 解析器。每個 CSS 文件都被解析為一個樣式表對象。每個對象都包含 CSS 規(guī)則。CSS 規(guī)則對象包含選擇器和聲明對象以及與 CSS 語法相對應(yīng)的其他對象。
在之前的時候，web 模型是同步的，解析器需要獲取資源，然后才能繼續(xù)解析。目前是一個線程進行解析，一個線程用來獲取文檔剩下需要加載的資源文件。
構(gòu)建渲染樹需要計算每個渲染對象的視覺特性。這是通過計算每個元素的樣式特性來完成的。該樣式包括各種來源的樣式表，內(nèi)聯(lián)樣式和 html 中的視覺屬性。
樣式計算是非常復雜的，如果設(shè)計不佳的話，就會導致占用過多內(nèi)存，因此很多瀏覽器采用通過添加規(guī)則樹和上下文樹來優(yōu)化樣式計算。
頁面布局
在創(chuàng)建渲染器的時候，它沒有位置和大小，然后我們需要計算它的位置和大小，這個過程被稱為頁面布局或者說叫做頁面回流。
布局是一個遞歸過程，它從根渲染器開始，根據(jù)層次結(jié)構(gòu)遞歸的遍歷每個渲染器，然后計算它們的集合信息，最后布局它們。
布局分為全量布局和增量布局。所謂全量布局指的就是會影響所有渲染器的全局樣式改變，比如字體改變。而增量布局指的是布局是異步完成的，渲染器通過觸發(fā)器進行布局。
css 主要是通過盒子模型來布局。每個盒子都有一個內(nèi)容區(qū)域和可選的周圍區(qū)域，比如邊框，邊距。其中有些盒子是塊狀模型，有些是行內(nèi)模型。
css 布局分為絕對定位和相對定位，絕對定位根據(jù)指定位置進行渲染，而相對定位則是根據(jù)其他元素的位置進行布局。
