知道我们可以通过卸载CSS图形特性到GPU（图形处理单元）来硬件加速CSS的图形特性，以获得在浏览器中的更好渲染效果吗？
如今大多数计算机都有适合显卡的硬件加速功能。因此，我们就可以为那些大功耗的利用GPU的能量，进而我们的网站和应用可以在CPU上的浏览器中运行得更快。
在这篇文章，我们将 CSS 硬件加速应用在桌面和移动浏览器上。
在桌面和手机浏览器上的CSS硬件加速
有没有想过一些 CSS 动画怎么如此顺利运行在浏览器中?
CSS 动画、 转换和过渡并不会自动进行GPU 加速，取而代之从浏览器的较慢的渲染引擎执行。那么怎么精确地强制浏览器切换到 GPU 模式呢?许多浏览器都提供了通过某些 CSS 规则进行 GPU 加速。
目前，一些浏览器像Chrome、 火狐、 Safari、 IE9 + 和最新版本的欧鹏浏览器都配备了硬件加速功能；它们只是当有迹象表明一个DOM元素要使用它的时候才会使用到。
例如：
在某些情况下，您可能不希望 在元素上进行3D 转换，但是仍然利用 GPU 加速。那时就可以使用几个简单的 CSS 属性，诱使浏览器触发 GPU 加速。
即使我们不在 3D 空间中创建动画元素，我们也可以启用 3D 渲染。至少，”transform:translateZ(0);”可以宣称触发 GPU 加速在现代的桌面和移动浏览器中。这似乎是最有效的触发 GPU 加速的方法(包括所有的浏览器前缀)：
在 Chrome 和 Safari中， 当我们使用 CSS 转换或动画可能会看到闪烁的效果。下面的声明可以用于解决此问题：
另外一种似乎可以解决Webkit引擎的桌面和移动浏览器问题的方式是使用translate3d：
本地移动应用程序也能利用设备的GPU加速——这就是为什么人们都知道它们表现的比Web应用程序更好。使用硬件加速在移动设备上尤其有用，这是因为它可以有效减少设备上的资源消耗。
总结：
我们所涉及的方法应仅用于我们正在进行动画处理的元素。它们可以提升在2D动画上的表现，但是仅仅为了硬件加速而把它们应用在所有的上面是不明智的。
小心地使用它们的每一种方式，并且只在需要体验真正的表现性能的时候。不必要地使用 GPU 可以导致重大的性能问题，因为它增加了内存的使用 — — — — 它也会影响在移动设备上的电池寿命。
你有没有试过在项目中使用这些方法呢？如果有试过，请大家分享一下哪一个是最有效和表现最好的。
原文链接：https://www.cnblogs.com/gbtagscom/p/5099533.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/17275
