JavaScript事件循环及宏任务微任务原理解析

在学习 JavaScript 过程中，事件循环机制是必须要掌握的知识点之一。本文将详细介绍 JavaScript 事件循环机制的原理，以及宏任务和微任务的概念及异同点，其中包含两个示例说明。

事件循环机制的原理

JavaScript 是单线程执行的，意味着同一时间只能执行一段代码。然而在 Web 世界中，我们需要处理大量的事件，比如鼠标点击、异步请求等。如果执行这些事件的时候还需要等待之前的事件执行完毕，那会导致页面卡顿，影响用户体验。因此我们需要一种机制来异步处理这些事件，这就是事件循环机制。

事件循环机制的原理就是不断地从事件队列中取出事件并执行，当队列为空时，就等待新的事件进入队列。事件的触发可以是用户交互、定时器、网络请求等。事件的回调函数会被分配到不同的队列中，分别是宏任务队列和微任务队列。

宏任务和微任务的概念及异同点

宏任务

宏任务就是当前 JavaScript 任务队列中的任务，同一时间只有一个宏任务在执行。在浏览器中，宏任务包括：页面渲染、用户交互事件、定时器等。

微任务

微任务是宏任务中的一段异步代码，和宏任务不同的是，同一时间可以有多个微任务在执行。在浏览器中，微任务包括：Promise、MutationObserver。

异同点

宏任务和微任务最大的区别在于执行时机的不同。

• 执行宏任务时会先执行同步任务，然后开始执行异步任务；
• 执行微任务时会等待同步任务和异步任务都执行完毕之后，再按照执行顺序执行所有的微任务。

示例说明

示例一

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

以上代码执行结果为：

script start
script end
promise1
promise2
setTimeout

解释：

1. console.log('script start'); 为同步任务，输出 "script start"；
2. setTimeout 为异步任务，被分配到宏任务队列中，等待同步任务执行完毕后执行；
3. Promise 为异步任务，被分配到微任务队列中。由于在执行完同步任务后，先执行微任务队列中的所有任务，因此先输出 "promise1"，再输出 "promise2"；
4. 最后执行宏任务队列中的任务，输出 "setTimeout"。

示例二

console.log('1');

setTimeout(function() {
  console.log('2');
}, 0);

Promise.resolve().then(function() {
  console.log('3');
}).then(function() {
  setTimeout(function() {
    console.log('4');
  }, 0);
});

console.log('5');

以上代码执行结果为：

1
5
3
2
4

解释：

1. console.log('1'); 为同步任务，输出 "1"；
2. setTimeout 为异步任务，被分配到宏任务队列中，等待同步任务执行完毕后执行；
3. Promise 为异步任务，先输出 "3"，然后继续执行微任务队列中的任务；
4. setTimeout 为异步任务，被分配到宏任务队列中，等待微任务队列中的任务执行完毕后执行；
5. 最后执行宏任务队列中的任务，输出 "2" 和 "4"。

以上就是 JavaScript 事件循环机制的原理和宏任务微任务的概念及异同点的详细说明，希望对你有所帮助。