CSS 动画省略了 JavaScript 执行耗时, 只用了 0.49ms 的时间就完成了一帧的绘制
接下来思考一个问题, 如果主线程被阻塞了, CSS动画会有什么表现呢?...使用硬件加速后, 绘制过程将不再占用主线程, 直接在 GPU 上完成
因此, 点击按钮阻塞主线程, 也并不会影响动画, 你可以亲自试一试
使用 JS 动画
首先使用 setInterval 实现动画循环...不管怎么样, 长时间占用主线程都是一种很差的操作, 在阻塞期间, 动画卡顿, 用户操作事件无法响应, 我们要避免长时间阻塞的行为
如何避免呢?...可以将长任务划分为一个个短任务, 在主线程空闲时, 按顺序一个个执行. 怎么知道主线程是否空闲呢?...requestIdleCallback 就是我们想要的
requestIdleCallback 接收一个 callback 函数作为参数, 会在主线程空闲时, 按注册顺序逐个执行 callback
将