启用硬件加速：translate3d

Question

正如 David Walsh 简要介绍的那样 discusses，可以在 CSS.

中使用从零开始的 translate3d 属性强制硬件加速

它是这样工作的：

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

    /* more specific animation properties here */
}

我仍然不确定是否应该开始使用这种技术。尽管 none 会同时运行，但我在我的响应式网站上使用了很多转换，我希望为旧设备和高性能设备提供流畅的体验。

那么我的问题是：

上述技术是否改进了不透明度、宽度和位置（左、右、上、下）等过渡的执行？并且应该具备以上属性。
这有多跨浏览器？我对 IE8 和更低版本不感兴趣，但尤其是移动 Android、iOS 和 Windows Phone 设备应该从中受益。要添加什么代码以提高兼容性？
是否应将硬件启用代码添加到具有 transition 属性的每个元素？如果是这样，有没有办法将其改造成一个简单的 SASS 可以轻松使用的 mixin？

Answer 1

第三部分提示：

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

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

Answer 2

我一般可以说（根据我自己的经验）如果使用得当，它可以提高速度和性能（尤其是在 Android 和 iOS 上的 Web 视图中）。对所有元素应用硬件加速可能会适得其反，尤其是在内存较小的设备上。

我在渲染图像时经常使用它，我需要提高质量以使图像不模糊，并强制设备缓存整个图像。 Android 通常 "cuts of images" 当它的一部分在视口之外时。但要小心，当运行 on Android 时对许多元素应用硬件加速可能会使应用程序崩溃。同样的规则也适用于 iOS（即使 iOS 在网络视图中有更好的性能，所以你 "can do more"）。

它可以跨浏览器工作，但需要添加前缀。在 Android 上，我将它降至 4.2。
正如我所说，明智地使用它。将其应用于 class，然后仅将 class 设置为需要硬件加速的特定元素。当不再需要时，删除 class.

所以只在需要的时候使用它，并且只在当前需要它的元素上使用它。小心将它同时应用于很多元素。元素数量的限制很难说。但由于浏览器内存的原因，它在 desktop/iOS/Android 等

上会有所不同

不要使用位置动画，而是使用平移，这将提高动画的性能（尤其是在设备上）。

我不会在我的应用程序上删除硬件加速，因为那样它的性能会差很多:)

启用硬件加速：translate3d

Enabling hardware acceleration: translate3d

android

ios

css

animation

hardware-acceleration