Android 启用硬件加速：translate3d

正如大卫·沃尔什（David Walsh）简要介绍的那样，在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设备应该会从中受益。为了提高兼容性，需要添加哪些代码

是否应将硬件启用代码添加到具有

转换属性的每个元素中？如果是这样的话，有没有一种方法可以将它修改成一个简单的SASS mixin，使其易于使用

---

对第三部分的提示：

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

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

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

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

它可以跨浏览器工作，但需要加前缀。在安卓系统上，我使用的是4.2

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

因此，只在需要时使用它，并且只在当前需要它的元素上使用它。请注意同时将其应用于许多元素。元素的数量限制是什么很难说。但由于浏览器内存的原因，在桌面/iOS/Android等平台上会有所不同

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

---

我不会在我的应用程序上删除硬件加速，因为这样它的性能会差得多：）

这取决于您使用的是哪种应用程序。我正在为iOS和Android开发一个混合应用程序，强制硬件加速是非常必要的，并且正在做着奇迹般的工作。你的回答应该更适合作为评论。