Reflows 和 Repaints

Reflows

Reflows是导致DOM加载变慢的一个主要的原因之一，许多情况下，相当于重新laying out整个页面。什么导致了Reflow：

• 调整窗口大小
• 改变字体
• 添加或者移除样式
• 内容改变，例如用户点击了输入框
• 伪类被激活
• 操纵class属性
• 脚本操纵DOM
• 计算offsetWidth和offsetHeight
• 设置style的一个属性

尽可能少地在 DOM Tree 中修改 classes

Reflows are unavoidable, but you can reduce their impact. Reflows不可避免，但是你可以减少影响。

a) Avoid setting multiple inline styles 避免设置多个内联样式 b) Apply animations with position fixed or absolute

Repaint (Redraw)

当元素的外观改变visibility的时候，一个repaint将会发生，但并不会影响布局。例如outline、visibility、background color

REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW? Efficient JavaScript