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