JS事件循环之宏任务和微任务

JS事件循环之宏任务和微任务

众所周知，JS 是一门单线程语言，可是浏览器又能很好的处理异步请求，那么到底是为什么呢？

JS 的执行环境一般是浏览器和 Node.js，两者稍有不同，这里只讨论浏览器环境下的情况。

JS 执行过程中会产生两种任务，分别是：同步任务和异步任务。

• 同步任务：比如声明语句、for、赋值等，读取后依据从上到下从左到右，立即执行。
• 异步任务：比如 ajax 网络请求，setTimeout 定时函数等都属于异步任务。异步任务会通过任务队列(Event Queue)的机制（先进先出的机制）来进行协调。

任务队列（Event Queue）

任务队列中的任务也分为两种，分别是：宏任务（Macro-take）和微任务（Micro-take）

• 宏任务主要包括：scrip(JS 整体代码)、setTimeout、setInterval、setImmediate、I/O、UI 交互
• 微任务主要包括：Promise(重点关注)、process.nextTick(Node.js)、MutaionObserver

任务队列的执行过程是：先执行一个宏任务，执行过程中如果产出新的宏/微任务，就将他们推入相应的任务队列，之后在执行一队微任务，之后再执行宏任务，如此循环。以上不断重复的过程就叫做 Event Loop(事件循环)。

每一次的循环操作被称为tick。

image

理解微任务和宏任务的执行执行过程

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");

按照上面的内容，分析执行步骤：

1. 宏任务：执行整体代码（相当于