JS异步--执行顺序

浏览器的循环机制

浏览器事件循环有一个宏队列，一个微队列，且微队列在一次循环中队列中的任务一个接一个执行一直到队列为空，而宏队列只取队首的一个任务放入执行栈执行，执行过后接着执行微队列，并构成循环

JavaScript运行机制

当JS解析执行时，会被引擎分为两类任务：同步任务和异步任务。同步任务被推到执行栈中按顺序执行任务，而异步任务可以被执行时是被放到任务队列中等待JS引擎去执行。当栈中的所有同步任务执行完成后才会去任务队列中查看是否有任务存在，并将任务放到执行栈中去执行，执行完后再去任务队列中查看是否有可以执行的任务然后再去执行。这也是事件循环。对于队列任务来说还可以做更详细的分类，分为微任务和宏任务

因为浏览器是多线程的，当 JS 需要执行异步任务时，浏览器会另外启动一个线程去执行该任务。也就是说，“JS 是单线程的”指的是执行 JS 代码的线程只有一个，是浏览器提供的 JS 引擎线程（主线程）。浏览器中还有定时器线程和 HTTP 请求线程等，这些线程主要不是来跑 JS 代码的。

比如主线程中需要发一个 AJAX 请求，就把这个任务交给另一个浏览器线程（HTTP 请求线程）去真正发送请求，待请求回来了，再将 callback 里需要执行的 JS 回调交给 JS 引擎线程去执行。即浏览器才是真正执行发送请求这个任务的角色，而 JS 只是负责执行最后的回调处理。所以这里的异步不是 JS 自身实现的，其实是浏览器为其提供的能力。

Promise 的运行机制

是异步编程的一种解决方案，相比回调函数和事件更合理和更强大

promise的构造函数是同步执行，promise.then中的函数是异步执行

它可以解决回调地狱的问题

async、await执行顺序

async/await就是promise的语法糖，

函数前必须加一个async，异步操作方法前加一个await关键字，意思就是等一下，执行完了再继续走。它可以很好的替代promise 中的then

使用 async 定义的函数，当它被调用时，它返回的其实是一个 Promise 对象。可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体后面的语句

setTimeout

同步执行：新程序或子程序被直接执行

宏任务：setTimeOut、setInterval、setImmediate

微任务：promise.then、process.nextTick、Object.observe、MutationObserver

注意：Promise是同步任务

宏任务和微任务都是怎样执行的

执行script

进入script后，所有的同步任务主线程执行

所有宏任务放入宏任务执行队列

所有微任务放入微任务执行队列

先清空微任务队列

再取一个宏任务，执行，再清空任务队列

依次循环

setTimeout(() => {
  console.log('setTimeout start');
  new Promise((resolve) => {
    console.log('promise1 start');
    resolve();
  }).then(() => {
    console.log('promise1 end');
  })
  console.log('setTimeout end');
}, 0);
function promise2() {
  return new Promise((resolve) => {
    console.log('promise2');
    resolve();
  })
}
async function async1() {
  console.log('async1 start');
  await promise2();
  console.log('async1 end');
}
async1();
console.log('script end');