学习通过CSS硬件加速提升你网站的性能_html/css_WEB-ITnose

知道我们可以通过卸载CSS图形特性到GPU（图形处理单元）来硬件加速CSS的图形特性，以获得在浏览器中的更好渲染效果吗？

如今大多数计算机都有适合显卡的硬件加速功能。因此，我们就可以为那些大功耗的利用GPU的能量，进而我们的网站和应用可以在CPU上的浏览器中运行得更快。

在这篇文章，我们将 CSS 硬件加速应用在桌面和移动浏览器上。

在桌面和手机浏览器上的CSS硬件加速

有没有想过一些 CSS 动画怎么如此顺利运行在浏览器中?

CSS 动画、 转换和过渡并不会自动进行GPU 加速，取而代之从浏览器的较慢的渲染引擎执行。那么怎么精确地强制浏览器切换到 GPU 模式呢?许多浏览器都提供了通过某些 CSS 规则进行 GPU 加速。

目前，一些浏览器像Chrome、 火狐、 Safari、 IE9 + 和最新版本的欧鹏浏览器都配备了硬件加速功能；它们只是当有迹象表明一个DOM元素要使用它的时候才会使用到。

例如：

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

 

在某些情况下，您可能不希望 在元素上进行3D 转换，但是仍然利用 GPU 加速。那时就可以使用几个简单的 CSS 属性，诱使浏览器触发 GPU 加速。

即使我们不在 3D 空间中创建动画元素，我们也可以启用 3D 渲染。至少，"transform:translateZ(0);"可以宣称触发 GPU 加速在现代的桌面和移动浏览器中。这似乎是最有效的触发 GPU 加速的方法(包括所有的浏览器前缀)：

1. 　.cube {
2. 　　-webkit-transform: translateZ(0);
3. 　　-moz-transform: translateZ(0);
4. 　　-ms-transform: translateZ(0);
5. 　　-o-transform: translateZ(0);
6. 　　transform: translateZ(0);
7. 　　/* Other transform properties here */
8. 　　}

 

在 Chrome 和 Safari中， 当我们使用 CSS 转换或动画可能会看到闪烁的效果。下面的声明可以用于解决此问题：　

1. 　.cube {
2. 　　-webkit-backface-visibility: hidden;
3. 　　-moz-backface-visibility: hidden;
4. 　　-ms-backface-visibility: hidden;
5. 　　backface-visibility: hidden;
6. 　　-webkit-perspective: 1000;
7. 　　-moz-perspective: 1000;
8. 　　-ms-perspective: 1000;
9. 　　perspective: 1000;
10. 　　/* Other transform properties here */
11. 　　}

 

 另外一种似乎可以解决Webkit引擎的桌面和移动浏览器问题的方式是使用translate3d：

1. 　　.cube {
2. 　　-webkit-transform: translate3d(0, 0, 0);
3. 　　-moz-transform: translate3d(0, 0, 0);
4. 　　-ms-transform: translate3d(0, 0, 0);
5. 　　transform: translate3d(0, 0, 0);
6. 　　/* Other transform properties here */
7. 　　}

 

 本地移动应用程序也能利用设备的GPU加速——这就是为什么人们都知道它们表现的比Web应用程序更好。使用硬件加速在移动设备上尤其有用，这是因为它可以有效减少设备上的资源消耗。

总结：

我们所涉及的方法应仅用于我们正在进行动画处理的元素。它们可以提升在2D动画上的表现，但是仅仅为了硬件加速而把它们应用在所有的上面是不明智的。

小心地使用它们的每一种方式，并且只在需要体验真正的表现性能的时候。不必要地使用 GPU 可以导致重大的性能问题，因为它增加了内存的使用 — — — — 它也会影响在移动设备上的电池寿命。

你有没有试过在项目中使用这些方法呢？如果有试过，请大家分享一下哪一个是最有效和表现最好的。