返回

深入理解 JavaScript 执行机制与事件循环

前端

JavaScript 执行机制

JavaScript 是单线程语言，这意味着它一次只能执行一个任务。为了处理并发操作和保持用户界面的响应性，JavaScript 引入了事件循环机制。

常驻线程

JavaScript 有三个常驻线程：

  • JS 引擎线程： 解释执行 JavaScript 代码、处理用户输入和网络请求。
  • GUI 线程： 绘制用户界面，与 JS 引擎线程互斥。
  • HTTP 网络请求线程： 处理 HTTP GET 和 POST 请求，并在收到响应后通知 JS 引擎线程。

事件循环

事件循环是一个不断运行的循环，负责从任务队列中获取任务并将其传递给 JS 引擎线程执行。它由两个队列组成：微任务队列和宏任务队列。

微任务队列

微任务队列存储回调函数和 Promise 解析函数。每当 JS 引擎线程执行一个任务时，它都会先检查微任务队列中是否有任何待处理的任务。如果有，这些任务将立即执行。

宏任务队列

宏任务队列存储需要等待 GUI 线程或网络请求结果的任务。其中包括事件处理程序（例如 click 事件）和 setTimeout 函数。当 JS 引擎线程执行一个宏任务时，它会先处理所有待处理的微任务，然后再继续执行宏任务。

示例

console.log('同步任务 1'); // 同步任务

setTimeout(() => {
  console.log('宏任务'); // 宏任务
}, 0);

Promise.resolve().then(() => {
  console.log('微任务 1'); // 微任务
});

console.log('同步任务 2'); // 同步任务

在这个示例中，同步任务 1 和 2 将立即执行。宏任务将被添加到宏任务队列，并在微任务队列为空时执行。微任务 1 将被添加到微任务队列，并在宏任务队列之前执行。

优化性能

通过了解 JavaScript 执行机制和事件循环，开发者可以优化应用程序的性能：

  • 避免在微任务队列中执行长时间运行的任务。
  • 限制宏任务队列中任务的数量。
  • 优先考虑使用 Promise 和 async/await 而不是回调函数。
  • 适当使用 setTimeout 和 setInterval。

掌握这些概念至关重要，可以帮助开发者编写响应迅速且高效的 JavaScript 应用程序，从而改善用户体验和应用程序整体性能。