事件循环

浏览器渲染进程

浏览器的渲染线程大概有以下几种：
（1）GUI线程；（2）JS引擎线程；（3）事件触发线程；（4）定时器线程；（5）异步的http网络请求线程

JavaScript单线程是指浏览器在解释和执行javascript代码时只有一个线程，即JS引擎线程。
js引擎线程与GUI渲染线程是互斥的，也就是执行代码时，渲染会被挂起，渲染DOM时，js代码不执行。
js是单线程，但是渲染进程中是多线程的，在代码中遇到了像定时器setTimeout，DOM事件，http请求任务时会转交给其他线程去处理的。执行完毕后回调函数添加到任务队列，这里的执行完毕指的是，比如定时器时间到了，ajax请求成功了，对应的回调就会添加到任务队列中。

浏览器事件机制

浏览器在执行js代码时，会维护一个执行栈和任务队列。所有的同步任务都放入执行栈，异步任务都放入任务队列。当执行栈中当任务执行完毕后，浏览器会去任务队列中寻找任务，先进入任务队列的先执行。

宏任务和微任务

如果两个不同种类的异步任务执行后，哪个会先执行？比如setTimeout的回调和Promise的回调。这就要提到宏任务和微任务。

• 宏任务（Macro Task）：js同步执行的代码块，setTimeout、setInterval、XMLHttprequest等。
• 微任务（Micro Task）：promise、process.nextTick（node环境）等。

setTimeout/Promise 等API便是任务源，而进入任务队列的是由他们指定的具体执行任务。来自不同任务源的任务会进入到不同的任务队列。
setTimeout等宏任务的回调进入宏任务队列。
Promise等微任务等回调进入微任务队列。

EventLoop中，每一次循环称为tick，每次循环的执行步骤如下：

• js引擎线程中的执行栈会首先执行宏任务（一般是script），执行完所有的同步代码；根据任务的类型的不同，将异步代码的回调添加到宏任务队列和微任务队列中
• 宏任务执行完后，检查微任务队列，执行完所有微任务
• 微任务队列清空后，如果宿主为浏览器，可能会渲染页面，浏览器也会相应的优化，多个tick后合并成一次渲染页面
• 开始下一轮tick，宏任务队列中拿出一个宏任务（注意是一个宏任务，setTimeout等回调）执行

上面的步骤依次执行，实现一个闭环，也就是事件循环。

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

eg：

  setTimeout(() => {
    console.log(1);
  }, 0);

  new Promise((resolve) => {
    console.log(2);
    resolve();
  }).then(() => {
    console.log(3);
  });
  new Promise((resolve) => {
    console.log(4);
    resolve();
  }).then(() => {
    console.log(5);
  });

  console.log(6);
  console.log(7);

分析一下：

1. 执行栈先执行宏任务，遇到setTimeout，定时器线程处理定时，0s立即将回调加入宏任务队列；
2. 继续执行，Promise的console.log(2);直接执行，then后的回调放入微任务队列；
3. Promise的console.log(4);执行，then后回调放入微任务队列；
4. 执行console.log(6); console.log(7);
5. 执行完毕，去找微任务队列，依次执行console.log(3); console.log(5);
6. 微任务队列清空，执行宏任务队列，console.log(1);

所以，输出顺序为2，4，6，7，3，5，1。