js事件循环

单线程
JavaScript是一种单线程的编程语言，同一时间只能做一件事，所有任务都需要排队依次完成。
事件循环
1.js是单线程，防止代码阻塞，我们把代码(任务)：同步和异步
2.同步代码给js引擎执行，异步代码交给宿主环境
3.同步代码放入执行中，异步代码等待时机成熟送入任务队列排队
4.执行栈执行完毕，会去任务队列看是否有异步代码，有就送到执行栈执行，反复循环查看执行，这个过程是事件循环(eventloop)
事件循环分为两种,分别是浏览器事件循环和node.js事件循环，JavaScript是一门单线程语言，指主线程只有一个。Event Loop事件循环，其实就是JS引擎管理事件执行的一个流程，具体由运行环境确定。目前JS的主要运行环境有两个，浏览器和Node.js。
了解事件循环的好处，可以更好的理解代码底层运行机制
同步任务：在主线程上排队执行的任务，只有一个任务执行完毕，才能执行后一个任务，立即放入js引擎(JS主线程)执行，并原地等待结果
异步任务：不进入主线程，而进入“任务队列（task queue）”的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。先放入宿主环境(浏览器/Node),不必原地等待结果，并不阻塞 主线程继续往下执行，异步结果在将来执行
异步代码 定时器 ajax/fetch 事件绑定
Promise 本身是同步的，但是then和catch是异步的
异步任务又分为宏任务和微任务。所有同步任务都在主线程上执行，形成一个函数调用栈（执行栈），而异步则先放到任务队列（task queue）里，任务队列又分为宏任务（macro-task）与微任务（micro-task）。
宏任务包括：script(整体代码)、setTimout、setInterval、setImmediate(node.js环境)、I/O、UI交互事件
微任务包括：Promise(本身同步).then(异步的) catch(异步的)、MutationObserver(html5新特新)、process.nextTick（node环境）,Async/Await

执行顺序
先执行同步代码，
遇到异步宏任务则将异步宏任务放入宏任务队列中，
遇到异步微任务则将异步微任务放入微任务队列中，
当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，
微任务执行完毕后再将异步宏任务从队列中调入主线程执行，
一直循环直至所有任务执行完毕。

注意：微任务的优先级大于宏任务

setTimeout(function(){
    console.log('1');
},0);
new Promise(function(resolve){          
    console.log('2');
    resolve();
}).then(function(){         
    console.log('3');
});         
console.log('4'); 
//输出顺序：2 4 3 1

解释：

遇到setTimout，异步宏任务，放入宏任务队列中；
遇到new Promise，Promise在实例化的过程中所执行的代码都是同步进行的，所以输出2；
而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中
遇到同步任务console.log(‘4’);输出4；主线程中同步任务执行完
从微任务队列中取出任务到主线程中，输出3，微任务队列为空
从宏任务队列中取出任务到主线程中，输出1，宏任务队列为空，结束~

setTimeout(()=>{
  new Promise(resolve =>{
    resolve();
  }).then(()=>{
    console.log('test');
  });

  console.log(4);
});

new Promise(resolve => {
  resolve();
  console.log(1)
}).then( () => {
  console.log(3);
  Promise.resolve().then(() => {
    console.log('before timeout');
  }).then(() => {
    Promise.resolve().then(() => {
      console.log('also before timeout')
    })
  })
})
console.log(2); 
//输出：1 2 3 before timeout also before timeout 4 test

解释：

遇到setTimeout，异步宏任务，将() => {console.log(4)}放入宏任务队列中；
遇到new Promise，Promise在实例化的过程中所执行的代码都是同步进行的，所以输出1；
而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中
遇到同步任务console.log(2)，输出2；主线程中同步任务执行完
从微任务队列中取出任务到主线程中，输出3，此微任务中又有微任务，Promise.resolve().then(微任务a).then(微任务b)，将其依次放入微任务队列中；
从微任务队列中取出任务a到主线程中，输出 before timeout；
从微任务队列中取出任务b到主线程中，任务b又注册了一个微任务c，放入微任务队列中；
从微任务队列中取出任务c到主线程中，输出 also before timeout；微任务队列为空
从宏任务队列中取出任务到主线程，此任务中注册了一个微任务d，将其放入微任务队列中，接下来遇到输出4，宏任务队列为空
从微任务队列中取出任务d到主线程 ，输出test，微任务队列为空，结束