通过css来开启硬件加速提升网页应用流畅性

OECOM

发布于 2020-07-01 18:04:11

1.2K0

发布于 2020-07-01 18:04:11

文章被收录于专栏：OECOM

在进行网页开发中，经常会接触都网页的动画，例如css3的animations, transforms 以及 transitions，有时会发现有这些的页面运行起来会感觉很卡顿，非常不流畅，和预期的相比相差很多。原因是这些效果不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行，所以会显得很卡顿，不流畅。那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。

现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。

例如

.cube { 
   -webkit-transform: translate3d(250px,250px,250px) 
   rotate3d(250px,250px,250px,-120deg) 
   scale3d(0.5, 0.5, 0.5); 
}

但是有的时候我们做的是2d的应用，但是还是需要开启GPU加速来使页面流畅，这时，我们可以采用一种方法来欺骗浏览器开启GPU加速模式

例如我们可以用transform: translateZ(0); 来开启硬件加速。

.cube { 
   -webkit-transform: translateZ(0); 
   -moz-transform: translateZ(0); 
   -ms-transform: translateZ(0); 
   -o-transform: translateZ(0); 
   transform: translateZ(0); 
   /* Other transform properties here */ 
}

当我们使用CSS transforms 或者 animations时Chome和Safari可能会有页面闪烁的效果，可以使用下面的代码来解决这个问题，请看代码

.cube { 
   -webkit-backface-visibility: hidden; 
   -moz-backface-visibility: hidden; 
   -ms-backface-visibility: hidden; 
   backface-visibility: hidden; 
  
   -webkit-perspective: 1000; 
   -moz-perspective: 1000; 
   -ms-perspective: 1000; 
   perspective: 1000; 
   /* Other transform properties here */ 
}

在webkit内核的浏览器中，还有一个可行的方法：

.cube { 
   -webkit-transform: translate3d(0, 0, 0); 
   -moz-transform: translate3d(0, 0, 0); 
   -ms-transform: translate3d(0, 0, 0); 
   transform: translate3d(0, 0, 0); 
  /* Other transform properties here */ 
}

需要提醒的就是只对需要进行的动画效果的元素使用上面的方法，使用GPU可能会导致严重的性能问题，因为它增加了内存的使用，而且它会减少移动端设备的电池寿命。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015-09-11，如有侵权请联系 cloudcommunity@tencent.com 删除

css