启用硬件加速：translate3d

由于David Walsh简要地描述了discusses，所以可以使用CSS中基于零的translate3d属性强制进行硬件加速。启用硬件加速：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混音器，可以轻松使用？

来源

2015-01-17 Bram Vanroy

的暗示，第三部分：

你应该记住，浏览器已经优化的布局和设计动画。当您取消任何浏览器优化时，强制硬件加速到每个动画元素都会适得其反。甚至在考虑使用这种黑客攻击之前，您应该始终使用适当的工具来衡量您的网站渲染性能。

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

来源

2015-01-26 10:26:41 feeela

这实际上取决于什么样的应用您正在研究。我正在为iOS和Android开发一款混合应用程序，并迫使硬件加速是非常必要的，并且正在做出奇迹般的工作。你的回答应该更适合作为评论。 –

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

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

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

所以只有在需要的时候才使用它，并且只在当前时刻需要的元素上使用它。请小心将它同时应用于很多元素。元素数量的限制很难说。但由于浏览器内存的它会在桌面上不同的/的iOS /安卓等

不要用动画的位置，而不是使用翻译，这将提高了动画（尤其是设备）的性能。

我不会对我的应用程序中删除硬件加速，因为那将执行差很多:)

来源

2015-01-30 13:24:09

启用硬件加速：translate3d

回答

相关问题