移动端的性能陷阱

减少对DOM元素的操作

  • repaint -简单的来说就比如给某个元素加个颜色叫做重绘
  • reflow -简单的来说比如给某个元素加个padding,改个margin,叫做回流

尽量缓存能够缓存的数据

用CSS3-transform代替DOM来做动画

  • 请记住,不要给非static元素增加css3动画,如absolute和relative,性能开销会成倍增加
  • 适当地采用硬件加速(用手机GPU渲染),如用canvas画图片。适当,适当,适当。

例如 transform:translate3d(0,0,0) 这句话虽然没有做任何动画,但是它告诉了手机我要采用硬件加速。

原文地址:https://www.cnblogs.com/can-i-do/p/6912756.html