互聯(lián)網(wǎng)不斷高速發(fā)展的今天，使用瀏覽器瀏覽頁(yè)面幾乎已經(jīng)變成日常必做事項(xiàng)了，那么你了解瀏覽器是怎么把一堆枯燥的代碼變成一個(gè)藝術(shù)品般的網(wǎng)頁(yè)展現(xiàn)在你眼前的嗎？
頁(yè)面渲染就是瀏覽器將HTML變成人眼看到的圖像的全過(guò)程。
瀏覽器工作大流程
首先我們來(lái)看一張圖
從圖中我們可以得到幾個(gè)結(jié)論：
- 瀏覽器會(huì)解析三個(gè)東西：
- 一個(gè)是HTML/SVG/XHTML等類(lèi)似的東西，經(jīng)過(guò)解析后生成一個(gè)DOM Tree
- CSS，解析CSS會(huì)產(chǎn)生CSS規(guī)則樹(shù)。
- Javascript，腳本，主要是通過(guò)DOM API和CSSOM 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。
- 之后計(jì)算每個(gè)Frame（也就是每個(gè)Element）的位置，這又叫l(wèi)ayout和reflow過(guò)程。
- 最后通過(guò)調(diào)用操作系統(tǒng)Native GUI的API繪制。
渲染
渲染的流程基本上如下（黃色的四個(gè)步驟）：
- 計(jì)算CSS樣式
- 構(gòu)建Render Tree
- Layout（reflow） – 定位坐標(biāo)和大小，是否換行，各種position, overflow, z-index屬性 ……
- 正式開(kāi)畫(huà)（paint）
注意：上圖流程中有很多連接線，這表示了Javascript動(dòng)態(tài)修改了DOM屬性或是CSS屬性導(dǎo)致重新Layout（reflow），有些改變則不會(huì)造成影響，就是那些指到天上的箭頭（比如修改后的CSS rule沒(méi)有被匹配到）
這里就引申出現(xiàn)了今天我們另外兩個(gè)重要的概念——reflow(回流)、repaint（重繪）
Reflow與Repaint的概念解釋
Reflow
對(duì)于DOM結(jié)構(gòu)中的各個(gè)元素都有自己的盒子（模型），這些都需要瀏覽器根據(jù)各種樣式（瀏覽器的、開(kāi)發(fā)人員定義的等）來(lái)計(jì)算并根據(jù)計(jì)算結(jié)果將元素放到它該出現(xiàn)的位置，這個(gè)過(guò)程稱(chēng)之為reflow。
DOM Tree 里的每個(gè)結(jié)點(diǎn)都會(huì)有 reflow 方法，一個(gè)結(jié)點(diǎn)的 reflow 很有可能導(dǎo)致子結(jié)點(diǎn)，甚至父點(diǎn)以及同級(jí)結(jié)點(diǎn)的 reflow。在一些高性能的電腦上也許還沒(méi)什么，但是如果 reflow 發(fā)生在手機(jī)上，那么這個(gè)過(guò)程是非常痛苦和耗電的。
所以，下面這些動(dòng)作有很大可能會(huì)是成本比較高的。
- 當(dāng)你增加、刪除、修改 DOM 結(jié)點(diǎn)時(shí)，會(huì)導(dǎo)致 Reflow 或 Repaint。
- 當(dāng)你移動(dòng) DOM 的位置，或是搞個(gè)動(dòng)畫(huà)的時(shí)候。
- 當(dāng)你修改 CSS 樣式的時(shí)候。
- 當(dāng)你 Resize 窗口的時(shí)候（移動(dòng)端沒(méi)有這個(gè)問(wèn)題），或是滾動(dòng)的時(shí)候。
- 當(dāng)你修改網(wǎng)頁(yè)的默認(rèn)字體時(shí)。
注：display:none 會(huì)觸發(fā) reflow，而 visibility:hidden 只會(huì)觸發(fā) repaint，因?yàn)闆](méi)有發(fā)現(xiàn)位置變化。
Repaint
當(dāng)各種盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來(lái)后，瀏覽器于是便把這些元素都按照各自的特性繪制了一遍，于是頁(yè)面的內(nèi)容出現(xiàn)了，這個(gè)過(guò)程稱(chēng)之為repaint。
由上可見(jiàn)這兩個(gè)東東對(duì)瀏覽器渲染頁(yè)面是很重要的啊，都是會(huì)影響性能的，因此我們需要盡量避免上述常見(jiàn)的會(huì)引起repaint和reflow的一些操作，以提高渲染速度。
如何優(yōu)化？
Reflow是不可避免的，只能將Reflow對(duì)性能的影響減到最小,給出下面幾條建議：
- 不要一條一條地修改 DOM 的樣式。與其這樣，還不如預(yù)先定義好 css 的 class，然后修改 DOM 的 className
- 把 DOM 離線后修改。
- 不要把 DOM 節(jié)點(diǎn)的屬性值放在一個(gè)循環(huán)里當(dāng)成循環(huán)里的變量。不然這會(huì)導(dǎo)致大量地讀寫(xiě)這個(gè)結(jié)點(diǎn)的屬性。
- 盡可能的修改層級(jí)比較低的 DOM節(jié)點(diǎn)。當(dāng)然，改變層級(jí)比較底的 DOM節(jié)點(diǎn)有可能會(huì)造成大面積的 reflow，但是也可能影響范圍很小。
- 為動(dòng)畫(huà)的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他們的 CSS 是會(huì)大大減小 reflow 。
- 盡可量少使用table布局，牽一發(fā)而動(dòng)全身。
