JavaScript动画抖动的原因是什么？如何有效解决？

本文共计2444个文字，预计阅读时间需要10分钟。

目录+ 使用定时器实现动画出现的原理+ requestAnimationFrame 的前世今生+ requestAnimationFrame VS setInterval+ 参考资料+ 总结+ 前阶段时间在JavaScript中使用动画时，发现做出来的动画会出现卡顿现象。

目录

• 使用定时器实现动画出现卡顿的原因
• requestAnimationFrame 的前世今生
• requestAnimationFrame VS setInterval
• 参考资料
• 总结

前段时间在使用 JavaScript 做动画的时候发现做出来的动画会出现卡顿的现象，今天我们主要就来聊一下卡顿的原因以及如何解决这个问题。

使用定时器实现动画出现卡顿的原因

• 主要原因是浏览器无法确定定时器的回调函数的执行时机。以 setInterval 为例，当一个 setInterval 定时器被创建后，它的回调任务会被放到异步队列，只有当同步任务执行完成后，浏览器才会检查异步队列中是否有需要执行的异步任务，如果有，就取出执行，这样会使任务的实际执行时机比所设定的延迟时间要晚一些。

这个问题跟浏览器的事件循环机制有关，JavaScript 引擎在解析执行我们的代码的时候，遇到定时器，会调用浏览器 API，让定时器去进行倒计时，此时并不阻塞同步代码的执行，当定时器倒计时完毕，定时器回调会被放入宏任务队列等待执行。