开启GPU加速提升CSS3动画性能

2018年02月10日Web前端

最近遇到了,由于css3中动画效果较多,导致的页面卡顿的问题。

一、利用3D开启硬件加速

除了优化我们的代码,我们还可以让GPU来代替CPU渲染页面。

通过设置transform: translate3d(0, 0, 0)或者tanslateZ(0)属性就可以做到, 原因是,通过设置该属性,浏览器会创建独立图层,图层中有动画的话用GPU进行硬件加速。

二、其他属性

还有其他的属性可以出发GPU的硬件加速

  • opacity
  • filter

三、缺点

  • 过多元素开启硬件加速的话,也是会影响性能的。
  • 使用GPU渲染会影响字体的抗锯齿效果。