启用硬件加速： translate3d答案

【问题标题】：Enabling hardware acceleration: translate3d启用硬件加速： translate3d
【发布时间】：2015-03-15 23:50:24
【问题描述】：

正如 David Walsh 简要介绍的 discusses，可以在 CSS 中使用从零开始的 translate3d 属性强制硬件加速。

它是这样工作的：

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

    /* more specific animation properties here */
}

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

那么，我的问题是：

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

【问题讨论】：

标签： android ios css animation hardware-acceleration

【解决方案1】：

第三部分的提示：

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

简而言之：随着每个新版本的推出，浏览器变得越来越智能，而作为一个人，你不可能比那些有时在渲染引擎上工作多年的一大群开发人员更聪明。

【讨论】：

这真的取决于您正在处理什么样的应用程序。我正在开发适用于 iOS 和 Android 的混合应用程序，并且强制硬件加速确实是必要的，并且正在做奇迹般的工作。您的回答应该更适合作为评论。

【解决方案2】：

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

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

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

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

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

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

【讨论】：