這里是修真院前端小課堂，每篇分享文從

【背景介紹】【知識(shí)剖析】【常見(jiàn)問(wèn)題】【解決方案】【編碼實(shí)戰(zhàn)】【擴(kuò)展思考】【更多討論】【參考文獻(xiàn)】

八個(gè)方面深度解析前端知識(shí)/技能，本篇分享的是：

【瀏覽器如何渲染頁(yè)面？】

?
一、背景介紹
瀏覽器是前端工程師或頁(yè)面重構(gòu)師工作中必不可少的，WEB頁(yè)面運(yùn)行在各種各樣的瀏覽器當(dāng)中，瀏覽器載入、渲染頁(yè)面的速度直接影響著用戶(hù)體驗(yàn)，特別是瀏覽器渲染頁(yè)面的原理，頁(yè)面渲染就是瀏覽器將HTML代碼根據(jù)CSS定義的規(guī)則顯示在瀏覽器窗口中的這個(gè)過(guò)程，理解了原理就更會(huì)容易理解前端優(yōu)化的一些準(zhǔn)則。

二、知識(shí)剖析
2.1 reflow(回流)

說(shuō)到頁(yè)面為什么會(huì)慢？那是因?yàn)闉g覽器要花時(shí)間、花精力去渲染，尤其是當(dāng)它發(fā)現(xiàn)某個(gè)部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染， 該過(guò)程稱(chēng)為reflow（回流）。

reflow幾乎是無(wú)法避免的。現(xiàn)在界面上流行的一些效果，比如樹(shù)狀目錄的折疊、展開(kāi)（實(shí)質(zhì)上是元素的顯 示與隱藏）等，都將引起瀏覽器的reflow。鼠標(biāo)滑過(guò)、點(diǎn)擊……只要這些行為引起了頁(yè)面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會(huì)引起它內(nèi)部、周?chē)踔琳麄€(gè)頁(yè)面的重新渲 染。通常我們都無(wú)法預(yù)估瀏覽器到底會(huì)reflow哪一部分的代碼，它們都彼此相互影響著。

2.2 repaint(重繪)

如果只是改變某個(gè)元素的背景色、文 字顏色、邊框顏色等等不影響它周?chē)騼?nèi)部布局的屬性，將只會(huì)引起瀏覽器repaint（重繪）。repaint的速度明顯快于reflow（在IE下需要換一下說(shuō)法，reflow要比repaint更緩慢）。

下面是一個(gè)打開(kāi)Wikipedia時(shí)的Layout/reflow的視頻（注：HTML在初始化的時(shí)候也會(huì)做一次reflow，叫intial reflow），你可以感受一下：視頻

三、常見(jiàn)問(wèn)題
瀏覽器如何渲染頁(yè)面？

四、解決方案
4.1瀏覽器工作大流程

先看圖

?

1）瀏覽器會(huì)解析三個(gè)東西：

一個(gè)是HTML/SVG/XHTML，事實(shí)上，Webkit有三個(gè)C++的類(lèi)對(duì)應(yīng)這三類(lèi)文檔。解析這三種文件會(huì)產(chǎn)生一個(gè)DOM Tree。

CSS，解析CSS會(huì)產(chǎn)生CSS規(guī)則樹(shù)。

Javascript，腳本，主要是通過(guò)DOM API(Application Programming Interface)和CSSOM(CSS對(duì)象模型) API來(lái)操作DOM Tree和CSS Rule Tree.

2）解析完成后，瀏覽器引擎會(huì)通過(guò)DOM Tree和CSS Rule Tree來(lái)構(gòu)造Rendering Tree。注意：

Rendering Tree渲染樹(shù)并不等同于DOM樹(shù)，因?yàn)橐恍┫馠eader或display:none的東西就沒(méi)必要放在渲染樹(shù)中了。CSS的Rule Tree主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個(gè)Element。也就是DOM結(jié)點(diǎn)。也就是所謂的Frame。然后，計(jì)算每個(gè)Frame（也就是每個(gè)Element）的位置，這又叫l(wèi)ayout和reflow過(guò)程。

3）最后通過(guò)調(diào)用操作系統(tǒng)Native GUI的API繪制。

4.2 DOM解析

?

上面這段HTML會(huì)解析成這樣：

?

下面是另一個(gè)有SVG標(biāo)簽的情況：

?

4.3 CSS解析

CSS的解析大概是下面這個(gè)樣子（下面主要說(shuō)的是Firefox的玩法），假設(shè)我們有下面的HTML文檔：

?

于是DOM Tree是這個(gè)樣子

?

然后我們的CSS文檔是這樣的：

/ rule 1 / doc { display: block; text-indent: 1em; }

