1

我创造了这个小提琴；红色框使用 CSSleft属性进行动画处理，蓝色框使用 CSS TransformTranslateX属性进行动画处理。

在 Chrome 21 中，两个动画的性能相同，都运行流畅。

但是在 Safari（适用于 Windows）中，蓝色的动画流畅，而红色的动画则滞后。（似乎蓝色的是硬件加速的，而红色的不是）

第一个问题是，最好的选择是什么？哪一个整体上更好？（更多浏览器等支持）

接下来，没有任何方法可以硬件加速 Safari 中的动画left和topCSS 属性吗？（由于我想实际将 adiv移到窗口外，我认为使用left属性更好。）

4

1 回答 1

1

Translate 可以在不影响 DOM 中的位置的情况下移动对象。尽管它明显地移动到屏幕上的另一个位置，但 DOM 不受影响。这就是为什么翻译功能的性能通常更好的原因。

请注意，您不会在每个浏览器中看到相同的性能特征。

这是不同翻译/移动功能的 JSPerf 概述。滚动到底部以查看每个浏览器的统计信息。

它很可能会在未来发生变化。

于 2012-08-22T13:15:06.950 回答