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 */
}

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

我的问题是：

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

Answer 1

对第三部分的暗示：

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

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

Answer 2

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

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

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

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

不要使用位置进行动画处理，而是使用翻译，这会提高动画的效果（特别是在设备上）。

我不会删除我的应用程序上的硬件加速，因为它会更糟糕地执行：）

启用硬件加速：translate3d

2 个答案: