android - 开启硬件加速 : translate3d

Question

大卫沃尔什简要介绍 discusses , 可以使用 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 混合宏？

Answer 1

第三部分的提示:

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

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