事件循环中的宏任务和微任务执行顺序

先来了解一下事件循环、宏任务、微任务和Promise

1.事件循环（Event Loop）运行机制

执行一个宏任务（栈中没有就从事件队列中获取）
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

2.宏任务、微任务

执行顺序：先宏后微

宏任务（发起者:宿主（Node、浏览器））:
script(整体代码)、setTimeout、setInterval、setImmediate(Node.js 环境)、UI事件、I/O（Node.js）

微任务（发起者: JS引擎）:
Promise、MutaionObserver、process.nextTick（Node.js）

3. Promise

定义: Promise对象用于表示一个异步操作的最终完成 (或失败)及其结果值

Promise把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。
1.promise构造函数是同步执行，then方法是异步执行
2.微任务（入队的Promise回调）的优先级高于宏任务（入队的setTimeout()回调）

4.例子演示

      setTimeout(() => {
        console.log("4");
        setTimeout(() => {
          console.log("8");
        }, 0);
        new Promise((r) => {
          console.log("5");//构造函数是同步的
          r();
        }).then(() => {
          console.log("7");//then()是异步的，这里已经入队
        });
        console.log("6");
      }, 0);

      new Promise((r) => {
        console.log("1");//构造函数是同步的
        r();
      }).then(() => {
        console.log("3");//then()是异步的，这里已经入队
      });
      console.log("2");