渲染机制、回流、重绘

渲染机制：

解析 HTML 标签, 构建 DOM 树
解析 CSS, 构建 CSSOM 树
把 DOM 和 CSSOM 组合成渲染树 (render tree)
在渲染树的基础上进行布局, 计算每个节点的几何结构
把每个节点绘制到屏幕上 (painting)

Repaint 和 Reflow

Reflow：重新计算元素的几何尺寸、位置 + repaint
Repaint：绘制界面发生变化的部分
(回流会引起重绘，所以代价更大)

引发 reflow 或 repaint 的操作：

添加、删除、更新DOM节点(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优化中，离线操作dom中的“离线”怎么理解？ - SegmentFault 思否