Question

我一直在为iPad和其他平板电脑编写一个webapp，并且在关注正确有效的定位和动画之后会出现很多视口问题。我最近提出了为所有自由浮动元素使用-webkit-transform的想法。我的问题是，使用CSS规范提供的转换对于平滑可靠的动画更好，而不是更改position:relative元素中的lrtb值吗？ 随着硬件加速，我发现移动元素中发生随机闪烁，特别是在方向变化时。（绝对定位的元素）所以，看到没有值得注意的博客使用这种方法，我想检查是否有一些专业的原因，这是一个坏主意。

Answer 1

再加上Luca的观点，这里有两篇文章测试翻译与位置对象的表现。

TLDR：

使用transform: translate(x,y);大大增加了CSS转换元素的绘制时间。

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

Why Moving Elements with translate is better than position absolute, top/left（保罗爱尔兰语）：

动画指南：



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



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



如果可以，请避免在每个帧上更改内联样式（jQuery animate（） - 样式），CSS中的声明性动画可以   通过浏览器方式进行优化。



使用2D变换代替绝对定位通常可以通过缩短绘制时间和更平滑来提供更好的FPS   动画。



使用时间轴框架的模式来调查什么会降低您的行为“Show Paint Rects”和“Render Composited Layer Borders”   良好的亲动作以验证元素的呈现位置。

Myth Busting transform:translate vs position top/left（骚动博客）：

初步结论



如果不使用过渡，设置顶部/左侧属性将比使用变换更快。



如果目标是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，耗尽更多电池，但提供与以前相同的性能。所以要小心这种技术，只有在你获得真正的表现胜利时才使用它。

CSS转换与改变绝对定位值

2 个答案: