同步、异步、宏、微任务

示例题（懵）

async function async1() {
  console.log('异步 async 创建 --- async-1 start');
  await async2();
  console.log('异步回调微任务 --- async-1 end');
}

async function async2() {
  console.log('异步 async 创建 --- async-2');
}

console.log('start');

setTimeout(() => {
  console.log('异步回调宏任务 --- settimeout-1');
},0)

async1();

setTimeout(() => {
  console.log('异步回调宏任务 --- settimeout-2');
  new Promise((resolve) => {
    console.log('异步 Promise 创建 --- promise-1-1');
    resolve();
  }).then(() => {
    console.log('异步回调微任务 --- promise-1-2');
  })
},0)

new Promise((resolve) => {
  console.log('异步 Promise 创建 --- promise-2-1');
  resolve();
}).then(() => {
  console.log('异步回调微任务 --- promise-2-2');
})

console.log('end');

基本概念

1、JavaScript 是一门单线程语言，即同一时间只能执行同一段代码；

2、事件循环（event loop）是 JavaScript 实现异步的一种方法，也是 JavaScript 的执行机制；

3、JS 分为同步任务和异步任务，同步任务进入主线程执行栈，异步任务回调进入 任务队列，而任务队列里又分为宏任务队列和微任务队列；

4、JS 引擎存在monitoring process进程，持续不断的检查主线程执行栈是否为空，为空则去任务队列里检查是否有可执行的函数；

5、宿主环境（Browser、Node）提供的叫宏任务，语言标准（JavaScript）提供的叫微任务。

同步任务

在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务

不进入主线程，而进入 任务队列（task queue） 的任务，等主线程任务全部执行完成后，主线程会通过 事件循环（event loop） 去询问任务队列中是否有可被执行的任务，如果有这个任务就会被放进主线程执行；

微任务

优先级更高，可以插队执行，不用看定义顺序可以比宏任务先执行；

宏任务

优先级低，先定义的先执行，遵循先进先出的队列规则；

任务执行顺序

主线程执行栈：先执行同步任务代码 > 有异步任务完成执行相应回调

任务队列：微任务（微任务队列） > 宏任务（宏任务队列）

任务执行顺序：建立于优先级之上的，promise（微任务） 和 async （微任务）优先级高于 setTimeout/setInterval（宏任务）；

微任务（microtask）优先级

process.nextTick > Promise = MutationObserver

宏任务（macrotask）优先级

script主代码块 > setImmediate > MessageChannel > setTimeout / setInterval

name	wait
同步（Synchronous） 任务	需要等待，阻塞代码执行
异步（Asynchronous）任务	不需要等待（立即执行后，回调函数放入任务队列），不阻塞代码执行

同步任务&异步任务

浏览器端事件	同步任务	异步任务
同步代码	✅	❌
UI rendering	✅	❌
图片、音视频加载	❌	✅
事件绑定监听（dom操作、click事件等）	❌	✅
setTimeout/setInterval	❌	✅
Ajax	❌	✅
Promise	❌	✅

宏任务&微任务

浏览器端事件	宏任务	微任务
I/O	✅	❌
requestAnimationFrame	✅	❌
setTimeout	✅	❌
setInterval	✅	❌
async/await（等待后面函数运行完成返回结果）	❌	✅
Promise回调函数 （then、catch、finally）	❌	✅
其他回调函数	❌	✅
MutationObserver	❌	✅

参考&推荐文章

JavaScript 运行机制详解：再谈Event Loop

微任务与宏任务

微任务、宏任务与Event-Loop

这一次，彻底弄懂 JavaScript 执行机制