[笔记]开启GPU加速提升CSS3动画性能

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

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

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

通过设置transform: translate3d(0,0)或者tanslateZ(0)属性就可以做到，

原因是，通过设置该属性，浏览器会创建独立图层，图层中有动画的话用GPU进行硬件加速。

二、其他属性

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

• opacity
• filter

三、缺点

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!