瀏覽器渲染原理圖：
1.解析HTML，生成DOM樹，解析CSS，生成CSSOM樹
2.將DOM樹和CSSOM樹結合，生成渲染樹(Render Tree)
回流：
回流是布局或者幾何屬性需要改變就稱為回流。回流是影響瀏覽器性能的關鍵因素，因為其變化涉及到部分頁面（或是整個頁面）的布局更新。一個元素的回流可能會導致了其所有子元素以及DOM中緊隨其后的節點、祖先節點元素的隨后的回流。
重繪：
重繪是由於節點的幾何屬性發生改變或者由於樣式發生改變但不會影響布局。例如outline, visibility, color、background-color等，重繪的代價是高昂的，因為瀏覽器必須驗證DOM樹上其他節點元素的可見性。
3.什么時候會發生回流呢？
1、添加或刪除可見的DOM元素
2、元素的位置發生變化
3、元素的尺寸發生變化（包括外邊距、內邊框、邊框大小、高度和寬度等）
4、內容發生變化，比如文本變化或圖片被另一個不同尺寸的圖片所替代。
5、頁面一開始渲染的時候（這肯定避免不了）
6、瀏覽器的窗口尺寸變化（因為回流是根據視口的大小來計算元素的位置和大小的）
而重繪是指在布局和幾何大小都不變得情況下，比如次改一下background-color,或者改動一下字體顏色的color等。
注意：回流一定會觸發重繪，而重繪不一定會回流
4.如何減少回流和重繪
1、CSS優化法
（1）使用 transform 替代 top
（2）使用 visibility 替換 display: none ，因為前者只會引起重繪，后者會引發回流（改變了布局
（3）避免使用table布局，可能很小的一個小改動會造成整個 table 的重新布局。
（4）盡可能在DOM樹的最末端改變class，回流是不可避免的，但可以減少其影響。盡可能在DOM樹的最末端改變class，可以限制了回流的范圍，使其影響盡可能少的節點。
（5）避免設置多層內聯樣式，CSS 選擇符從右往左匹配查找，避免節點層級過多。
（6）將動畫效果應用到position屬性為absolute或fixed的元素上，避免影響其他元素的布局，這樣只是一個重繪，而不是回流，同時，控制動畫速度可以選擇 requestAnimationFrame，詳見探討 requestAnimationFrame。
（7）避免使用CSS表達式，可能會引發回流。
（8）將頻繁重繪或者回流的節點設置為圖層，圖層能夠阻止該節點的渲染行為影響別的節點，例如will-change、video、iframe等標簽，瀏覽器會自動將該節點變為圖層。
（9）CSS3 硬件加速（GPU加速），使用css3硬件加速，可以讓transform、opacity、filters這些動畫不會引起回流重繪 。但是對於動畫的其它屬性，比如background-color這些，還是會引起回流重繪的，不過它還是可以提升這些動畫的性能。
2、JavaScript優化法
（1）避免頻繁操作樣式，最好一次性重寫style屬性，或者將樣式列表定義為class並一次性更改class屬性。
（2）避免頻繁操作DOM，創建一個documentFragment，在它上面應用所有DOM操作，最后再把它添加到文檔中。
（3）避免頻繁讀取會引發回流/重繪的屬性，如果確實需要多次使用，就用一個變量緩存起來。