作為一個(gè)前端開發(fā)，最常見的運(yùn)行環(huán)境應(yīng)該是瀏覽器，為了更好的通過瀏覽器把優(yōu)秀的產(chǎn)品帶給用戶，也為了更好的發(fā)展自己的前端職業(yè)之路，有必要了解從我們在瀏覽器地址欄輸入網(wǎng)址到看到頁面這期間瀏覽器是如何進(jìn)行工作的,進(jìn)而了解如何更好的優(yōu)化實(shí)踐。

瀏覽器

在介紹瀏覽器工作流程之前，先了解一下主流瀏覽器的基礎(chǔ)結(jié)構(gòu)，本文所介紹的瀏覽器主要為開源的Chrome，F(xiàn)ireFox及部分開源的Safari，這也是目前市場占比最高的幾大瀏覽器。

1.jpg

瀏覽器基礎(chǔ)結(jié)構(gòu)

瀏覽器基礎(chǔ)結(jié)構(gòu)主要包括如下7部分：

1.用戶界面（User Interface）:用戶所看到及與之交互的功能組件，如地址欄，返回，前進(jìn)按鈕等；
2.瀏覽器引擎（Browser engine）:負(fù)責(zé)控制和管理下一級(jí)的渲染引擎；
3.渲染引擎（Rendering engine）:負(fù)責(zé)解析用戶請求的內(nèi)容（如HTML或XML，渲染引擎會(huì)解析HTML或XML，以及相關(guān)CSS，然后返回解析后的內(nèi)容）；
4.網(wǎng)絡(luò)（Networking）:負(fù)責(zé)處理網(wǎng)絡(luò)相關(guān)的事務(wù)，如HTTP請求等；
5.UI后端（UI backend）:負(fù)責(zé)繪制提示框等瀏覽器組件，其底層使用的是操作系統(tǒng)的用戶接口；
6.JavaScript解釋器（JavaScript interpreter）:負(fù)責(zé)解析和執(zhí)行JavaScript代碼；
7.數(shù)據(jù)存儲(chǔ)（Data storage）:負(fù)責(zé)持久存儲(chǔ)諸如cookie和緩存等應(yīng)用數(shù)據(jù)。

image.png

瀏覽器內(nèi)核

各大主要瀏覽器使用內(nèi)核也是有差別的，大致可以分為以下幾類：

Trident內(nèi)核： IE
Webkit內(nèi)核：Chrome,Safari
Gecko內(nèi)核：FireFox

網(wǎng)絡(luò)

當(dāng)用戶訪問頁面時(shí)，瀏覽器需要獲取用戶請求內(nèi)容，這個(gè)過程主要涉及瀏覽器網(wǎng)絡(luò)模塊：
1.用戶在地址欄輸入域名，如baidu.com，DNS（Domain Name System，域名解析系統(tǒng)）服務(wù)器根據(jù)輸入的域名查找對應(yīng)IP，然后向該IP地址發(fā)起請求；
DNS:

image.png

2.瀏覽器獲得并解析服務(wù)器的返回內(nèi)容(HTTP response)；
3.瀏覽器加載HTML文件及文件內(nèi)包含的外部引用文件及圖片，多媒體等資源。

渲染引擎及關(guān)鍵渲染路徑（Critical Rendering Path）

渲染引擎所做的事是將請求內(nèi)容展現(xiàn)給我們，默認(rèn)支持HTML,XML和圖片類型，對于其他諸如PDF等類型的內(nèi)容則需要安裝相應(yīng)插件，但瀏覽器的展示工作流程基本是一樣的。

通過網(wǎng)絡(luò)模塊加載到HTML文件后渲染引擎渲染流程如下，這也通常被稱作關(guān)鍵渲染路徑（Critical Rendering Path）：

