瀏覽器渲染原理
瀏覽器解析大概的工作流程大致可歸納爲四個步驟：
1. 解析HTML以構建DOM樹：渲染引擎開始解析HTML文檔，轉換樹中的html標籤或js生成的標籤到DOM節點，它被稱爲 – 內容樹。
2. 構建渲染樹：解析CSS（包括外部CSS文件和樣式元素以及js生成的樣式）成樣式結構體，根據CSS選擇器計算出節點的樣式，創建另一個樹 —- 渲染樹（render tree）。
3. 佈局渲染樹: 從根節點遞歸調用，計算每一個元素的大小、位置等，給每個節點所應該出現在屏幕上的精確座標。
4. 繪製渲染樹: 遍歷渲染樹，每個節點將使用UI後端層來繪製。
重繪與迴流
當第一次打開一個頁面時，至少會有一次重繪和迴流。之後，如果渲染樹發生了變動，那麼可能會觸發重繪或迴流中的一個或二者。
如果渲染樹的結點發生了結構性變化，例如寬度、高度或者位置上的變化時，那麼會觸發Reflow(迴流)的邏輯。我們第一次進入一個頁面時便會至少觸發一次這個邏輯。
如果渲染樹結點發生了非結構性變化，例如背景色等的變化時，那麼會觸發Repaint(重繪)的邏輯。
觸發reflow和repaint
我們具體看看哪些操作會導致重繪或迴流：
- 增加、刪除、修改DOM結點
- 使用display:none;的方式隱藏一個結點會導致repaint與reflow，使用visibility:hidden;進行dom隱藏僅僅導致repaint(沒有結構性變化，僅僅看不見而已)
- 移動dom或着該dom進行動畫
- 添加新的樣式，或者修改某個樣式
- 用戶的一些操作諸如改變瀏覽器窗口大小，調整字體大小，滾動等等
如何減少迴流和重繪
Reflow是不可避免的，只能將Reflow對性能的影響減到最小,給出下面幾條建議：
1, 不要一條一條地修改 DOM 的樣式。與其這樣，還不如預先定義好 css 的 class，然後修改 DOM 的 className，即將多次改變樣式屬性的操作合併成一次操作：
2,讓要操作的元素進行”離線處理”，處理完後一起更新
- 使用DocumentFragment進行緩存操作,引發一次迴流和重繪；
- 使用display:none技術，只引發兩次迴流和重繪;
3,不要用tables佈局的一個原因就是tables中某個元素一旦觸發reflow就會導致table裏所有的其它元素reflow。在適合用table的場合，可以設置table-layout爲auto或fixed，這樣可以讓table一行一行的渲染，這種做法也是爲了限制reflow的影響範圍。
4,css裏不要有表達式expression
5,儘量不要過多的頻繁的去增加，修改，刪除元素，因爲這可能會頻繁的導致頁面reflow，可以先把該dom節點抽離到內存中進行復雜的操作然後再display到頁面上。
6,請求如下值offsetTop, offsetLeft, offsetWidth, offsetHeight，scrollTop/Left/Width/Height，clientTop/Left/Width/Height，瀏覽器會發生reflow，建議將他們合併到一起操作，可以減少迴流的次數。