重繪是乙個元素外觀的改變所觸發的瀏覽器行為。
渲染物件在建立完成並新增到渲染樹時，並不包含位置和大小資訊。計算這些值的過程稱為布局或重排
優化方案：
1.元素位置移動變換時盡量使用css3的transform來代替對top left等的操作
變換（transform）和透明度（opacity）的改變僅僅影響圖層的組合
2.使用opacity來代替visibility
(1).使用visibility不觸發重排，但是依然重繪。
(2).直接使用opacity即觸發重繪，又觸發重排（gpu底層設計如此！）。
(3).opacity配合圖層使用，即不觸發重繪也不觸發重排。
原因：透明度的改變時，gpu在繪畫時只是簡單的降低之前已經畫好的紋理的alpha值來達到效果，並不需要整體的重繪。
不過這個前提是這個被修改opacity本身必須是乙個圖層。
3.不要使用table布局
table-cell
4.將多次改變樣式屬性的操作合併成一次操作
不要一條一條地修改dom的樣式，預先定義好class，然後修改dom的classname
5.將dom離線後再修改
由於display屬性為none的元素不在渲染樹中，對隱藏的元素操作不會引發其他元素的重排。
如果要對乙個元素進行複雜的操作時，可以先隱藏它，操作完成後再顯示。這樣只在隱藏和顯示時觸發2次重排。
6.利用文件碎片(documentfragment)------vue使用了該種方式提公升效能。
7.不要把獲取某些dom節點的屬性值放在乙個迴圈裡當成迴圈的變數
當你請求向瀏覽器請求一些 style資訊的時候，就會讓瀏覽器flush佇列，比如：
1. offsettop, offsetleft, offsetwidth, offsetheight
2. scrolltop/left/width/height
3. clienttop/left/width/height
4. width,height
當你請求上面的一些屬性的時候，瀏覽器為了給你最精確的值，需要重新整理內部佇列，
因為佇列中可能會有影響到這些值的操作。即使你獲取元素的布局和樣式資訊跟最近發生或改變的布局資訊無關，
瀏覽器都會強行重新整理渲染佇列。
8.動畫實現過程中，啟用gpu硬體加速:transform: tranlatez(0)
9.為動畫元素新建圖層,提高動畫元素的z-index
前端效能優化 回流與重繪
最近在研究virtual dom，接著就研究回顧起回流 reflow 與重繪 repaint 了。在理解這兩個概念之前，我們先來看看瀏覽器渲染的工作流程。這裡以webkit渲染引擎為例 瀏覽器請求到html文件後，將html解析成dom tree css被解析成css style rules 解析完...
效能優化 頁面渲染 重繪 回流
參考 高效能web開發 深入理解頁面呈現 重繪 回流 因為一些原因要重新構建渲染數的時候，就叫做回流,第一次構建的時候也叫做回流。引起回流的操作 回流一定會導致重繪 影響元素幾何屬性發生變化 重繪 瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分...
回流重繪方向的效能優化
瀏覽器將獲取的html文件並解析成dom樹。處理css標記，構成層疊樣式表模型cssom css object model 將dom和cssom合併為渲染樹 rendering tree 將會被建立，代表一系列將被渲染的物件。渲染樹的每個元素包含的內容都是計算過的，它被稱之為布局layout。瀏覽器...