1.構(gòu)建DOM樹(DOM tree)：從上到下解析HTML文檔生成DOM節(jié)點(diǎn)樹（DOM tree），也叫內(nèi)容樹（content tree）；
2.構(gòu)建CSSOM(CSS Object Model)樹：加載解析樣式生成CSSOM樹；
3.執(zhí)行JavaScript：加載并執(zhí)行JavaScript代碼（包括內(nèi)聯(lián)代碼或外聯(lián)JavaScript文件）；
4.構(gòu)建渲染樹(render tree)：根據(jù)DOM樹和CSSOM樹,生成渲染樹(render tree)；渲染樹：按順序展示在屏幕上的一系列矩形，這些矩形帶有字體，顏色和尺寸等視覺屬性。
5.布局（layout）：根據(jù)渲染樹將節(jié)點(diǎn)樹的每一個(gè)節(jié)點(diǎn)布局在屏幕上的正確位置；
6.繪制（painting）：遍歷渲染樹繪制所有節(jié)點(diǎn)，為每一個(gè)節(jié)點(diǎn)適用對應(yīng)的樣式，這一過程是通過UI后端模塊完成；

image.png

為了更友好的用戶體驗(yàn)，瀏覽器會(huì)盡可能快的展現(xiàn)內(nèi)容，而不會(huì)等到文檔所有內(nèi)容到達(dá)才開始解析和構(gòu)建/布局渲染樹，而是每次處理一部分，并展現(xiàn)在屏幕上，這也是為什么我們經(jīng)?？梢钥吹巾撁婕虞d的時(shí)候內(nèi)容是從上到下一點(diǎn)一點(diǎn)展現(xiàn)的。

流程圖

Webkit渲染引擎流程如下圖：

image.png

Gecko渲染引擎流程如下圖：

image.png

如上圖，Webkit瀏覽器和Gecko瀏覽器渲染流程大致相同,不同的是：

1.Webkit瀏覽器中的渲染樹(render tree)，在Gecko瀏覽器中對應(yīng)的則是框架樹（frame tree）,渲染對象(render object)對應(yīng)的是框架（frame）;
2.Webkit中的布局（Layout）過程，在Gecko中稱為回流（Reflow）,本質(zhì)是一樣的，后文會(huì)解釋回流的另一層含義–重新布局；
3.Gecko中HTML和DOM樹中間多了一層內(nèi)容池（Content sink）,可以理解成生成DOM元素的工廠。

解析文檔(parser HTML)

在詳細(xì)介紹瀏覽器渲染文檔之前，先應(yīng)該理解瀏覽器如何解析文檔：解析文檔的順序，對于CSS和JavaScript如何處理等。

解析順序

瀏覽器按從上到下的順序掃描解析文檔；

解析樣式和腳本

1. 腳本或許是由于通常會(huì)在JavaScript腳本中改變文檔DOM結(jié)構(gòu)，于是瀏覽器以同步方式解析，加載和執(zhí)行腳本，瀏覽器在解析文檔時(shí)，當(dāng)解析到標(biāo)簽時(shí)，會(huì)解析其中的腳本（對于外鏈的JavaScript文件，需要先加載該文件內(nèi)容，再進(jìn)行解析），然后立即執(zhí)行，這整個(gè)過程都會(huì)阻塞文檔解析，直到腳本執(zhí)行完才會(huì)繼續(xù)解析文檔。就是說由于腳本是同步加載和執(zhí)行的，它會(huì)阻塞文檔解析，這也解釋了為什么現(xiàn)在通常建議將標(biāo)簽放在標(biāo)簽前面，而不是放在標(biāo)簽里?，F(xiàn)在HTML5提供defer和async兩個(gè)屬性支持延遲和異步加載JavaScript文件.
2. 改進(jìn)針對上文說的腳本阻塞文檔解析，主流瀏覽器如Chrome和FireFox等都有一些優(yōu)化，比如在執(zhí)行腳本時(shí)，開啟另一個(gè)進(jìn)程解析剩余的文檔以找出并加載其他的待下載外部資源（不改變主進(jìn)程的DOM樹，僅優(yōu)化加載外部資源）。
3. 樣式不同于腳本，瀏覽器對樣式的處理并不會(huì)阻塞文檔解析，大概是因?yàn)闃邮奖聿⒉粫?huì)改變DOM結(jié)構(gòu)。
4. 樣式表與腳本你可能想問樣式是否會(huì)阻塞腳本文件的加載執(zhí)行呢？正常情況是不會(huì)的，但是存在一個(gè)問題是通常我們會(huì)在腳本中請求樣式信息，但是在文檔解析時(shí)，如果樣式尚未加載或解析，將會(huì)得到錯(cuò)誤信息，對于這一問題，F(xiàn)ireFox瀏覽器和Webkit瀏覽器處理策略不同：
   a. 當(dāng)存在有樣式文件未被加載和解析時(shí)，F(xiàn)ireFox瀏覽器會(huì)阻塞所有腳本；
   b. Webkit瀏覽器只會(huì)阻塞操作了改文件內(nèi)聲明的樣式屬性的腳本。

