对同步和异步以及宏认为和微任务的理解

废话不多说:直接上图(js的执行机制)
js是单线程的,就是不管什么时候,只能做一件事,如果这件事用时太长,导致的结果就是,我们在这个期间什么事情都干不了,所以在浏览器内部会对我们的代码进行辨别,如果是同步代码,(好了啥也不管,奥利给,干),放入主线程开始执行,如果是异步的代码,就需要将异步的回调函数放入Event Table注册,等待需要执行的条件满足,就会放入Event Queue,等待主线程执行结束,再来Event Queue中找任务,有的话就拿到主线程中执行,这时候可能有小伙伴就要问了,浏览器怎么辨别的呢?说了这么多来举个例子吧:

setTimeout(function () {
        console.log("嘎嘎")
    }, 1000);
console.log("哈哈,我又变帅了")

当代码从上往下执行的时候,忽然看到了setTimeout关键字,这时候就会将里面的函数放入Event Table中注册,这时候就不管它了,直接打印输出下面的内容"哈哈,我又变帅了",等到主程序空了,会从Event Queue找任务,这时候还没有任务,因为1s的计时时间还没到,setTimeout中的任务(函数)还没有进入到Event Queue中去,等到1结束之后,就会进入了,然后进入主线程执行,打印"嘎嘎"结束,补充一点:这里的Event Queue中类似于是有一个while(true)循环机制,一直在循环看是否有需要执行的任务:关于Event Queue这里还需要补充一点
不同的任务会有不同的队列
怎么理解这句话呢?上面我们只是笼统的将setTimeout中的任务(函数)放入Event Queue中,实际上任务细分又分为宏认为和微任务,setTimeout实质上是一个宏任务,宏任务和微任务具体执行的顺序,也就是放入到主线程的顺序也是不一样的:可以看下图的表示:
具体的执行循序为:先执行宏任务,然后查看是否有微任务,如果有就执行微任务,没有就执行下一个宏任务,以此执行
常见的宏任务:整体的script代码,setTimeout setIntervald
常见的微任务:Promise，process.nextTick
有了上面的知识,可以来测试一下:

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

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

答案是:1,7,6,8-----2,4,3,5----9,11,10,12
分别对应三次循环,也即三次宏任务,
第一次写博客:有不对的地方还请各位大佬指点
参考大佬文章:https://juejin.im/post/59e85eebf265da430d571f89