浏览器系列之2-如何动起来的?(更新中)

46 阅读1分钟

引入EventLoop的原因:

  1. JS是单线程的
  2. JS发起的任务时,可能会造成阻塞

EventLoop的总体流程:

  1. 执行一个宏任务(栈中没有就从事件队列中获取)
  2. 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
  3. 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
  4. 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
  5. 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取,也就是 callbacke queue)

requestAnimationFrame 会在每次屏幕刷新的时候被调用,而requestIdleCallback 则会在每次屏幕刷新时,判断当前帧是否还有多余的时间,如果有,则会调用 requestIdleCallback 的回调函数,