性能优化

前端性能优化之reflow和repaint

摘取自 (segmentfault.com/a/119000000…)和(www.cnblogs.com/zhutao/p/65…)

reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯不少祖先元素（包括兄弟元素），这个时候浏览器要从新去渲染这个子元素相关联的全部元素的过程称为回流。

repaint：若是只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引发浏览器 repaint（重绘）。

repaint 的速度明显快于 reflow

下面状况会致使reflow发生

• 改变窗口大小
• 改变文字大小
• 内容的改变，如用户在输入框中敲字
• 激活伪类，如:hover
• 操做class属性
• 脚本操做DOM
• 计算offsetWidth和offsetHeight
• 设置style属性

优化技巧总结

• 减小浏览器的重排和重绘的发生。
• 不要使用table布局。
• css动画中尽可能只使用transform和opacity，这不会发生重排和重绘。
• 尽量地只使用css作动画。
• 避免浏览器的隐式合成。
• 改变复合层的尺寸。