学习经过CSS硬件加速提高你网站的性能

知道咱们能够经过卸载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 能够致使重大的性能问题，由于它增长了内存的使用 — — — — 它也会影响在移动设备上的电池寿命。

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

原文连接：http://www.gbtags.com/gb/share/10089.htm