启用硬件加速：translate3d

Question

正如 David Walsh 简要讨论的那样，可以使用 CSS 中从零开始的 translate3d 属性强制硬件加速。

它的工作原理如下：

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

    /* more specific animation properties here */
}

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

那么我的问题是：

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

Answer 1

第三部分的提示：

\n\n

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

\n\n

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

\n