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