前言

今天看到一道题目，问的是宏任务与微任务，看的是一脸懵逼，于是特意研究了一下，在这里特别感谢https://juejin.im/post/59e85eebf265da430d571f89#heading-0这篇文章，帮我搞懂了js运行机制。

背景

console.log('----------------- start -----------------');
setTimeout(() => {
  console.log('setTimeout');
}, 0)
new Promise((resolve, reject) =>{
  for (var i = 0; i < 5; i++) {
    console.log(i);
  }
  resolve();  // 修改promise实例对象的状态为成功的状态
}).then(() => {
  console.log('promise实例成功回调执行');
})
console.log('----------------- end -----------------');

在理解javascript运行机制前，看到这个题目是一脸蒙蔽，直到了解了宏任务与微任务运行机制，才彻底懂了。

1.关于javascript

首先大家都知道javascript是一门单线程语言，所谓的“多线程”也是用单线程模拟出来的。

2.javascript事件循环

大家都知道js分为单线程与多线程，这里引用大神一张图片：

image.png

文字描述：

• 同步任务和异步任务分别进入不同的场所，同步任务进入主线程，异步任务进入Event Table，并注册函数。
• 当指定的事情完成时，Event Table会将这个函数移入Event Queue。
• 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
• 上述过程会不断重复，也就是常说的Event Loop(事件循环)。
  举一个最简单的例子：

setTimeout(()=>{console.log('异步')},0);console.log('同步')
//同步
//异步

• 进入Event Table，并注册。
• 等待0秒以后，Event Table会将这个函数移入Event Queue。
• console.log('同步')
• 主线程执行完毕后，从Event Queue执行console.log('异步')

3.宏任务与微任务

• macro-task(宏任务)：包括整体代码script，setTimeout，setInterval

• micro-task(微任务)：Promise，process.nextTick
  还是借用大神的图：

  
  image.png
• 先顺序执行同步事件即宏任务
• 碰到异步事件将其分类丢入宏任务 Event Queue 和微任务 Event Queue 中
• 等宏任务执行结束后顺序执行完微任务 Event Queue 中任务，第一次循环结束；
• 顺序执行宏任务 Event Queue 中任务，如此往复
  最后拿一个例子来解释说明：

setTimeout(function() {
    console.log('setTimeout');
})
new Promise(function(resolve) {
    console.log('promise');
}).then(function() {
    console.log('then');
})
console.log('console');
//promise
//console
//then
//setTimeout

最后

在nodejs中，微任务也是有执行顺序的，不像浏览器是谁先添加就先执行谁；
node中微任务process.nextTick优先于promise.then优先于await
javascript是一门单线程语言
Event Loop是javascript的执行机制