1：迴流

  當render tree中的一部分(或全部)因為元素的規模尺寸，佈局，隱藏等改變而需要重新構建。這就稱為迴流(reflow)，當頁面佈局和幾何屬性改變時就需要回流

2：重繪

  當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，比如background-color。則就叫稱為重繪。

3.迴流和重繪的關係

①迴流必將引起重繪

②而重繪不一定會引起迴流

4.觸發頁面重佈局的屬性（迴流）

①盒子模型相關屬性會觸發重佈局

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

5：只觸發重繪的屬性

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

6：新建DOM的過程

1. 獲取DOM後分割為多個圖層

2. 對每個圖層的節點計算樣式結果（Recalculate style--樣式重計算）

3. 為每個節點生成圖形和位置（Layout--迴流和重佈局）

4. 將每個節點繪製填充到圖層點陣圖中（Paint Setup和Paint--重繪）

5. 圖層作為紋理上傳至GPU

6. 符合多個圖層到頁面上生成最終螢幕影象（Composite Layers--圖層重組）

Chrome建立圖層的條件

3D或透視變換（perspective transform）CSS屬性

使用加速視訊解碼的<video>節點

擁有3D（WebGL）上下文或加速的2D上下文的<canvas>節點

混合外掛（如Flash）

對自己的opacity做CSS動畫或使用一個動畫webkit變換的元素

擁有加速CSS過濾器的元素

元素有一個包含複合層的後代節點（一個元素擁有一個子元素，該子元素在自己的層裡）

元素有一個z-index較低且包含一個複合層的兄弟元素（換句話說就是該元素在複合層上面渲染）

7：實戰優化點：

1. 用translate替代top改變

2. 用opacity替代visibility

3. 不要一條一條地修改 DOM 的樣式，預先定義好 class，然後修改 DOM 的 className

4. 把 DOM 離線後修改，比如：先把 DOM 給 display:none (有一次 Reflow)，然後你修改100次，然後再把它顯示出來

5. 不要把 DOM 結點的屬性值放在一個迴圈裡當成迴圈裡的變數

6. 不要使用 table 佈局，可能很小的一個小改動會造成整個 table 的重新佈局

7. 動畫實現的速度的選擇

8. 對於動畫新建圖層

9. 啟用 GPU 硬體加速 tranform3D

8  總結：避免使用重繪迴流的兩種方法

（1）  避免使用重繪和迴流的CSS屬性

（2）  將重繪和迴流的影響範圍限制在單獨的圖層中（gif圖）