構(gòu)建DOM樹

DOM，即文檔對象模型（Document Object Model）,DOM樹，即文檔內(nèi)所有節(jié)點(diǎn)構(gòu)成的一個(gè)樹形結(jié)構(gòu)。
假設(shè)瀏覽器獲取返回的如下HTML文檔：

image.png

首先瀏覽器從上到下依次解析文檔構(gòu)建DOM樹，如下：

image.png

構(gòu)建渲染樹(render tree)

DOM樹和CSSOM樹都構(gòu)建完了，接著瀏覽器會(huì)構(gòu)建渲染樹：

渲染樹，代表一個(gè)文檔的視覺展示，瀏覽器通過它將文檔內(nèi)容繪制在瀏覽器窗口，展示給用戶，它由按順序展示在屏幕上的一系列矩形對象組成，這些矩形對象都帶有字體，顏色和尺寸，位置等視覺樣式屬性。對于這些矩對象，F(xiàn)ireFox稱之為框架（frame）,Webkit瀏覽器稱之為渲染對象（render object, renderer），后文統(tǒng)稱為渲染對象。

這里把渲染樹節(jié)點(diǎn)稱為矩形對象，是因?yàn)?，每一個(gè)渲染對象都代表著其對應(yīng)DOM節(jié)點(diǎn)的CSS盒子,該盒子包含了尺寸，位置等幾何信息，同時(shí)它指向一個(gè)樣式對象包含其他視覺樣式信息。

渲染樹與DOM樹

每一個(gè)渲染對象都對應(yīng)著DOM節(jié)點(diǎn)，但是非視覺（隱藏，不占位）DOM元素不會(huì)插入渲染樹，如元素或聲明display: none;的元素，渲染對象與DOM節(jié)點(diǎn)不是簡單的一對一的關(guān)系，一個(gè)DOM可以對應(yīng)一個(gè)渲染對象，但一個(gè)DOM元素也可能對應(yīng)多個(gè)渲染對象，因?yàn)橛泻芏嘣夭恢拱粋€(gè)CSS盒子，如當(dāng)文本被折行時(shí)，會(huì)產(chǎn)生多個(gè)行盒，這些行會(huì)生成多個(gè)渲染對象；又如行內(nèi)元素同時(shí)包含塊元素和行內(nèi)元素，則會(huì)創(chuàng)建一個(gè)匿名塊級(jí)盒包含內(nèi)部行內(nèi)元素，此時(shí)一個(gè)DOM對應(yīng)多個(gè)矩形對象（渲染對象）。

渲染樹及其對應(yīng)DOM樹如圖：

image.png

布局（Layout）或回流（reflow，relayout）

