js中的事件循环（超详细）

前言：

1.在了解js的事件循环之前，我们先了解一下浏览器的任务线程：

在浏览器执行各种进程，浏览器是多进程，每一个浏览器的标签都可以都可以理解为一个多进程的任务进程，浏览器渲染进程属于进程中的一种，主要负责，页面渲染，脚本执行，任务处理，那么线程大概有：（html的结构解析，css解析成dom树，），js脚本的主线程，事件触发线程，定时器线程，http线程

2.关于事件循环：

虽然说js是一个单线程执行，但是还是分为同步和异步，也可以说为主线程，和异步线程，那么如果在异步线程中，任务队列绝对起到绝对重要的作用，同步任务一般都会在主线程去执行，执行完之后，再去执行异步任务，也就是在异步线程，那么这时候异步任务就可以进入任务队列去执行异步任务，上诉不断地过程，让我们叫做循环事件（Event loop）

3.关于宏任务和微任务

在事件循环中，每进行一次循环操作称为tick，通过阅读规范可知，每一次 tick 的任务处理模型是比较复杂的，其关键的步骤可以总结如下：

1.在此次 tick 中选择最先进入队列的任务( oldest task )，如果有则执行(一次)

2.检查是否存在 Microtasks ，如果存在则不停地执行，直至清空Microtask Queue

3.更新 render

4.主线程重复执行上述步骤

规范中规定，task分为两大类, 分别是 Macro Task （宏任务）和 Micro Task（微任务）, 并且每个宏任务结束后, 都要清空所有的微任务,这里的 Macro Task也是我们常说的 task

宏任务：script( 整体代码)，setTimeout，setInterval，UI交互事件

微任务：promise，nextTick

5.例题

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

正确答案是

script start

script end

pormise1

promise2

setTimeout

最后的最后，记住，JavaScript 是一门单线程语言，异步操作都是放到事件循环队列里面，等待主执行栈来执行的，并没有专门的异步执行线程。