相关概念：

• 函数调用栈；（js的任务都在这里执行）
• 分配给程序的内存： 堆内存（存对象） 栈内存（基本类型变量 null）
• task queue（异步回调）
• 浏览器的一些异步处理线程： 事件线程 定时器线程 网络线程等
• eventloop （指针：在同步任务执行完毕，调用栈被清空的时候，会去 task queue 中找异步回调并放进调用栈中执行）
• 每个宏任务队列都有自己的一个微任务队列（当前的这个宏任务所产生的微任务） （配合下面代码描述理解）

代码解释

console.log(1)
setTimeout(() => {
  console.log(2)
}, 0)
Promise.resolve().then(() => {
  console.log(3)
})

整个代码可以理解为是一个宏任务， 执行 console 打印1 遇到 setTimeout 浏览器会开启一个定时器线程监听时间的变化，在时间到的时候，会把回调放进 task queue 此时不会执行； Promise 将回调塞进当前这个宏任务对应的微任务队列中； 整个代码执行完毕， 调用栈也没有任务了， eventloop 开始工作， 先是微任务队列中有一个任务 打印3 这个宏任务才算执行完毕 开始浏览器的渲染工作（render）然后去找下一个宏任务 打印2

深度理解

button.addEventListener('click',() => {
  console.log('1')
  Promise.resolve().then(() => console.log('11'))
})
button.addEventListener('click',() => {
  console.log('2');
  Promise.resolve().then(() => console.log('22'))
})
// button.click();

// 自己点击 看看结果和你预想的是否一致~