前言

js 是单线程的脚本语言，同个时间内只能做一件事，某些情况下容易造成主线程阻塞，事件循环机制使得 js 能够处理异步操作，例如定时器、事件监听等，这样能够提高程序性能

异步和同步

先来弄清楚什么是异步和同步

同步：操作会按顺序执行，需要等待上一个操作执行完成，这种处理会导致程序的响应速度变慢，同时会导致资源浪费

异步：操作可以同时进行，不需要等待上一个操作完成，例如 promise 或者 setTimeout

宏任务和微任务

在事件循环机制中，分为宏任务和微任务

宏任务包括 script 、 setTimeout 、 setInterval 等

微任务包括 promise

事件循环机制的执行过程

1. 执行同步任务，遇到异步任务，将其放入宏任务或者微任务队列
2. 当执行栈为空，处理微任务队列
3. 微任务处理完后，处理宏任务队列

代码示例

让我们来看一段代码，熟悉一下执行过程

let promise=new Promise((resolve,reject)=>{
  console.log(1);
  resolve();
  console.log(2);
})
setTimeout(function(){
  console.log(3);
},0)
promise.then(()=>{
  console.log(4)
}).then(()=>{
  console.log(5)
})
console.log(6);

读者可以先想一下输出结果

输出结果为：126453

• 先来执行同步代码，new Promise 构造函数，第一个和第二个直接输出 1、2
• 将 setTimeout 放入宏任务队列
• promise.then 放入微任务队列
• 继续输出同步代码，所以第三个输出 6
• 同步任务执行完毕，执行微任务队列的 promise.then ，第四个输出 4，再执行 .then ，第五个输出5
• 微任务处理完毕，处理宏任务队列的 setTimeout，第六个输出 3

最后

实际上，第一步执行的同步代码也属于宏任务，也就是一次事件循环是从宏任务开始，由宏任务结束

以上是笔者的理解，如有错误请指正