作為一個(gè)前端開發(fā)，最常見的運(yùn)行環(huán)境應(yīng)該是瀏覽器吧，為了更好的通過瀏覽器把優(yōu)秀的產(chǎn)品帶給用戶，也為了更好的發(fā)展自己的前端職業(yè)之路，有必要了解從我們?cè)跒g覽器地址欄輸入網(wǎng)址到看到頁面這期間瀏覽器是如何進(jìn)行工作的,進(jìn)而了解如何更好的優(yōu)化實(shí)踐，本篇主要圍繞這兩點(diǎn)展開闡述。前端頁面渲染機(jī)制可謂是老生常談，但又很有必要再談的話題，于是還是決定寫一篇，即是對(duì)知識(shí)的回顧總結(jié)，又能與大家分享，何樂而不為。網(wǎng)上相關(guān)類型的文章也很多，有興趣的可以多學(xué)習(xí)一下。 　　瀏覽器 　　在介紹瀏覽器工作流程之前，先了解一下主流瀏覽器的基礎(chǔ)結(jié)構(gòu)，本文所介紹的瀏覽器主要為開源的Chrome，F(xiàn)ireFox及部分開源的Safari，這也是目前市場(chǎng)占比最高的幾大瀏覽器，以本人博客網(wǎng)站為例，可以大致看出各瀏覽器使用比例： 　　瀏覽器基礎(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é)解析用戶請(qǐng)求的內(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請(qǐng)求等; 　　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ù)。

　　瀏覽器內(nèi)核 　　各大主要瀏覽器使用內(nèi)核也是有差別的，大致可以分為以下幾類： 　　Trident內(nèi)核： IE 　　Webkit內(nèi)核：Chrome,Safari 　　Gecko內(nèi)核：FireFox 　　網(wǎng)絡(luò) 　　當(dāng)用戶訪問頁面時(shí)，瀏覽器需要獲取用戶請(qǐng)求內(nèi)容，這個(gè)過程主要涉及瀏覽器網(wǎng)絡(luò)模塊： 　　1.用戶在地址欄輸入域名，如baidu.com，DNS(Domain Name System，域名解析系統(tǒng))服務(wù)器根據(jù)輸入的域名查找對(duì)應(yīng)IP，然后向該IP地址發(fā)起請(qǐng)求;

　　DNS

　　2.瀏覽器獲得并解析服務(wù)器的返回內(nèi)容(HTTP response); 　　3.瀏覽器加載HTML文件及文件內(nèi)包含的外部引用文件及圖片，多媒體等資源。 　　DNS預(yù)解析(DNS prefetch) 　　瀏覽器DNS解析大多時(shí)候較快，且會(huì)緩存常用域名的解析值，但是如果網(wǎng)站涉及多域名，在對(duì)每一個(gè)域名訪問時(shí)都需要先解析出IP地址，而我們希望在跳轉(zhuǎn)或者請(qǐng)求其他域名資源時(shí)盡量快，則可以開啟域名預(yù)解析，瀏覽器會(huì)在空閑時(shí)提前解析聲明需要預(yù)解析的域名，如： 　　多進(jìn)程 　　我們通常說JavaScript執(zhí)行是單進(jìn)程的，但是瀏覽器網(wǎng)絡(luò)部分通常是有幾個(gè)平行進(jìn)程同時(shí)開啟，但是也會(huì)有限制，一般為2-6個(gè)。 　　渲染引擎及關(guān)鍵渲染路徑(Critical Rendering Path) 　　渲染引擎所做的事是將請(qǐng)求內(nèi)容展現(xiàn)給我們，默認(rèn)支持HTML,XML和圖片類型，對(duì)于其他諸如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)適用對(duì)應(yīng)的樣式，這一過程是通過UI后端模塊完成; 　　為了更友好的用戶體驗(yàn)，瀏覽器會(huì)盡可能快的展現(xiàn)內(nèi)容，而不會(huì)等到文檔所有內(nèi)容到達(dá)才開始解析和構(gòu)建/布局渲染樹，而是每次處理一部分，并展現(xiàn)在屏幕上，這也是為什么我們經(jīng)常可以看到頁面加載的時(shí)候內(nèi)容是從上到下一點(diǎn)一點(diǎn)展現(xiàn)的。 　　流程圖

　　Webkit渲染引擎流程如下圖：

　　Webkit渲染引擎流程

　　Gecko渲染引擎流程如下圖：

　　Gecko渲染引擎流程 　　如上圖，Webkit瀏覽器和Gecko瀏覽器渲染流程大致相同,不同的是： 　　1.Webkit瀏覽器中的渲染樹(render tree)，在Gecko瀏覽器中對(duì)應(yīng)的則是框架樹(frame tree),渲染對(duì)象(render object)對(duì)應(yīng)的是框架(frame); 　　2.Webkit中的布局(Layout)過程，在Gecko中稱為回流(Reflow),本質(zhì)是一樣的，后文會(huì)解釋回流的另一層含義–重新布局; 　　3.Gecko中HTML和DOM樹中間多了一層內(nèi)容池(Content sink),可以理解成生成DOM元素的工廠。 　　單進(jìn)程 　　不同于網(wǎng)絡(luò)部分的多進(jìn)程渲染引擎是單線程工作的，意味著渲染流程是一步一步漸進(jìn)完成的。 　　解析文檔(parser HTML) 　　在詳細(xì)介紹瀏覽器渲染文檔之前，先應(yīng)該理解瀏覽器如何解析文檔：解析文檔的順序，對(duì)于CSS和JavaScript如何處理等。 　　解析順序 　　瀏覽器按從上到下的順序掃描解析文檔; 　　解析樣式和腳本 　　腳本或許是由于通常會(huì)在JavaScript腳本中改變文檔DOM結(jié)構(gòu)，于是瀏覽器以同步方式解析，加載和執(zhí)行腳本，瀏覽器在解析文檔時(shí)，當(dāng)解析到標(biāo)簽時(shí)，會(huì)解析其中的腳本(對(duì)于外鏈的JavaScript文件，需要先加載該文件內(nèi)容，再進(jìn)行解析)，然后立即執(zhí)行，這整個(gè)過程都會(huì)阻塞文檔解析，直到腳本執(zhí)行完才會(huì)繼續(xù)解析文檔。就是說由于腳本是同步加載和執(zhí)行的，它會(huì)阻塞文檔解析，這也解釋了為什么現(xiàn)在通常建議將標(biāo)簽放在標(biāo)簽前面，而不是放在標(biāo)簽里。現(xiàn)在HTML5提供defer和async兩個(gè)屬性支持延遲和異步加載JavaScript文件，如： 　　 　　

關(guān)鍵渲染路徑

關(guān)鍵渲染路徑介紹

　　 　　 　　

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

　　瀏覽器從上到下依次解析文檔構(gòu)建DOM樹 　　構(gòu)建CSSOM樹 　　CSSOM，即CSS對(duì)象模型(CSS Object Model)，CSSOM樹，與DOM樹結(jié)構(gòu)相似，只是另外為每一個(gè)節(jié)點(diǎn)關(guān)聯(lián)了樣式信息。 　　theme.css樣式內(nèi)容如下： 　　html, body { 　　width: 100%; 　　height: 100%; 　　background-col