返回

空闲回调事件的狂想曲——Event Loop

前端

在浏览器中，事件循环是一个负责处理事件并更新界面的系统。它是 JavaScript 的核心机制之一，也是 Web 开发人员必须了解的。

当一个事件发生时，比如用户点击按钮，浏览器会将该事件放入事件队列中。事件循环会从队列中取出事件并将其交给合适的事件处理函数。事件处理函数执行完毕后，浏览器会更新界面，然后继续从队列中取出下一个事件。

事件循环是一个不断运行的循环，它会在没有事件需要处理的时候进入空闲状态。在空闲状态下，事件循环会执行一些其他任务，比如垃圾回收。

了解事件循环的原理可以帮助我们更好地理解 JavaScript 的执行顺序和时机。这有助于我们编写出更健壮、更有效的 JavaScript 代码。

空闲回调函数

空闲回调函数是在主事件循环的空闲时间内执行的函数。它允许开发人员在主事件循环空闲时执行一些任务，而不会阻塞主线程。

空闲回调函数的典型用途包括：

  • 更新 UI
  • 运行动画
  • 执行计算密集型任务
  • 发送网络请求

空闲回调函数可以通过两种方式创建：

  • 使用 requestIdleCallback() 方法
  • 使用 requestAnimationFrame() 方法

requestIdleCallback() 方法会在主事件循环的空闲时间内执行回调函数。如果主事件循环没有空闲时间，回调函数就不会执行。

requestAnimationFrame() 方法会在屏幕刷新之前执行回调函数。如果屏幕刷新频率为 60Hz，则回调函数每秒会被调用 60 次。

微任务和宏任务

微任务和宏任务是两种不同的任务类型。微任务是优先级更高的任务，它们会在宏任务之前执行。

微任务的典型示例包括：

  • Promise.then()
  • setTimeout(fn, 0)
  • requestAnimationFrame()

宏任务的典型示例包括：

  • setTimeout(fn, 1000)
  • setInterval(fn, 1000)
  • XHR 请求

事件循环会先执行微任务，然后执行宏任务。这确保了优先级更高的任务能够首先执行。

浏览器线程

浏览器线程是负责执行 JavaScript 代码的线程。每个浏览器都有一个主线程和多个工作线程。

主线程负责执行主事件循环和处理用户交互。工作线程负责执行一些耗时的任务，比如计算密集型任务和网络请求。

工作线程可以并行执行，这可以提高浏览器的性能。

结论

Event Loop 是浏览器的重要组成部分，它负责处理事件并更新界面。了解 Event Loop 的工作原理可以帮助我们更好地理解 JavaScript 的执行顺序和时机。这有助于我们编写出更健壮、更有效的 JavaScript 代码。