創(chuàng)建渲染樹后，下一步就是布局（Layout）,或者叫回流（reflow,relayout），這個(gè)過程就是通過渲染樹中渲染對象的信息，計(jì)算出每一個(gè)渲染對象的位置和尺寸，將其安置在瀏覽器窗口的正確位置，而有些時(shí)候我們會(huì)在文檔布局完成后對DOM進(jìn)行修改，這時(shí)候可能需要重新進(jìn)行布局，也可稱其為回流，本質(zhì)上還是一個(gè)布局的過程，每一個(gè)渲染對象都有一個(gè)布局或者回流方法，實(shí)現(xiàn)其布局或回流。

流（flow）

HTML采用的是基于流的方式定位布局，其按照從左到右，從上到下的順序進(jìn)行排列，詳見CSS定位機(jī)制。

全局布局與局部布局

對渲染樹的布局可以分為全局和局部的，全局即對整個(gè)渲染樹進(jìn)行重新布局，如當(dāng)我們改變了窗口尺寸或方向或者是修改了根元素的尺寸或者字體大小等；而局部布局可以是對渲染樹的某部分或某一個(gè)渲染對象進(jìn)行重新布局。

布局過程

布局是一個(gè)從上到下，從外到內(nèi)進(jìn)行的遞歸過程，從根渲染對象，即對應(yīng)著HTML文檔根元素，然后下一級(jí)渲染對象，如對應(yīng)著元素，如此層層遞歸，依次計(jì)算每一個(gè)渲染對象的幾何信息（位置和尺寸）。

幾何信息-位置和尺寸，即相對于窗口的坐標(biāo)和尺寸，如根渲染對象，其坐標(biāo)為（0， 0），尺寸即是視口
尺寸（瀏覽器窗口的可視區(qū)域）。

每一個(gè)渲染對象的布局流程基本如：

1.計(jì)算此渲染對象的寬度（width）；
2.遍歷此渲染對象的所有子級(jí)，依次：
a. 設(shè)置子級(jí)渲染對象的坐標(biāo)
b. 判斷是否需要觸發(fā)子渲染對象的布局或回流方法，計(jì)算子渲染對象的高度（height）
3.設(shè)置此渲染對象的高度：根據(jù)子渲染對象的累積高，margin和padding的高度設(shè)置其高度；

頁面渲染優(yōu)化

瀏覽器對上文介紹的關(guān)鍵渲染路徑進(jìn)行了很多優(yōu)化，針對每一次變化產(chǎn)生盡量少的操作，還有優(yōu)化判斷重新繪制或布局的方式等等。

在改變文檔根元素的字體顏色等視覺性信息時(shí)，會(huì)觸發(fā)整個(gè)文檔的重繪，而改變某元素的字體顏色則只觸發(fā)特定元素的重繪；改變元素的位置信息會(huì)同時(shí)觸發(fā)此元素（可能還包括其兄弟元素或子級(jí)元素）的布局和重繪。某些重大改變，如更改文檔根元素的字體尺寸，則會(huì)觸發(fā)整個(gè)文檔的重新布局和重繪，據(jù)此及上文所述，推薦以下優(yōu)化和實(shí)踐：

1.HTML文檔結(jié)構(gòu)層次盡量少，最好不深于六層；
2.腳本盡量后放，放在前即可；
3.少量首屏樣式內(nèi)聯(lián)放在標(biāo)簽內(nèi)；
4.樣式結(jié)構(gòu)層次盡量簡單；
5.在腳本中盡量減少DOM操作，盡量緩存訪問DOM的樣式信息，避免過度觸發(fā)回流；
6.減少通過JavaScript代碼修改元素樣式，盡量使用修改class名方式操作樣式或動(dòng)畫；
7.動(dòng)畫盡量使用在絕對定位或固定定位的元素上；
8.隱藏在屏幕外，或在頁面滾動(dòng)時(shí)，盡量停止動(dòng)畫；
9.盡量緩存DOM查找，查找器盡量簡潔；
10.涉及多域名的網(wǎng)站，可以開啟域名預(yù)解析

————
前端·小龍
紙上學(xué)來終覺淺，絕知此事要躬行