一、代码的执行顺序
1)、同步任务：
从上到下依次执行。
2)、异步任务：
包含了 宏任务 和 微任务。
二、Event Loop 事件循环
Event Loop（事件循环）是一种编程模式，通常用于处理异步操作，特别是在 JavaScript 和 Node.js 等环境中。它允许程序在等待某些操作（如 I/O 操作、计时器、网络请求等）完成时，不会阻塞其他代码的执行，从而提高效率和性能。Event Loop 是一种强大的机制，特别适合处理高并发和异步操作的编程环境。
事件循环负责调度和执行宏任务和微任务，它们各自代表不同优先级的任务类型。
在事件循环（Event Loop）中，任务分为两类：宏任务（Macro Task） 和 微任务（Micro Task）。这两类任务的执行顺序决定了异步操作的具体执行时机。
1、宏任务（Macro Task）
宏任务是相对较大的任务，每次事件循环迭代时从队列中取出一个宏任务进行执行，常见的宏任务包括(script(整体代码)、setTimeout、setInterval、UI交互事件、postMessage、Ajax)：
- setTimeout
- setInterval
- DOM 事件
- HTTP 请求
- I/O 操作（如文件操作）
2、微任务（Micro Task）
微任务是相对较小、较短的任务，通常在当前宏任务完成后立即执行。微任务的优先级高于宏任务，因此微任务会在本轮宏任务执行结束后立即执行，而不是等到下一个事件循环。常见的微任务包括(Promise.then catch finally、MutaionObserver、process.nextTick(Node.js 环境))：
- Promise.then catch finally 的回调
- MutationObserver（监听一个dom的变化）
- queueMicrotask
在事件循环(Event Loop)中，当主线程空闲时，会从宏任务队列中选择一个任务进行执行。当一个宏任务执行完毕后，会检查是否有微任务队列，如果有，则将微任务队列中的所有任务依次执行完毕，然后再继续选择下一个宏任务执行。这样的过程循环进行，形成了事件循环。
总结来说，宏任务代表着较大粒度的任务，而微任务代表着较小粒度的任务。微任务通常在宏任务执行完毕后立即执行，因此微任务具有更高的优先级，可以在页面渲染前执行，从而提供更好的用户体验。
所有的同步任务都是在主进程执行的形成一个执行栈，主线程之外，还存在一个"任务队列"，异步任务执行队列中先执行宏任务，然后清空当次宏任务中的所有微任务，然后进行下一个tick如此形成循环。
按顺序执行， 同步任务直接执行，异步任务进入异步队列，执行完以后，在进行入异步列队，然后在看是同步还是异步任务，如此循环执行。
三、实例演示
<template>
<div>
hello tailwindcss
</div>
</template>
<script setup lang='ts'>
console.log(9)
async function Prom(){
console.log('Y')
await Promise.resolve()
console.log('X')
}
setTimeout(()=>{
console.log(1)
Promise.resolve().then((