事件循环：Event Loop (tasks and micro

事件循环机制

本文为浏览器环境，不涉及node环境

一、基本概念：

事件循环是一个程序结构，用于等待和发送消息、事件

PS:如果是第一次接触这个概念，可以去看下阮一峰老师的文章，下面👇参考的第一篇文章

二、大体步骤

1.所有同步任务在主线程上执行，会形成一个执行栈，
2.当异步任务返回后，将事件放置在任务队列中
3.当执行栈中的所有任务都执行完毕后，系统会去任务队列去读取一个任务进行执行（PS：队列是先进先出）
4.然后重复以上步骤

三、宏任务(macrotask)、微任务(microtask)

在异步任务中，也可以分为宏任务和微任务
1.宏任务
比如ajax的onload，click事件，基本上我们经常绑定的各种事件都是task任务源，还有数据库操作（IndexedDB ），需要注意的是setTimeout、setInterval、setImmediate也是宏任务
2.微任务
process.nextTick、Promise和 MutationObserver监听DOM的变化

宏任务的事件是放在任务队列中，
微任务的事件是放在自己的微任务队列中，与宏任务不共享队列，

微任务是在执行栈为空时运行的，
微任务优先级也高于宏任务，
微任务队列会执行队列里全部的任务，包括二次产生的微任务

//新版谷歌浏览器(77.0.3865.90)执行，老版的一些浏览器存在执行错误的情况（详情见参考的第二篇文章）
//可以写的一个简单的测试进行验证下
console.log('test1');
setTimeout(function setTimeout1 (){
 console.log('setTimeout1')
 Promise.resolve().then(function  promise2 () {
    setTimeout(()=>{
        console.log('setTimeout2');
    },0)
    console.log('promise1');
 })
}, 0)
Promise.resolve().then(function promise1 () {
    console.log('promise3');
})
setTimeout(function setTimeout2 (){
console.log('setTimeout3')
}, 0)
console.log('test2');

PS:参考的第二篇文章说的比较详细，如果不想看英文，可以看第三篇的翻译

参考文章：
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/?utm_source=html5weekly
https://juejin.im/entry/55dbd51a60b2f3a92a8f5bff