「译」使用 CSS 硬件加速提升网站性能

作者： Guil Hernandez
原文链接：Increase Your Site’s Performance with Hardware-Accelerated CSS

你知道我们可以把图像相关的 CSS 特性交给 GPU(图像处理单元) 处理，以利用硬件加速在浏览器中获得更好的渲染性能吗？

当今的大多数电脑都有可用于硬件加速的显卡。因此，我们可以利用这些 GPU 资源去处理那些比较耗性能的特性，这样我们的网站和应用在浏览器中就能获得比单纯用 CPU 处理更好的性能表现。

这篇文章里，我们会讲到桌面和手机端浏览器的 CSS 硬件加速。

桌面和手机端浏览器中的 CSS 硬件加速

你有没有想过为什么有些 CSS 动画在浏览器中看起来比其他的更流畅些？

CSS animations, transforms 和 transitions 默认并不会启用 GPU 加速，而是被浏览器内部的（比较慢的）软件引擎渲染。那么到底是什么强制浏览器切换到 GPU 模式呢？许多浏览器通过一些特定的 CSS 规则启用 GPU 加速。

当前，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);
}

某些时候，你可能并不需要 3D 变换但仍然想利用硬件加速。这时候有几个非常顺手的 CSS 特性可以用来触发浏览器的 GPU 加速。

尽管我们的元素并不是在 3D 空间中做动画，我们仍然可以启用 3D 渲染。闲话休提，transform: translateZ(0); 声明在桌面和手机端浏览器中都会触发 GPU 加速。看起来这是触发 GPU 加速的最有效的方式了（添加了所有浏览器前缀）：

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

在 Chrome 和 Safari 中使用 CSS transforms 时可能会有闪烁。下面这些声明可以解决这个问题：

.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 内核的桌面和手机浏览器中的方法是使用 translate3d：

.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 加速，这也就是为什么大家一直以来的印象都是原生应用要比网页应用更流畅一些。在手机上使用硬件加速来降低资源消耗是非常有必要的。

结论

我们介绍的这些方法应该只用于需要动画的元素。这可以提高 2D 变换的性能，不过把这种方法用于所有元素绝不是一个好主意。

谨慎使用这些方法，只有当你遇到性能瓶颈时才需要用它们。滥用 GPU 加速将导致严重的性能问题，因为硬件加速会占用大量内存 -- 而且还会影响电池续航。

你在你的项目中用过这些方法吗？如果用过，请分享一下哪些方法最有效性能最好。