CSS转换与更改绝对定位值

7uzetpgm  于 2022-12-15  发布在  其他
关注(0)|答案(2)|浏览(101)

我一直在为iPad和其他平板电脑编写一个webapp,在经历了很多视口问题后,我考虑到了适当和有效的定位和动画。我最近想到了使用-webkit-transform来处理我所有的自由浮动元素。我的问题是,**使用CSS规范提供的转换是否比更改内部的lrtb值更能获得平滑可靠的动画效果position:relative元素?**在硬件加速的情况下,我发现移动元素会发生随机 Flink ,尤其是在方向变化时。(绝对定位元素)因此,鉴于没有著名的博客使用这种方法,我想检查一下是否有一些专业提示的原因,这是一个坏主意。

c6ubokkw

c6ubokkw1#

为了补充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()-style),如果可以的话,CSS中的声明性动画可以通过浏览器进行更多的优化。
  • 使用2D变换而不是绝对定位通常会通过更短的绘制时间和更平滑的动画来提供更好的FPS。
  • 使用时间轴帧的模式来调查是什么减慢了你的行为“显示绘制矩形”和“渲染合成层边界”是很好的pro-move来验证你的元素正在渲染的位置。

Myth Busting transform:translate vs position top/left(动荡博客):
主要结论

  • 如果不使用过渡,设置top/left属性将比使用变换更快。
  • 如果目标是WebKit,最快的帧速率将来自于使用translate属性的过渡,并强制Safari/移动的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/

nhhxz33t

nhhxz33t2#

有可能利用变换而不是位置来实现更好的性能。
我将从这篇优秀的文章中引用一些片段,但你真的应该读它得到整个画面:
http://www.html5rocks.com/en/tutorials/speed/html5/
目前,大多数浏览器只有在有明显迹象表明HTML元素将受益于GPU加速时才使用GPU加速。最明显的迹象是对它应用了3D转换。现在,您可能并不真的想应用3D转换,但仍然可以从GPU加速中受益--没问题。只需应用恒等转换:

transform: translateZ(0);

这背后的原因是,您将CPU必须执行的一些工作委派给GPU,但要考虑周全,因为这不一定总是值得的,尤其是在iPad等移动的设备上,这就是您的环境:
请注意,应用此转换并不能保证提高性能。它可能只是提高GPU,消耗更多电池,但提供与以前相同的性能。因此,请小心使用此技术,只有在您体验到真正的性能优势时才使用它。

相关问题