大家好变屁，我是IT修真院深圳分院第01期學(xué)員，一枚正直純潔善良的web程序員意狠。
今天給大家分享一下粟关，修真院官網(wǎng)CSS任務(wù)15，深度思考中的知識點(diǎn)——瀏覽器如何渲染頁面环戈？
一闷板、背景介紹
瀏覽器是前端工程師或頁面重構(gòu)師工作中必不可少的，WEB頁面運(yùn)行在各種各樣的瀏覽器當(dāng)中院塞，瀏覽器載入遮晚、渲染頁面的速度直接影響著用戶體驗(yàn)，特別是瀏覽器渲染頁面的原理拦止，頁面渲染就是瀏覽器將HTML代碼根據(jù)CSS定義的規(guī)則顯示在瀏覽器窗口中的這個(gè)過程县遣，理解了原理就更會容易理解前端優(yōu)化的一些準(zhǔn)則。
二、知識剖析
2.1 reflow(回流)
說到頁面為什么會慢艺玲？那是因?yàn)闉g覽器要花時(shí)間括蝠、花精力去渲染，尤其是當(dāng)它發(fā)現(xiàn)某個(gè)部分發(fā)生了點(diǎn)變化影響了布局饭聚，需要倒回去重新渲染， 該過程稱為reflow（回流）搁拙。
reflow幾乎是無法避免的∶胧幔現(xiàn)在界面上流行的一些效果，比如樹狀目錄的折疊箕速、展開（實(shí)質(zhì)上是元素的顯 示與隱藏）等酪碘，都將引起瀏覽器的reflow。鼠標(biāo)滑過盐茎、點(diǎn)擊……只要這些行為引起了頁面上某些元素的占位面積兴垦、定位方式、邊距等屬性的變化字柠，都會引起它內(nèi)部探越、周圍甚至整個(gè)頁面的重新渲 染。通常我們都無法預(yù)估瀏覽器到底會reflow哪一部分的代碼窑业，它們都彼此相互影響著钦幔。
2.2 repaint(重繪)
如果只是改變某個(gè)元素的背景色、文 字顏色常柄、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性鲤氢，將只會引起瀏覽器repaint（重繪）。repaint的速度明顯快于reflow（在IE下需要換一下說法西潘，reflow要比repaint更緩慢）卷玉。
下面是一個(gè)打開Wikipedia時(shí)的Layout/reflow的視頻（注：HTML在初始化的時(shí)候也會做一次reflow，叫intial reflow）喷市，你可以感受一下：視頻
三相种、常見問題
瀏覽器如何渲染頁面？
四东抹、解決方案
4.1瀏覽器工作大流程
先看圖
1）瀏覽器會解析三個(gè)東西：
一個(gè)是HTML/SVG/XHTML蚂子，事實(shí)上，Webkit有三個(gè)C++的類對應(yīng)這三類文檔缭黔。解析這三種文件會產(chǎn)生一個(gè)DOM Tree食茎。
CSS，解析CSS會產(chǎn)生CSS規(guī)則樹馏谨。
Javascript别渔，腳本，主要是通過DOM API(Application Programming Interface)和CSSOM(CSS對象模型) API來操作DOM Tree和CSS Rule Tree.
2）解析完成后，瀏覽器引擎會通過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會解析成這樣：
下面是另一個(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會是這個(gè)樣子：
注意：CSS匹配HTML元素是一個(gè)相當(dāng)復(fù)雜和有性能問題的事情。所以低淡，你就會在N多地方看到很多人都告訴你姓言，DOM樹要小，CSS盡量用id和class蔗蹋，千萬不要過渡層疊下去何荚，……
通過這兩個(gè)樹，我們可以得到一個(gè)叫Style Context Tree纸颜，也就是下面這樣（把CSS Rule結(jié)點(diǎn)Attach到DOM Tree上）：
所以兽泣，F(xiàn)irefox基本上來說是通過CSS解析 生成CSS Rule Tree，然后胁孙，通過比對DOM生成Style Context Tree唠倦，然后Firefox通過把Style Context Tree和其Render Tree（Frame Tree）關(guān)聯(lián)上，就完成了涮较。注意：Render Tree會把一些不可見的結(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動態(tài)修改了DOM屬性或是CSS屬會導(dǎo)致重新Layout，有些改變不會国瓮，就是那些指到天上的箭頭灭必，比如狞谱，修改后的CSS rule沒有被匹配到，等禁漓。
5.編碼實(shí)戰(zhàn)
詳見視頻
六跟衅、擴(kuò)展思考
1.影響頁面渲染速度主要因素有哪些？
reflow(回流)和repaint(重繪)
2.哪些情況下會導(dǎo)致reflow發(fā)生播歼？
改變窗囗大辛骢巍；改變文字大忻啬撩穿；添加/刪除樣式表；內(nèi)容的改變谒撼，如用戶在輸入框中敲字；激活偽類雾狈，如:hover (IE里是一個(gè)兄弟結(jié)點(diǎn)的偽類被激活)廓潜；操作class屬性；腳本操作DOM善榛；計(jì)算offsetWidth和offsetHeight辩蛋；設(shè)置style屬性。
3.如何避免reflow(回流)移盆？
reflow是不可避免的悼院，只能將reflow對性能的影響減到最小。
1.盡可能限制reflow的影響范圍咒循。需要改變元素的樣式据途，不要通過父級元素影響子元素。最好直接加在子元素上叙甸。
2.通過設(shè)置style屬性改變結(jié)點(diǎn)樣式的話颖医，每設(shè)置一次都會導(dǎo)致一次reflow。所以最好通過設(shè)置class的方式裆蒸。
3.減少不必要的DOM層級（DOM depth）熔萧。改變DOM樹中的一級會導(dǎo)致所有層級的改變，上至根部僚祷，下至被改變節(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)
參考一：瀏覽器的渲染原理簡介
參考二：為什么每個(gè)前端開發(fā)者都要理解網(wǎng)頁渲染肋演？
八抑诸、更多討論
1.提高瀏覽器性能的方法還有哪些？
2.瀏覽器的主要功能有哪些爹殊？
3.哪款瀏覽器的綜合性能最優(yōu)蜕乡？
感謝大家觀看
今天的分享就到這里啦，歡迎大家點(diǎn)贊梗夸、轉(zhuǎn)發(fā)层玲、留言、拍磚~
你可以直接點(diǎn)擊此鏈接與我一起學(xué)習(xí)：邀請碼
