性能优化

223 阅读1分钟

前端性能优化之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做动画。
  • 避免浏览器的隐式合成。
  • 改变复合层的尺寸。