启用硬件加速: translate3d

Question

正如大卫沃尔什( David )简要介绍的那样，可以在CSS中使用基于零的讨论属性强制硬件加速。

它的工作方式如下：

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

    /* more specific animation properties here */
}

我仍然不确定是否应该开始使用这种技术。我在我的响应网站上使用了许多转换，虽然没有一个会同时运行，我希望给老设备和高性能设备提供一个平滑的体验。

那么，我的问题是：

1. 上述技术是否改善了诸如不透明度、宽度和位置(左、右、上、下)等转换的执行？并应具备上述属性。
2. 这是怎么跨浏览器的？我不感兴趣的IE8和更低，但特别是移动安卓，iOS和Windows设备应该从中受益。为了更好的兼容性，需要添加哪些代码？
3. 是否应该将启用硬件的代码添加到每个具有transition属性的元素？如果是这样的话，是否有一种方法可以将它修改成一个简单的SASS混合液，这样就可以很容易地使用？

Answer 1

对第三部分的提示：

您应该记住，浏览器已经优化了布局和设计动画。强制每个动画元素加速硬件是适得其反的，因为你取消了任何浏览器的优化。在考虑使用此类黑客之前，您应该始终使用适当的工具来度量您的网站呈现性能。

简而言之:每一个新版本的浏览器都变得越来越聪明，作为一个人，你不能比一大群开发人员更聪明，他们有时在渲染引擎上工作多年。

Answer 2

1. 我可以说(根据我自己的经验)，如果使用得当，它可以提高速度和性能(尤其是在安卓和iOS上的web视图中)。将硬件加速应用于所有元素可能会适得其反，特别是在内存较少的设备上。

我在渲染图像时经常使用它，我需要提高质量，这样图像就不会模糊，并迫使设备缓存整个图像。当Android的部分在视口之外时，它通常会“剪切图像”。但是要小心，在Android上运行时，在许多元素上应用硬件加速会使应用程序崩溃。同样的规则也适用于iOS (即使iOS在web视图中具有更好的性能，所以您“可以做更多”)。

1. 它跨浏览器工作，但需要前缀。在Android上，我使用的是4.2。
2. 就像我说的，明智地使用它。将其应用于类，然后只将类设置为需要硬件加速的特定元素。当不再需要时，删除类。

因此，只在需要的时候使用它，并且只在当前需要它的元素上使用。同时要小心地将它应用到许多元素中。元素数量的限制很难说出来。但是由于浏览器内存的原因，它在桌面/iOS/Android等系统上会有所不同。

不要使用位置动画，而是使用转换，这将提高动画的性能(特别是在设备上)。

我不会删除我的应用程序上的硬件加速，因为那样的话，它的性能会更糟:)