引入EventLoop的原因:
- JS是单线程的
- JS发起的任务时,可能会造成阻塞
EventLoop的总体流程:
- 执行一个宏任务(栈中没有就从事件队列中获取)
- 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
- 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
- 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
- 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取,也就是 callbacke queue)
requestAnimationFrame 会在每次屏幕刷新的时候被调用,而requestIdleCallback 则会在每次屏幕刷新时,判断当前帧是否还有多余的时间,如果有,则会调用 requestIdleCallback 的回调函数,