示意图
理解
事件执行队列执行的顺序首先是同步任务队列，其次是微任务队列、再其次是宏任务队列
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="button">click</button>
</body>
<script>
//测试1 开始
let btn = document.querySelector("#button")
queueMicrotask(() => { //微任务
console.log("micro1")
})
setTimeout(() => { //settimeout 也是宏任务
console.log("big1")
}, 0)
btn.addEventListener('click', function () { //根据执行顺序，说明用户点击事件是宏任务
console.log('click3')
queueMicrotask(() => {
console.log("queueMicrotask4")
})
})
queueMicrotask(() => {
console.log("micro2")
})
// 测试2 开始
const mytodo = new Promise((resolve, reject) => {
console.log("quick1") //这里是同步任务，优先执行
setTimeout(() => {
console.log("big2")
resolve(true)
}, 1000)
})
setTimeout(() => {
console.log("big3")
}, 1000)
//微任务的优先级高于宏任务
mytodo.then(res => {
console.log('micro4')
})
</script>
</html>
总结
1、同步任务优先级最高，一般指的是直接执行的代码
2、微任务执行优先级次于同步任务，优先级第二，一般微任务主要是promise、then、async、queueMicrotask等。
3、宏任务优先级最后，但是宏任务内的微任务优先级次于宏任务本身。宏任务一般指的是用户操作事件，或者定时器等。
前端工程师、程序员
