reflow 和 repaint

瀏覽器解析基本流程

瀏覽器解析的基本流程

reflow和repaint

reflow，瀏覽器根據各類樣式來計算並根據計算結果將元素放到肯定的地方。
repaint： relfow完成以後，瀏覽器把這些元素按照各自的特性繪製一遍。

引發reflow和repaint的操做

引發repaint的操做

一個元素的外觀改變，可是沒有改變佈局的狀況

1. visibility

2. outline

3. background color

引發reflow的操做

1. 改變窗口大小

2. 改變字體

3. 增長和刪除樣式表

4. 內容的改變，好比用戶在輸入框輸入文字

5. 激活僞類

6. 操做class屬性

7. 腳本操做DOM

8. 計算offsetWidth和offsetHeight

9. 設置style屬性

display:none 觸發reflow，而visibility:hidden 觸發repaint，由於沒有發生位置變化

避免和最小化影響

1. 直接改變你想改變的元素（避免經過父元素做用於子元素，而是直接做用於子元素）

2. 避免黃色至內聯樣式

3. 對於動畫的元素，其position設爲fixed或absolute

4. 權衡速度的平滑，速度慢，reflow比較頻繁

5. 避免table佈局

6. 避免css中含有js 表達式（只有IE）

如何判斷元素reflow或者repaint

使用chrome開發者工具timeline:
timeline

參考資料：

1. REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?

2. Repaint 、Reflow 的基本認識和優化 (2)