浏览器如何渲染页面？
這里是修真院前端小課堂，每篇分享文從
【背景介紹】【知識(shí)剖析】【常見問題】【解決方案】【編碼實(shí)戰(zhàn)】【擴(kuò)展思考】【更多討論】【參考文獻(xiàn)】
八個(gè)方面深度解析前端知識(shí)/技能，本篇分享的是：
【瀏覽器如何渲染頁(yè)面？】
?
一、背景介紹
瀏覽器是前端工程師或頁(yè)面重構(gòu)師工作中必不可少的，WEB頁(yè)面運(yùn)行在各種各樣的瀏覽器當(dāng)中，瀏覽器載入、渲染頁(yè)面的速度直接影響著用戶體驗(yàn)，特別是瀏覽器渲染頁(yè)面的原理，頁(yè)面渲染就是瀏覽器將HTML代碼根據(jù)CSS定義的規(guī)則顯示在瀏覽器窗口中的這個(gè)過程，理解了原理就更會(huì)容易理解前端優(yōu)化的一些準(zhǔn)則。
二、知識(shí)剖析
2.1 reflow(回流)
說到頁(yè)面為什么會(huì)慢？那是因?yàn)闉g覽器要花時(shí)間、花精力去渲染，尤其是當(dāng)它發(fā)現(xiàn)某個(gè)部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染， 該過程稱為reflow（回流）。
reflow幾乎是無(wú)法避免的。現(xiàn)在界面上流行的一些效果，比如樹狀目錄的折疊、展開（實(shí)質(zhì)上是元素的顯 示與隱藏）等，都將引起瀏覽器的reflow。鼠標(biāo)滑過、點(diǎn)擊……只要這些行為引起了頁(yè)面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會(huì)引起它內(nèi)部、周圍甚至整個(gè)頁(yè)面的重新渲 染。通常我們都無(wú)法預(yù)估瀏覽器到底會(huì)reflow哪一部分的代碼，它們都彼此相互影響著。
2.2 repaint(重繪)
如果只是改變某個(gè)元素的背景色、文 字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性，將只會(huì)引起瀏覽器repaint（重繪）。repaint的速度明顯快于reflow（在IE下需要換一下說法，reflow要比repaint更緩慢）。
下面是一個(gè)打開Wikipedia時(shí)的Layout/reflow的視頻（注：HTML在初始化的時(shí)候也會(huì)做一次reflow，叫intial reflow），你可以感受一下：視頻
三、常見問題
瀏覽器如何渲染頁(yè)面？
四、解決方案
4.1瀏覽器工作大流程
先看圖
?
1）瀏覽器會(huì)解析三個(gè)東西：
一個(gè)是HTML/SVG/XHTML，事實(shí)上，Webkit有三個(gè)C++的類對(duì)應(yīng)這三類文檔。解析這三種文件會(huì)產(chǎn)生一個(gè)DOM Tree。
CSS，解析CSS會(huì)產(chǎn)生CSS規(guī)則樹。
Javascript，腳本，主要是通過DOM API(Application Programming Interface)和CSSOM(CSS對(duì)象模型) API來操作DOM Tree和CSS Rule Tree.
2）解析完成后，瀏覽器引擎會(huì)通過DOM Tree和CSS Rule Tree來構(gòu)造Rendering Tree。注意：
Rendering Tree渲染樹并不等同于DOM樹，因?yàn)橐恍┫馠eader或display:none的東西就沒必要放在渲染樹中了。CSS的Rule Tree主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個(gè)Element。也就是DOM結(jié)點(diǎn)。也就是所謂的Frame。然后，計(jì)算每個(gè)Frame（也就是每個(gè)Element）的位置，這又叫l(wèi)ayout和reflow過程。
3）最后通過調(diào)用操作系統(tǒng)Native GUI的API繪制。
4.2 DOM解析
?
上面這段HTML會(huì)解析成這樣：
?
下面是另一個(gè)有SVG標(biāo)簽的情況：
?
4.3 CSS解析
CSS的解析大概是下面這個(gè)樣子（下面主要說的是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ù)雜和有性能問題的事情。所以，你就會(huì)在N多地方看到很多人都告訴你，DOM樹要小，CSS盡量用id和class，千萬(wàn)不要過渡層疊下去，……
通過這兩個(gè)樹，我們可以得到一個(gè)叫Style Context Tree，也就是下面這樣（把CSS Rule結(jié)點(diǎn)Attach到DOM Tree上）：
?
所以，Firefox基本上來說是通過CSS解析 生成CSS Rule Tree，然后，通過比對(duì)DOM生成Style Context Tree，然后Firefox通過把Style Context Tree和其Render Tree（Frame Tree）關(guān)聯(lián)上，就完成了。注意：Render Tree會(huì)把一些不可見的結(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)正式開畫；
?
注意：上圖流程中有很多連接線，這表示了Javascript動(dòng)態(tài)修改了DOM屬性或是CSS屬會(huì)導(dǎo)致重新Layout，有些改變不會(huì)，就是那些指到天上的箭頭，比如，修改后的CSS rule沒有被匹配到，等。
5.編碼實(shí)戰(zhàn)
詳見視頻
?
點(diǎn)擊這里
六、擴(kuò)展思考
1.影響頁(yè)面渲染速度主要因素有哪些？
reflow(回流)和repaint(重繪)
2.哪些情況下會(huì)導(dǎo)致reflow發(fā)生？
改變窗囗大小；改變文字大小；添加/刪除樣式表；內(nèi)容的改變，如用戶在輸入框中敲字；激活偽類，如:hover (IE里是一個(gè)兄弟結(jié)點(diǎn)的偽類被激活)；操作class屬性；腳本操作DOM；計(jì)算offsetWidth和offsetHeight；設(shè)置style屬性。
3.如何避免reflow(回流)？
reflow是不可避免的，只能將reflow對(duì)性能的影響減到最小。
1.盡可能限制reflow的影響范圍。需要改變?cè)氐臉邮?#xff0c;不要通過父級(jí)元素影響子元素。最好直接加在子元素上。
2.通過設(shè)置style屬性改變結(jié)點(diǎn)樣式的話，每設(shè)置一次都會(huì)導(dǎo)致一次reflow。所以最好通過設(shè)置class的方式。
3.減少不必要的DOM層級(jí)（DOM depth）。改變DOM樹中的一級(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è)前端開發(fā)者都要理解網(wǎng)頁(yè)渲染？
八、更多討論
1.提高瀏覽器性能的方法還有哪些？
2.瀏覽器的主要功能有哪些？
3.哪款瀏覽器的綜合性能最優(yōu)？
?
?
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，學(xué)習(xí)的路上不再迷茫。
這里是技能樹.IT修真院：http://www.jnshu.com，初學(xué)者轉(zhuǎn)行到互聯(lián)網(wǎng)行業(yè)的聚集地。"
歡迎加IT交流群565734203與大家一起討論交流
?
總結(jié)
以上是生活随笔為你收集整理的浏览器如何渲染页面？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： std::vector使用简介
- 下一篇： js如何判断字符串里面是否含有某个字符串