返回

浏览器事件循环模型：揭秘 JavaScript 异步执行的秘密

前端

JavaScript 的异步编程

现代 Web 开发中，异步编程至关重要，因为它允许我们执行长时间运行的任务，而不会阻塞应用程序的其他部分。在 JavaScript 中，我们有各种方法可以实现异步，包括 setTimeout()、setInterval() 和 Promises。

浏览器事件循环模型

理解 JavaScript 中的异步编程的关键在于理解浏览器事件循环模型。这是一个不断运行的循环，负责处理事件并执行任务。当一个事件发生时，它会被添加到一个队列中。当队列中的所有事件都被处理完后，浏览器会从队列中取出下一个任务并执行。

执行栈

执行栈是一个数据结构，它存储着当前正在执行的函数。当一个函数被调用时，它会被压入执行栈。当函数执行完成后，它会被弹出执行栈。

消息队列

消息队列是一个数据结构，它存储着等待处理的事件。当一个事件发生时，它会被添加到消息队列中。当执行栈中的所有函数都执行完成后，浏览器会从消息队列中取出下一个事件并执行。

宏任务和微任务

在 JavaScript 中，有两个类型的任务：宏任务和微任务。宏任务包括诸如 setTimeout()、setInterval() 和 I/O 操作等任务。微任务包括诸如 Promise.then() 和 MutationObserver 回调函数等任务。

宏任务和微任务之间的区别在于，微任务会在宏任务之前执行。也就是说，当执行栈中的所有宏任务都执行完成后，浏览器会执行消息队列中的所有微任务，然后再执行下一个宏任务。

定时器的回调为何不会阻塞后续代码的执行？

定时器的回调是异步执行的，这意味着当定时器触发时，它的回调会被添加到消息队列中，而不是立即执行。浏览器会继续执行执行栈中的其他代码，直到执行栈中的所有函数都执行完成后，它才会从消息队列中取出定时器的回调并执行。

总结

浏览器事件循环模型是 JavaScript 异步编程的基础。它是一个负责处理事件并执行任务的循环。在 JavaScript 中，有两个类型的任务：宏任务和微任务，微任务会在宏任务之前执行。定时器的回调是异步执行的，这意味着它们不会阻塞后续代码的执行。

常见问题解答

  1. 什么是事件循环？
    事件循环是一个不断运行的循环，它负责处理事件并执行任务。

  2. 执行栈是什么？
    执行栈是一个数据结构，它存储着当前正在执行的函数。

  3. 消息队列是什么？
    消息队列是一个数据结构，它存储着等待处理的事件。

  4. 宏任务和微任务有什么区别？
    宏任务是长时间运行的任务，如 setTimeout() 和 setInterval()，而微任务是短时间运行的任务，如 Promise.then() 和 MutationObserver 回调函数。

  5. 定时器的回调为何不会阻塞后续代码的执行？
    定时器的回调是异步执行的，这意味着它们被添加到消息队列中，而不是立即执行。浏览器会继续执行执行栈中的其他代码，直到执行栈中的所有函数都执行完成后，它才会从消息队列中取出定时器的回调并执行。

代码示例

// 使用 setTimeout() 设置一个定时器
setTimeout(() => {
  console.log('定时器的回调');
}, 1000);

// 主代码将继续执行
console.log('主代码');

在这个示例中，当 setTimeout() 被调用时，它的回调会被添加到消息队列中。浏览器会继续执行主代码，直到执行栈中的所有函数都执行完成后，它才会从消息队列中取出定时器的回调并执行。因此，"主代码" 会在 "定时器的回调" 之前打印到控制台中。