宏任务？微任务？

先贴一段代码

console.log('1');

setTimeout(function() {
    console.log('2');
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})

new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

面试中经常出现 Promise 和 setTimeout的执行顺序，其本质想考的是js的事件循环过程，宏任务和微任务的执行顺序

setTimeout(() => {
  console.log('宏任务') 
});

Promise.resolve().then(() => {
  console.log('微任务')
})

javascript

javascript是一门单线程语言，所以javascript是按语句的执行顺序执行的。虽然js是单线程，但是我们可以将任务分成两类

同步任务：需要执行的任务在主线程上排队，一次执行
异步任务：没有立马执行但是需要被执行的任务，放在任务队列里面

javascript事件循环

当我们打开网站的时候，网页的渲染其实是一堆同步任务，不如页面骨架和页面元素的渲染，但是想图片音乐等占用资源大耗时久的任务就是异步任务

所有同步任务偶在主线程上执行，形成一个执行栈
主线程之外，还存在一个任务队列（task queue）只要异步任务有了运行结果，就在“任务队列”之中放置一个事件
一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，看看里面有哪些事件。那些对应的异步任务，就结束等待状态，进入执行栈开始被执行
主线程不断重复以上三步 ** js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数 **
事件循环
同步和异步分别进入到不同的执行场所，同步进入到主线程，异步的进入到event table 并注册函数
当指定事件完成之后，event table 会将函数移入到event queue
当主线程的任务执行完毕之后，会把event queue里面读取对应的函数进入主线程执行
上述过程会不断循环，形成event loop(事件循环)

promise

除了广义的同步任务和异步任务，我们可以分的更加精细一点：

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
micro-task(微任务)：Promise，process.nextTick 不同的任务会进入到不同的event queue。比如setTimeout和setInterval会进入相同的Event Queue。

事件循环，宏任务，微任务的关系图