跳到主要内容

Event Loop

JavaScript 是一个单线程的语言。(不能两个线程同时操作DOM)

Event Loop 执行过程​

  1. 一开始整个脚本 script 作为一个宏任务执行
  2. 执行过程中，同步代码 直接执行，宏任务 进入宏任务队列，微任务 进入微任务队列。
  3. 当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完毕。
  4. 执行浏览器 UI 线程的渲染工作。
  5. 检查是否有 Web Worker 任务，有则执行。
  6. 执行完本轮的宏任务，回到步骤 2，依次循环，直到宏任务和微任务队列为空。

宏任务队列可以有多个，微任务队列只有一个。

  • 宏任务

    • script
    • setTimeout
    • setInterval
    • setImmediate
    • I/O
    • UI rendering

  • 微任务

    • MutationObserver
    • Promise.then()/catch()
    • 以 Promise 为基础开发的其他技术，例如 fetch API
    • V8 的垃圾回收过程
    • Node 独有的 process.nextTick

requestAnimationFrame​

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

Web Workers​

通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。