前端性能优化之回流和重绘

回流和重绘优化

  1. translate替代top改变
  2. opacity替代visibility
  3. 不要一条一条的修改DOM的样式，预先定义好class，然后修改DOM的className
  4. 把DOM离线后修改，比如：先把DOM给display:none（有一次reflow），然后你修改100次，然后再把它显示出来
  5. 不要把DOM节点的属性值放在一个循环里面当成循环里的变量
  6. 不要使用table布局，可能一个很小的改动都会造成整个table的布局
  7. 动画实现的速度选择
  8. 对于动画新建图层
  9. 启用GPU硬件加速

Chrome创建图层的的条件（图层的作用是让回流和重绘都在一个区域里进行，也就是硬件加速）

  1. 3D或透视变换（prespective transform）CSS属性
  2. 使用加速视频解码的<video>节点
  3. 拥有3D（webGL）上下文或加速的2D上下文的<canvas>节点
  4. 混合插件（如：flash）
  5. 对自己的opacity做CSS动画或使用动画webkit变换的元素
  6. 拥有加速CSS过滤器的元素
  7. 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
  8. 元素有z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhaokh/p/13414150.html