使用 Framer Motion 时,除了当前方案,还有哪些方法可以解决大量元素入场动画的卡顿问题?
考察说明
考察动画性能优化知识、浏览器渲染原理及 Framer Motion 的专用优化手段
回答思路
- 能指出大量元素同时入场导致主线程负担的核心原因
- 能提出 Framer Motion 的专用优化选项,如采用 transform 和 opacity 动画、使用 will-change 提示
- 能提出通用 Web 性能优化手法,如减少元素数量、分批入场、使用 Web Animations API 或 CSS 动画
- 能结合渲染机制说明为什么 transform 和 opacity 能避免重排重绘