position: relative
元素内部的lrtb值相比,使用CSS规范提供的变换是否更好地实现流畅而可靠的动画?
启用硬件加速后,我发现移动元素中会发生随机闪烁,特别是在方向变化期间(绝对定位元素)。因此,既然没有显着的博客使用这种方法,我想检查一下是否有某些专业技巧原因认为这是个坏主意。position: relative
元素内部的lrtb值相比,使用CSS规范提供的变换是否更好地实现流畅而可靠的动画?
启用硬件加速后,我发现移动元素中会发生随机闪烁,特别是在方向变化期间(绝对定位元素)。因此,既然没有显着的博客使用这种方法,我想检查一下是否有某些专业技巧原因认为这是个坏主意。除了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/)
使用变换而不是定位可以实现更好的性能。
我会从这篇优秀文章中引用一些内容,但你真的应该阅读整篇文章来了解全貌:
http://www.html5rocks.com/en/tutorials/speed/html5/
目前大多数浏览器只有在强烈提示一个HTML元素将受益于GPU加速时才会使用它。最强烈的提示是对其应用3D变换。现在你可能并不想应用3D变换,但仍然想从GPU加速中获得好处 - 没问题。只需应用恒等变换即可:
transform: translateZ(0);
这背后的原因是,您将 CPU 必须要处理的一部分工作委托给了 GPU。但请注意,这并不总是值得的,特别是在像 iPad 这样的移动设备上,这是你的环境:
请注意,应用此变换不能保证提高性能。它可能仅仅会增加 GPU 负担,消耗更多电池电量,但提供与之前相同的性能。因此,请谨慎使用此技术,并仅在真正获得性能提升时使用。
left:XXpx;top:XXpx;
? - TERMtmTransform(变换)在机器的GPU处理单元上运行,而当一个元素被定位时,CPU负责计算位置,因为它是布局的一部分。transform元素不是布局的一部分。