CSS 翻译 vs 改变绝对定位值

Question

我一直在为 iPad 和其他平板电脑编写一个 web 应用程序，并且在考虑到正确和有效的定位和动画方面遇到了很多视口问题。 我最近想出了对所有自由浮动元素使用 -webkit-transform 的想法。 我的问题是，使用 CSS 规范提供的转换是否比更改position:relative元素中的 lrtb 值更适合平滑和可靠的动画？ 启用硬件加速后，我发现移动元素会随机闪烁，尤其是在方向变化期间。 （绝对定位的元素）所以，由于没有著名的博客使用这种方法，我想检查是否有一些专业提示的原因，这是一个坏主意。

Answer 1

补充 Luca 的观点，这里有两篇文章测试翻译与位置对象的性能。

TLDR：

使用transform: translate(x,y); 使用 CSS 过渡大大减少元素的绘制时间。

但是， position: absolute; 如果在没有过渡的元素上使用top/left会更快。

为什么使用 translate 移动元素优于绝对位置，上/左（Paul Irish）：

动画指南：

• 如果可能，请使用 CSS 关键帧动画或 CSS 过渡。 浏览器可以在这里优化绘画和合成。

• 如果需要是基于 JS 的动画，请使用 requestAnimationFrame。 避免 setTimeout、setInterval。

• 如果可以，请避免更改每一帧的内联样式（jQuery animate()-style），CSS 中的声明式动画可以通过浏览器进行更多优化。

• 使用 2D 变换而不是绝对定位通常会通过更短的绘制时间和更流畅的动画来提供更好的 FPS。

• 使用时间轴框架的模式来调查是什么减慢了你的行为 “显示绘制矩形”和“渲染复合层边框”是很好的专业动作来验证你的元素在哪里被渲染。

神话破坏变换：平移与位置顶部/左侧（Tumult 博客）：

主要结论

• 如果您不使用转换，设置顶部/左侧属性将比使用转换更快。

• 如果目标是 WebKit，最快的帧速率将来自使用带有 translate 属性的转换，并为 Safari/Mobile Safari 强制图形加速（Chrome 会自动执行此操作）。

• 如果合成不透明的项目，在 WebKit 中强制图形加速将在 Safari/Mobile Safari 中产生巨大的性能提升，在 Chrome 中会有适度的提升。

• 如果只合成不透明的项目，在 WebKit 中强制图形加速将对性能产生负面影响。

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

Answer 2

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

我将从这篇优秀的文章中引用一些内容，但你应该真正阅读它以了解整个情况：

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

当前，大多数浏览器仅在有强烈迹象表明 HTML 元素将从中受益时才使用 GPU 加速。 最强烈的迹象是对其应用了 3D 变换。 现在您可能并不想应用 3D 转换，但仍能从 GPU 加速中获益——没问题。 只需应用身份转换：

-webkit-transform: translateZ(0);

这背后的原因是，您将 CPU 必须做的一些工作委托给 GPU，但请注意，因为这不一定总是值得的，尤其是在 iPad 等移动设备上，这就是您的环境：

请注意，应用此转换并不能保证有助于您的表现。 它可能只是启动你的 GPU，消耗更多的电池，但提供与以前相同的性能。 所以要小心使用这种技术，只有在你体验到真正的性能胜利时才使用它。