启用硬件加速：translate3d

Question

正如David Walsh简要讨论的那样，可以通过CSS中基于零的translate3d属性来强制使用硬件加速。

具体做法如下：

.animClass {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;

    /* more specific animation properties here */
}

我仍然不确定是否应该开始使用这种技术。我在我的响应式网站上使用了许多过渡效果，但没有一个同时运行，我希望能够为旧设备和高性能设备提供流畅的体验。

那么，我的问题是：

1. 上述技术是否改进了诸如不透明度、宽度和位置（左、右、上、下）等过渡效果的执行？应该使用以上属性吗？
2. 这个技术在跨浏览器方面有多少兼容性？我不关心IE8及以下版本，但尤其是移动Android、iOS和Windows Phone设备应该从中受益。有哪些代码需要添加以实现更多兼容性？
3. 硬件启用代码应该添加到具有transition属性的每个元素中吗？如果是，有没有一种将其正确编写为简单的SASS mixin以便轻松使用的方法？

- Bram Vanroy

Answer 1

第三方提示：

请记住，浏览器已经优化了布局和设计动画。对每个动画元素强制使用硬件加速是适得其反的，因为这样会取消任何浏览器的优化效果。在考虑使用此类技巧之前，您应该始终使用适当的工具来测量您的网站渲染性能。

简而言之：随着每个新版本的推出，浏览器变得越来越智能化，您作为一个单独的人无法比一群有时会花费数年时间开发渲染引擎的开发人员更聪明。

- feeela

---

这真的取决于你正在开发什么类型的应用程序。我正在为iOS和Android开发一个混合应用程序，强制使用硬件加速确实是必要的，并且可以起到奇迹般的作用。你的回答应该更适合作为评论。 - Johan Sundén

Answer 2

1. 根据我的经验，如果明智地使用硬件加速，它可以提高速度和性能（特别是在Android和iOS的Web视图上）。但是将硬件加速应用于所有元素可能会产生反效果，尤其是对于内存较小的设备。

在渲染图像时，我经常使用它，需要提高质量以使图像不模糊，并强制设备缓存整个图像。当部分图像超出视口时，Android经常“裁剪图像”。但要小心，在Android上运行并将硬件加速应用于太多元素可能会导致应用程序崩溃。同样的规则也适用于iOS（即使iOS在Web视图中具有更好的性能，因此您“可以做更多”）。

2. 它可以跨浏览器工作，但需要前缀。在Android上，我使用它到4.2。

3. 正如我所说，明智地使用它。将其应用于类，然后仅将类设置为需要进行硬件加速的特定元素。不再需要时，请删除该类。

因此，只有在需要时才使用它，并且仅在当前需要它的元素上使用。小心不要同时将其应用于许多元素。很难说元素数量的限制是多少。但由于浏览器内存，它在桌面/iOS/Android等设备上会有所不同。

不要使用位置进行动画，而是使用translate，这将提高动画的性能（特别是在设备上）。

我不会删除应用程序上的硬件加速，因为否则它的性能将大大降低 :)

- Johan Sundén