重繪和迴流
css性能讓javascript變慢？
頻繁的觸發重繪與迴流，會導致UI頻繁渲染，最終導致JS變慢。
1.迴流
當render tree中的一部分(或全部)因爲元素的規模尺寸，佈局，隱藏等改變而需要重新構建。這就稱爲迴流(reflow)
當頁面佈局和幾何屬性改變時就需要回流.
迴流 -> 元素大小布局layout
平時可能碰到：
分頁 效果增加到DOM TREE layout變化
圖片 重點的 移入變大 圖片大小變化
2.重繪
當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，比如background-color。則就叫稱爲重繪。
迴流必將引起重繪，而重繪不一定會引起迴流
3.觸發頁面迴流的屬性
- 盒子模型相關屬性會觸發重佈局
- 定位屬性及浮動也會觸發重佈局
- 改變節點內部文字結構也會觸發重佈局
width
height
padding
margin
display
border-width
border
min-height
top
bottom
left
right
position
float
clear
text-align
overflow-y
font-weight
overflow
font-family
line-height
vertival-align
white-space
font-size
4.只觸發重繪的屬性
color
border-style
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline-color
outline
outline-style
outline-width
box-shadow
5.新建DOM的過程
- 獲取DOM後分割爲多個圖層
- 對每個圖層的節點計算樣式結果（Recalculate style–樣式重計算）
- 爲每個節點生成圖形和位置（Layout–迴流和重佈局）
- 將每個節點繪製填充到圖層位圖中（Paint Setup和Paint–重繪）
- 圖層作爲紋理上傳至GPU
- 符合多個圖層到頁面上生成最終屏幕圖像（Composite Layers–圖層重組）
6.Chrome創建圖層的條件
- 3D或透視變換（perspective transform）CSS屬性
- 使用加速視頻解碼的節點
- 擁有3D（WebGL）上下文或加速的2D上下文的節點
- 混合插件（如Flash）
- 對自己的opacity做CSS動畫或使用一個動畫webkit變換的元素
- 擁有加速CSS過濾器的元素
- 元素有一個包含複合層的後代節點（一個元素擁有一個子元素，該子元素在自己的層裏）
- 元素有一個z-index較低且包含一個複合層的兄弟元素（換句話說就是該元素在複合層上面渲染）
1.避免使用觸發重繪，迴流的CSS屬性
2.將重繪，迴流的影響返回限制在單獨的圖層之間。
7.優化
- 用translate替代top改變
- 用opacity替代visibility
- 不要一條一條地修改 DOM 的樣式，預先定義好 class，然後修改 DOM 的 className
- 把 DOM 離線後修改，比如：先把 DOM 給 display:none (有一次 Reflow)，然後你修改100次，然後再把它顯示出來
- 不要把 DOM 結點的屬性值放在一個循環裏當成循環裏的變量
- 不要使用 table 佈局，可能很小的一個小改動會造成整個 table 的重新佈局
- 動畫實現的速度的選擇
- 對於動畫新建圖層
- 啓用 GPU 硬件加速
對於網絡性能的調試，可以通過chrome,
通過勾選 rendering的部分可以看到重繪的部分。
