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