js中的事件循环和宏任务和微任务的理解

参考许多大神的文章,写下自己的理解

事件循环:

说到事件循环就得谈到js中同步和异步的执行顺序
1.javascript将任务分为同步任务和异步任务,同步任务放到主线中,异步函数首先进行回调函数注册。
2.当异步任务满足触发条件的时候,异步任务的回调函数会被放入事件队列中。
3.然后当主线程的同步任务都执行完毕,系统就会去事件队列中读取异步的回调函数。
例如这段代码:

// 同步任务 打印 first
console.log("1");     
setTimeout(() => {        
// 异步任务 回调函数放入事件队列,当主线程的同步任务都执行完毕打印
  console.log("2");
},0)
// 同步任务 打印last
console.log("3");     
//所以打印结果1 3 2

常见异步任务

1.DOM事件
2.AJAX请求
3.定时器setTimeout和setlnterval
4.ES6的Promise（Promise定义部分为同步任务，回调.then部分为异步任务）
例如这段代码:

setTimeout(() => {
  console.log(1);
}, 0)
new Promise(function(resolve){
    console.log(2);
    for(var i = 0; i < 10000; i++){
        i == 99 && resolve();
    }
}).then(function(){
    console.log(3)
});
console.log(4)

//按照上面的操作：可以很轻松得出案例的打印结果：2，4，1，3

可是结果却是2 4 3 1,那么也就意味着，JavaScript的异步任务是存在优先级的。
JavaScript除了广义上将任务划分为同步任务和异步任务，还对异步任务进行了更精细的划分。异步任务又进一步分为微任务和宏任务。宏任务和微任务分别有各自的任务队列即宏任务队列和微任务队列。例如下面这张图:
可以看到宏任务有script,定时器,ajax,history traversal i/o,微任务有promise.then,process.nextTick,MutationObserver,Object,observer

history traversal任务（h5当中的历史操作）
process.nextTick（nodejs中的一个异步操作）
MutationObserver（h5里面增加的，用来监听DOM节点变化的）
下面是执行顺序: