宏任务，微任务，JS事件循环

Microtask与Macrotask，异步执行顺序的差异

要明白这个问题需要去了解js的事件循环模型。了解过程中会明白js的执行栈，作用域链，变量提升，js的单线程原因等许多问题。

关键词：marcotask microtask queue 执行上下文context 堆heap 栈stack 作用域

写的很简单，主要是思路，细节google就可以。

参考

• 事件循环-MDN
• 事件循环-知乎文章
• JavaScript执行上下文、函数堆栈、提升的概念
• nodejs中event loop模型-方应杭

引入

一个代码执行顺序的例子：

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
//undefined
//setTimeout

这里顺序的判断就涉及到了宏任务，微任务。

event loop

JS是单线程的语言，同步执行代码会造成阻塞，异步解决了这一问题。但是异步是如何实现的？

事件循环模型，event loop实现异步。

而在浏览器环境与NodeJs环境又有差异，NodeJs里的event loop更复杂一些，这里主要说明浏览器环境中的event loop，但是具体到不同浏览器上代码的执行顺序也有差异。

• 总体上来讲，setTimeout，setTimeInterval粒度更大，属于宏任务，promise.then中的回调粒度小，是微任务。
• setTimeout，在0ms后将callback加入到宏任务的queue中，而promise的回调放在微任务的queue中
• 当前JS线程中的任务执行完成后(正常代码都会放入执行栈中，执行栈中空闲后)，queue中的函数会按队列执行。先去微任务的queue，再去执行宏任务队列中的callback。