js执行机制

同步任务

同步任务都在主线程上执行，形成一个执行栈，程序执行的时候，按照顺序依次执行

异步任务

异步任务是通过回调函数实现的，程序执行的时候，程序会调过某个步骤继续向下执行

事件循环

描述了计算机在执行js时候的一个状态（先去执行栈中执行同步代码，然后再执行队列中异步代码）

异步任务相关添加到任务队列中（任务队列也成为消息队列）

异步任务分类

异步任务分为宏任务和微任务两种：

微任务处理完毕后才会处理宏任务，而该异步任务被判定为宏还是微取决于官方的定义。常见分类如下：

• 宏任务：正常的异步任务都是宏任务，最常见的就是定时器（setInterval, setImmediate, setTimeout）；script(整体代码) 、用户交互、IO任务；

• 微任务：微任务出现比较晚，queueMicrotask、Promise的then和catch方法、catch、finally?

微任务生成方法：

Promise：Promise是一种异步编程的解决方案，它可以将异步操作封装成一个Promise对象，通过then方法注册回调函数，当promise变为resolve或者reject会将回调函数加入微任务队列中。

MutationObserver：MutationObserver是一种可以观察DOM变化的API，通过监听DOM变化事件并注册回调函数，将回调函数加入微任务队列中。

process.nextTick：process.nextTick是Node.js中的一个API，它可以将一个回调函数加入微任务队列中。

宏任务生成方法：

用户交互：用户在页面上进行交互操作（例如点击、滚动、输入等），会触发浏览器产生宏任务来响应用户操作。

网络请求：当浏览器发起网络请求（例如通过?Ajax、Fetch、WebSocket?等方式）时，会产生宏任务来处理请求和响应。

定时器：通过?JavaScript?宿主环境提供的定时器函数（例如?setTimeout、setInterval）可以设置一定的时间后产生宏任务执行对应的回调函数。

DOM?变化：当?DOM?元素发生变化时（例如节点的添加、删除、属性的修改等），会产生宏任务来更新页面。
跨窗口通信：在浏览器中，跨窗口通信（例如通过?postMessage?实现）会产生宏任务来处理通信消息。

JavaScript?脚本执行事件；比如页面引入的?script?就是一个宏任务。

执行顺序代码演示

setTimeout(function(){
  console.log(777)
},10)
console.log('000');//第一步

(async ()=>{
  console.log(111);//2
  await console.log(222);//3,此行执行，当await右边跟随的代码执行完毕的时候，才会执行后面的代码，此时后面的代码（后面3行）也可以算作“内部的微任务”，所以此行执行后执行输出333
  await fn()
  console.log(444);
  console.log(555);
})().then(()=>{
  console.log(666);
});
function fn(){
  console.log('a')
  return new Promise((res,rej)=>{
    console.log('b')
    res('d')
    console.log('c')
  })
}
console.log('333');//4

输出：

注意：

promise内部遇到resolve（）和reject（）调用的时候，会继续执行后面的代码，但是then和reject就直接放入为微任务队列中，等待同步任务执行

但async内部遇到await的时候，只有当await右边跟随的代码执行完毕的时候，才会执行后面的代码，此时后面的代码也可以算作内部的微任务（因为遇到await会将等await执行完成后，执行外面的同步任务，再执行await后面的任务，见下图）

setTimeout(function(){
  console.log(777)
},10)
console.log('000');//第一步

(async ()=>{
  console.log(111);//2
  await console.log(222);   //3,此行执行，当await右边跟随的代码执行完毕的时候，才会执行后面的代码，此时后面的代码（237-239行）也可以算作内部的微任务，所以此行执行后执行252行
  await fn()
  console.log(444);
  console.log(555);
})().then(()=>{
  console.log(666);
});
async function fn(a){
  console.log(a+'a')
  await console.log(222222)
  return new Promise((res,rej)=>{
    console.log(a+'b')
    res(a+'d')
    console.log(a+'c')
  })
}
fn(1).then((e)=>{
  console.log(e);
})
console.log('333');