(四)setTimeout 是如何实现的

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 也会停止渲染,这样既可以保证页面的流畅性,又能节省主线程执行函数的开销

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章