首先要有工具能够分析性能表现和瓶颈
打开 Chrome devtools 的 Performance 面板, 点击按钮或者使用快捷键(CMD + E)开始记录性能
?...在本次绘制过程中, 共消耗时间 0.63ms + 1.04ms = 1.67ms, 其中 JavaScript 和 Paint 阶段耗时较多
另外还有一个查看实时 FPS 的工具, 打开 More tools...CSS 动画省略了 JavaScript 执行耗时, 只用了 0.49ms 的时间就完成了一帧的绘制
接下来思考一个问题, 如果主线程被阻塞了, CSS动画会有什么表现呢?..., 在阻塞期间, 动画卡顿, 用户操作事件无法响应, 我们要避免长时间阻塞的行为
如何避免呢?..., 动画就不会卡顿了
react 的 fiber 架构也是基于 requestIdleCallback 实现的, 并且在不支持的浏览器中提供了 polyfill
总结
一个绘制过程分为 JavaScript