揭秘JS中的宏任务和微任务之谜，深入理解事件循环过程

宏任务和微任务的定义

• 宏任务： 宏任务是JavaScript引擎执行的任务，包括脚本执行、事件处理（如点击、鼠标移动等）、setTimeout()、setInterval()等。宏任务按照先进先出的原则执行，即先进入队列的任务先执行。
• 微任务： 微任务是JavaScript引擎执行的更小的任务，包括Promise.then()、MutationObserver()、requestAnimationFrame()等。微任务在宏任务执行完成之后立即执行，并且微任务按照先进先出的原则执行。

宏任务和微任务的执行顺序

在JavaScript中，宏任务和微任务的执行顺序遵循以下规则：

1. 主线程执行同步任务，直到遇到异步任务。
2. 主线程将异步任务放入宏任务队列或微任务队列。
3. 主线程继续执行同步任务，直到遇到下一个异步任务或宏任务队列或微任务队列为空。
4. 如果宏任务队列不为空，则主线程从宏任务队列中取出一个宏任务并执行。
5. 如果宏任务队列为空，且微任务队列不为空，则主线程从微任务队列中取出一个微任务并执行。
6. 重复步骤3-5，直到宏任务队列和微任务队列都为空。

浏览器实践

为了验证宏任务和微任务的执行顺序，我们可以使用浏览器控制台进行实践。首先，我们在HTML文件中输入以下代码：

<script>
  console.log(1);
  setTimeout(() => {
    console.log(2);
  }, 0);
  Promise.resolve().then(() => {
    console.log(3);
  });
  console.log(4);
</script>

然后，我们将此代码粘贴到浏览器控制台中并执行。我们可以看到，控制台输出的结果是：

1
4
3
2

这与我们之前对宏任务和微任务执行顺序的分析是一致的。首先，主线程执行同步任务，输出"1"和"4"。然后，主线程遇到异步任务setTimeout()和Promise.resolve()，并将它们放入宏任务队列和微任务队列中。主线程继续执行同步任务，直到遇到下一个异步任务或宏任务队列或微任务队列为空。此时，宏任务队列不为空，因此主线程从宏任务队列中取出setTimeout()并执行，输出"2"。然后，主线程继续执行同步任务，直到宏任务队列和微任务队列都为空。此时，微任务队列不为空，因此主线程从微任务队列中取出Promise.resolve()并执行，输出"3"。

总结

宏任务和微任务是JavaScript中两个重要的概念，它们决定了代码的执行顺序和异步操作的处理方式。通过本文的分析和浏览器实践，我们对宏任务和微任务有了更深入的理解。在实际开发中，我们可以利用宏任务和微任务来优化代码执行顺序，提高代码的可读性和可维护性。