1. 为了支持定时器的实现,浏览器增加了延时队列
2. 通过 JavaScript 创建一个定时器时,渲染进程会将该定时器的回调任务添加到延迟队列中
3. 处理完消息队列中的一个任务之后,就开始执行延迟队列里面的任务。延迟队列会根据发起时间和延迟时间计算出到期的任务,然后依次执行这些到期的任务。等到期的任务执行完成之后,再继续下一个循环过程。通过这样的方式,一个完整的定时器就实现了
4. 使用 setTimeout 的一些注意事项
(1) 如果当前任务执行时间过久,会影响定时器任务的执行
(2) 如果 setTimeout 存在嵌套调用,那么系统会设置最短时间间隔为 4 毫秒
(3) 未激活的页面,setTimeout 执行最小间隔是 1000 毫秒
(4) 延时执行时间有最大值
(5) 使用 setTimeout 设置的回调函数中的 this 不符合直觉
5. 了解下 requestAnimationFrame 的工作机制,并对比 setTimeout,然后分析出 requestAnimationFrame 实现的动画效果比 setTimeout 好的原因
使用 requestAnimationFrame 不需要设置具体的时间,由系统来决定回调函数的执行时间,requestAnimationFrame 里面的回调函数是在页面刷新之前执行,它跟着屏幕的刷新频率走,保证每个刷新间隔只执行一次,如果页面未激活的话,requestAnimationFrame 也会停止渲染,这样既可以保证页面的流畅性,又能节省主线程执行函数的开销