在了解重绘与回流的时,看到了这个概念,决定一探究竟
原理
是利用 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);
}