（基础）JavaScript中宏任务和微任务

我们经常会说 JavaScript是单线程 的，但是 JavaScript的线程应该有自己的容器进程 ：浏览器或者Node

浏览器是一个进程吗，它里面只有一个线程吗？

目前多数的浏览器其实都是多进程的，当我们打开一个tab页面时就会开启一个新的进程，这是为了防止一个页

面卡死而造成所有页面无法响应，整个浏览器需要强制退出

每个进程中又有很多的线程，其中包括执行JavaScript代码的线程

JavaScript的代码执行是在一个单独的线程中执行的

这就意味着JavaScript的代码，在同一个时刻只能做一件事

如果这件事是非常耗时的，就意味着当前的线程就会被阻塞

所以真正耗时的操作，实际上并不是由JavaScript线程在执行的

浏览器的每个进程是多线程的，那么其他线程可以来完成这个耗时的操作

比如网络请求、定时器，我们只需要在特性的时候执行应该有的回调即可

但是事件循环中并非只维护着一个队列，事实上是有两个队列：

宏任务队列（macrotask queue）：ajax、setTimeout、setInterval、DOM监听、UI Rendering等

微任务队列（microtask queue）：Promise的then回调、 Mutation Observer API、queueMicrotask()等

也就是宏任务执行之前，必须保证微任务队列是空的

如果不为空，那么就优先执行微任务队列中的任务（回调）

setTimeout(function () {
  console.log("setTimeout1");
  new Promise(function (resolve) {
    resolve();
  }).then(function () {
    new Promise(function (resolve) {
      resolve();
    }).then(function () {
      console.log("then4");
    });
    console.log("then2");
  });
});

new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("then1");
});

setTimeout(function () {
  console.log("setTimeout2");
});

console.log(2);

queueMicrotask(() => {
  console.log("queueMicrotask1")
});

new Promise(function (resolve) {
  resolve();
}).then(function () {
  console.log("then3");
});

// promise1
// 2
// then1
// queueMicrotask1
// then3
// setTimeout1
// then2
// then4
// setTimeout2

async function async1 () {
  console.log('async1 start')
  await async2();
  console.log('async1 end')    //等于then里面代码
}

async function async2 () {
  console.log('async2')
}

console.log('script start')

setTimeout(function () {
  console.log('setTimeout')
}, 0)
 
async1();
 
new Promise (function (resolve) {
  console.log('promise1')
  resolve();
}).then (function () {
  console.log('promise2')
})

console.log('script end')

// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout

原文链接：https://blog.csdn.net/weixin_42681555/article/details/122137250