我一直在为iPad和其他平板电脑编写一个webapp,在经历了很多视口问题后,我考虑到了适当和有效的定位和动画。我最近想到了使用-webkit-transform来处理我所有的自由浮动元素。我的问题是,**使用CSS规范提供的转换是否比更改内部的lrtb值更能获得平滑可靠的动画效果position:relative
元素?**在硬件加速的情况下,我发现移动元素会发生随机 Flink ,尤其是在方向变化时。(绝对定位元素)因此,鉴于没有著名的博客使用这种方法,我想检查一下是否有一些专业提示的原因,这是一个坏主意。
2条答案
按热度按时间c6ubokkw1#
为了补充Luca的观点,这里有两篇测试平移与位置对象性能的文章。
TLDR:
使用
transform: translate(x,y);
可以大大减少对具有CSS过渡的元素的绘制时间。但是,如果在没有过渡的元素上使用,
position: absolute;
top/left
将更快。Why Moving Elements with translate is better than position absolute, top/left(保罗爱尔兰语):
动画指导原则:
Myth Busting transform:translate vs position top/left(动荡博客):
主要结论
注:为了确保移动的浏览器中的GPU加速转换,请使用
transform: translate3d(0,0,0)
。(http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/)nhhxz33t2#
有可能利用变换而不是位置来实现更好的性能。
我将从这篇优秀的文章中引用一些片段,但你真的应该读它得到整个画面:
http://www.html5rocks.com/en/tutorials/speed/html5/
目前,大多数浏览器只有在有明显迹象表明HTML元素将受益于GPU加速时才使用GPU加速。最明显的迹象是对它应用了3D转换。现在,您可能并不真的想应用3D转换,但仍然可以从GPU加速中受益--没问题。只需应用恒等转换:
这背后的原因是,您将CPU必须执行的一些工作委派给GPU,但要考虑周全,因为这不一定总是值得的,尤其是在iPad等移动的设备上,这就是您的环境:
请注意,应用此转换并不能保证提高性能。它可能只是提高GPU,消耗更多电池,但提供与以前相同的性能。因此,请小心使用此技术,只有在您体验到真正的性能优势时才使用它。