CSS翻译与更改绝对定位值的区别

Question

我一直在为iPad和其他平板电脑编写一个Web应用程序，经过很多关于视口问题的努力，尤其是关于适当和高效的位置和动画。我最近想到了使用-webkit-transform对所有自由浮动元素进行操作的方法。我的问题是：与例如更改position: relative元素内部的lrtb值相比，使用CSS规范提供的变换是否更好地实现流畅而可靠的动画？ 启用硬件加速后，我发现移动元素中会发生随机闪烁，特别是在方向变化期间（绝对定位元素）。因此，既然没有显着的博客使用这种方法，我想检查一下是否有某些专业技巧原因认为这是个坏主意。

- TERMtm

Answer 1

除了Luca所说的，这里有两篇文章测试了翻译与位置对象的性能。

TLDR:

对于具有CSS转换的元素，使用transform: translate(x,y);可以大大降低绘制时间。

然而，对于没有过渡效果的元素，position: absolute;和top/left将更快。

为什么使用translate移动元素比使用position absolute、top/left更好？ (Paul Irish):

动画指南：

• 尽可能使用CSS关键帧动画或CSS转换。浏览器可以在此处大量优化绘制和合成。

• 如果需要JS-based动画，则使用requestAnimationFrame。避免使用setTimeout、setInterval。

• 如果可以，请避免在每个帧上更改内联样式（jQuery animate()风格），CSS中的声明性动画可以被浏览器更好地优化。

• 通常使用2D变换而不是绝对定位会提供更好的FPS，因为它可以通过更小的绘制时间和更平滑的动画来提供更好的性能。

• 使用时间轴帧模式来调查是什么导致您的行为变慢，“显示绘制矩形”和“渲染合成层边框”是验证元素正在呈现的位置的好方法。

翻译神话：transform:translate vs. position:top/left（Tumult Blog）：

主要结论

• 如果没有过渡效果，则设置top/left属性将比使用transform更快。

• 如果目标是WebKit，则使用translate属性进行转换并强制Safari/Mobile Safari进行图形加速速度最快（Chrome会自动完成此操作）。

如果合成非不透明项，在WebKit中强制启用图形加速会在Safari /移动版Safari中有巨大的性能提升，在Chrome中则会有适度提升。

如果仅合成不透明项，则在WebKit中强制启用图形加速将对性能产生负面影响。

注意:为了确保移动浏览器中的GPU加速转换，请使用 transform: translate3d(0,0,0)。（http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/）

- fscof

---

不可见的元素怎么办？ - Kimchi Man

Answer 2

使用变换而不是定位可以实现更好的性能。

我会从这篇优秀文章中引用一些内容，但你真的应该阅读整篇文章来了解全貌：

http://www.html5rocks.com/en/tutorials/speed/html5/

目前大多数浏览器只有在强烈提示一个HTML元素将受益于GPU加速时才会使用它。最强烈的提示是对其应用3D变换。现在你可能并不想应用3D变换，但仍然想从GPU加速中获得好处 - 没问题。只需应用恒等变换即可：

transform: translateZ(0);

这背后的原因是，您将 CPU 必须要处理的一部分工作委托给了 GPU。但请注意，这并不总是值得的，特别是在像 iPad 这样的移动设备上，这是你的环境:

请注意，应用此变换不能保证提高性能。它可能仅仅会增加 GPU 负担，消耗更多电池电量，但提供与之前相同的性能。因此，请谨慎使用此技术，并仅在真正获得性能提升时使用。

- Luca

---

我的问题是，我是否应该使用翻译来完全管理我的动画，还是坚持为动画目标设置 left：XXpx;top：XXpx;？ - TERMtm

Answer 3

Transform（变换）在机器的GPU处理单元上运行，而当一个元素被定位时，CPU负责计算位置，因为它是布局的一部分。transform元素不是布局的一部分。

- grass