浏览器中的Event loop

浏览器中的Event Loop（事件循环）
1、JS的特点
Javascript是一种单线程非阻塞的脚本语言，单线程的解释是：在任何时候，只有一个主线程执行任务；非阻塞的解释为：主线程不会直接处理异步任务，而是异步操作返回结果后才去处理异步任务，由于异步操作的存在会阻塞浏览器的渲染
2、宏任务与微任务
宏任务：严格按照时间顺序压栈和执行的任务，比如：setTimeout，setInterval
微任务：需要在当前主线程执行结束后立即执行的任务，比如：Promise
3、event loop的执行步骤
（1）执行宏任务，一次循环只执行一个宏任务
（2）主线程为空时取出微任务执行（先进先出），直到微任务队列为空
（3）完成一轮循环，反复执行上述步骤
4、示例

console.log("script1")
Promise.resolve().then(()=>{
  console.log("Promise1")
});
setTimeout(()=>{
  console.log("setTimeout")
},0);
Promise.resolve().then(()=>{
  console.log("Promise2")
});
console.log("script12");

输出结果：

执行过程：

（1）主线程被JS引擎执行，当前是一个宏任务，输出script1
（2）Promise.resolve()回调进入微任务1
（3）执行setTimeout，回调进入下一个应该被执行的宏任务
（4）Promise.resolve()回调进入微任务2
（5）输出script12，当前宏任务执行完毕
（6）检测到存在微任务列表，执行微任务列表，按顺序执行微任务1，微任务2，此时微任务列表为空
（7）执行下一个宏任务setTimeout，并且不存在微任务列表，执行结束