Guidelines for animation
- Use CSS keyframe animation or CSS transitions, if at all possible. The browser can optimize painting and compositing bigtime here.
- If needs to be it’s JS-based animation, use
requestAnimationFrame
. AvoidsetTimeout
,setInterval
. - Avoid changing inline styles on every frame (jQuery
animate()
-style) if you can, declarative animations in CSS can be optimized by the browser way more. - Using 2D transforms instead of absolute positioning will typically provide better FPS by way of smaller paint times and smoother animation.
- Use Timeline Frame’s mode to investigate what is slowing down your behavior
- “Show Paint Rects” and “Render Composited Layer Borders” are good pro-moves to verify where your element is being rendered.
动画准则
- 在条件允许的情况下用keyframe animation 或者css transition 代替其他方式(比如settimeout,requestAnimationFrame,虽然后者性能已经很高了)浏览器可以实现优化绘制把重复工作整合
- 如果需要使用js定时器,请使用requestAnimationFram,避免使用settimeout和setinterval
- 避免在元素上直接改变内联style(就像jquer的animate()干的那样)如果可以,在css文件内声明动画将会更多的得到浏览器的优化方案支持
- 使用2Dtransform代替position:absolute动画,这样将会得到更好的fps帧和更流畅的动画效果(确保display:block或者display:inline-block)
- 使用 Timeline Frame’s模式(chrome内)检查是什么原因导致性能不足
- 使用“Show Paint Rects”和 “Render Composited Layer Borders”功能(chrome 的 rendering内)是一种不错的方式去查看你的页面元素渲染过程
时间: 2024-10-11 22:58:14