/ rule 2 / title { display: block; font-size: 3em; }

/ rule 3 / para { display: block; }

/ rule 4 / [class="emph"] { font-style: italic; }

于是我們的CSS Rule Tree會(huì)是這個(gè)樣子：

?

注意：CSS匹配HTML元素是一個(gè)相當(dāng)復(fù)雜和有性能問(wèn)題的事情。所以，你就會(huì)在N多地方看到很多人都告訴你，DOM樹(shù)要小，CSS盡量用id和class，千萬(wàn)不要過(guò)渡層疊下去，……

通過(guò)這兩個(gè)樹(shù)，我們可以得到一個(gè)叫Style Context Tree，也就是下面這樣（把CSS Rule結(jié)點(diǎn)Attach到DOM Tree上）：

?

所以，Firefox基本上來(lái)說(shuō)是通過(guò)CSS解析 生成CSS Rule Tree，然后，通過(guò)比對(duì)DOM生成Style Context Tree，然后Firefox通過(guò)把Style Context Tree和其Render Tree（Frame Tree）關(guān)聯(lián)上，就完成了。注意：Render Tree會(huì)把一些不可見(jiàn)的結(jié)點(diǎn)去除掉。而Firefox中所謂的Frame就是一個(gè)DOM結(jié)點(diǎn)，不要被其名字所迷惑了。

?

4.4渲染

渲染的流程基本上如下（黃色的四個(gè)步驟）：

1)計(jì)算CSS樣式；2)構(gòu)建Render Tree；3)Layout –定位坐標(biāo)和大小，是否換行，各種position, overflow, z-index屬性……；4)正式開(kāi)畫(huà)；

?

注意：上圖流程中有很多連接線(xiàn)，這表示了Javascript動(dòng)態(tài)修改了DOM屬性或是CSS屬會(huì)導(dǎo)致重新Layout，有些改變不會(huì)，就是那些指到天上的箭頭，比如，修改后的CSS rule沒(méi)有被匹配到，等。

5.編碼實(shí)戰(zhàn)
詳見(jiàn)視頻

?

點(diǎn)擊這里

六、擴(kuò)展思考
1.影響頁(yè)面渲染速度主要因素有哪些？

reflow(回流)和repaint(重繪)

2.哪些情況下會(huì)導(dǎo)致reflow發(fā)生？

改變窗囗大小；改變文字大小；添加/刪除樣式表；內(nèi)容的改變，如用戶(hù)在輸入框中敲字；激活偽類(lèi)，如:hover (IE里是一個(gè)兄弟結(jié)點(diǎn)的偽類(lèi)被激活)；操作class屬性；腳本操作DOM；計(jì)算offsetWidth和offsetHeight；設(shè)置style屬性。

3.如何避免reflow(回流)？

reflow是不可避免的，只能將reflow對(duì)性能的影響減到最小。

1.盡可能限制reflow的影響范圍。需要改變?cè)氐臉邮?#xff0c;不要通過(guò)父級(jí)元素影響子元素。最好直接加在子元素上。

2.通過(guò)設(shè)置style屬性改變結(jié)點(diǎn)樣式的話(huà)，每設(shè)置一次都會(huì)導(dǎo)致一次reflow。所以最好通過(guò)設(shè)置class的方式。

3.減少不必要的DOM層級(jí)（DOM depth）。改變DOM樹(shù)中的一級(jí)會(huì)導(dǎo)致所有層級(jí)的改變，上至根部，下至被改變節(jié)點(diǎn)的子節(jié)點(diǎn)。這導(dǎo)致大量時(shí)間耗費(fèi)在執(zhí)行reflow上面。

4.避免不必要的復(fù)雜的CSS選擇器，尤其是后代選擇器（descendant selectors），因?yàn)闉榱似ヅ溥x擇器將耗費(fèi)更多的CPU。

七、參考文獻(xiàn)
參考一：瀏覽器的渲染原理簡(jiǎn)介

參考二：為什么每個(gè)前端開(kāi)發(fā)者都要理解網(wǎng)頁(yè)渲染？

八、更多討論
1.提高瀏覽器性能的方法還有哪些？

2.瀏覽器的主要功能有哪些？

3.哪款瀏覽器的綜合性能最優(yōu)？

?

?

“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開(kāi)始，找個(gè)師兄，帶你入門(mén)，學(xué)習(xí)的路上不再迷茫。

這里是技能樹(shù).IT修真院：http://www.jnshu.com，初學(xué)者轉(zhuǎn)行到互聯(lián)網(wǎng)行業(yè)的聚集地。"

歡迎加IT交流群565734203與大家一起討論交流

?

總結(jié)

以上是生活随笔為你收集整理的浏览器如何渲染页面？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。