css3硬件加速

677 阅读1分钟
 在了解重绘与回流的时,看到了这个概念,决定一探究竟

原理

是利用 GPU 进行渲染,减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint,所以能大大提高网页的性能。

使用场景

动画卡顿在移动web开发的过程中是会经常遇到的,解决这个问题,一般都会用到css3开启硬件加速

如何开启GPU加速

使用特定的css语句就可以开启,比如使用 translate3d() rotate3d() scale3d() 这几个方法,我们就可以使用GPU加速了。当不需要对元素应用3d变换效果时,可以使用transform: translateZ(0)触发硬件加速,以下包含所有浏览器前缀

.cube {
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
}

参考文章