12

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

4

2 回答 2

14

补充 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/）

于 2013-08-29T16:46:08.083 回答
13

it is possible to achieve better performances with transform rather than position.

I'll quote a few bits from this excellent article, but you should really read it to get the whole picture:

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

Currently most browsers only use GPU acceleration when they have a strong indication that an HTML element would benefit from it. The strongest indication is that a 3D transformation was applied to it. Now you might not really want to apply a 3D transformation, but still gain the benefits from GPU acceleration - no problem. Simply apply the identity transformation:

-webkit-transform: translateZ(0);

reason behind this, is that you delegate some of the work that the CPU has to do, to the GPU, however be considerate as this won't necessarily be always worth, especially on a mobile device like the iPad, that is your environment:

Please be warned that this applying this transformation does not guarantee to help your performance. It might simply crank up your GPU, use up more battery but deliver the same performance as before. So be careful with this technique and only use it if you experience a true performance win.

于 2012-06-19T13:00:37.977 回答