TER*_*Mtm 7 css html5 web-applications css3 webkit-animation
我正在为iPad和其他平板电脑编写一个webapp,并且在关注正确有效的定位和动画之后会出现很多视口问题.我最近提出了为所有自由浮动元素使用-webkit-transform的想法.我的问题是,使用CSS规范提供的转换对于平滑可靠的动画更好,而不是例如更改position:relative元素内的lrtb值吗？
随着硬件加速,我发现移动元素中发生随机闪烁,特别是在方向变化时.(绝对定位的元素)所以,看到没有值得注意的博客使用这种方法,我想检查是否有一些专业的原因,这是一个坏主意.
再加上Luca的观点,这里有两篇文章测试翻译与位置对象的表现.
TLDR:
使用transform: translate(x,y);CSS转换大大增加了元素的绘制时间.
但是,position: absolute; top/left如果在没有过渡的元素上使用,会更快.
为什么使用translate移动元素比绝对位置,top/left(Paul Irish)更好:
动画指南:
如果可能的话,使用CSS关键帧动画或CSS过渡.浏览器可以在这里优化绘画和合成.
如果需要是基于JS的动画,请使用requestAnimationFrame.避免使用setTimeout,setInterval.
如果可以,请避免在每个帧上更改内联样式(jQuery animate() - 样式),CSS中的声明性动画可以通过浏览器方式进行优化.
使用2D变换而不是绝对定位通常会通过更短的绘制时间和更平滑的动画来提供更好的FPS.
使用时间轴框架的模式来调查什么会减慢您的行为"显示绘制矩形"和"渲染合成图层边框"是很好的前移,以验证元素的呈现位置.
神话爆破变换:翻译与位置上/下(Tumult Blog):
初步结论
如果不使用转换,设置顶部/左侧属性将比使用转换更快.
如果目标是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/)
通过变换而不是位置可以获得更好的性能.
我将从这篇优秀的文章中引用一些内容,但你应该真正阅读它以了解全貌:
http://www.html5rocks.com/en/tutorials/speed/html5/
目前,大多数浏览器只有在强烈表明HTML元素会从中受益时才使用GPU加速.最强烈的迹象是对其应用了3D变换.现在你可能不想真正想要应用3D转换,但仍然可以从GPU加速中获益 - 没问题.只需应用身份转换:
-webkit-transform: translateZ(0);
这背后的原因是,你将CPU必须做的一些工作委托给GPU,但要考虑周到,因为这不一定总是值得的,特别是在像iPad这样的移动设备上,这是你的环境:
请注意,应用此转换并不能保证能够帮助您提高性能.它可能只是简单地启动GPU,耗尽更多电池,但提供与以前相同的性能.所以要小心这种技术,只有在你获得真正的性能胜利时才使用它.