渲染機制：

解析 HTML 標簽, 構(gòu)建 DOM 樹
解析 CSS, 構(gòu)建 CSSOM 樹
把 DOM 和 CSSOM 組合成渲染樹 (render tree)
在渲染樹的基礎上進行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)
把每個節(jié)點繪制到屏幕上 (painting)

Repaint 和 Reflow

Reflow：重新計算元素的幾何尺寸、位置 + repaint
Repaint：繪制界面發(fā)生變化的部分
(回流會引起重繪，所以代價更大)

引發(fā) reflow 或 repaint 的操作：

添加、刪除、更新DOM節(jié)點(reflow、repaint)
修改元素的magin、padding、border（reflow、repaint）
display: none（reflow、repaint）
visibility: hidden（repaint）
修改顏色、背景色 (repaint)

怎么做

盡量一次性修改樣式
DOM離線后修改
給動畫使用絕對定位可以減小 reflow ？

參考

javascript - What's the difference between reflow and repaint? - Stack Overflow
js優(yōu)化中，離線操作dom中的“離線”怎么理解？ - SegmentFault 思否