JavaScript事件循环

JavaScript是单线程，（通常用来操作DOM，如果改为多线程，一个线程进行了1删除，另一个添加了DOM，那么浏览器该怎么处理）

在JavaScript中，所有任务都可分为

同步任务：立即执行的任务，一般进入主线程中执行

异步任务：异步执行的任务，例如ajax网络请求，setTimeout定时器等，一般会先进入任务队列，主线程的任务执行完毕后，会去任务队列中读取对应的任务，推入到主进程中执行，上述过程的不断重复即为事件循环。

不过异步任务又可分为宏任务和微任务

先看一个例子：

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

任务队列先进先出，主线程中同步任务打印顺序应该是1->new Promise->3

然后应该是2->then

但真实情况其实是1->new Promise->3->then->2

这是因为微任务优先宏任务先执行

微任务

常见的微任务有

• Promise.then

• MutaionObserver

• Object.observe（已废弃；Proxy 对象替代）

• process.nextTick（Node.js） （Vue.js常常使用$nextTick()来调用nextTick，用于在dom更新后执行后一些操作）

宏任务

• script (可以理解为外层同步代码)

• setTimeout/setInterval

• UI rendering/UI事件

• postMessage、MessageChannel

• setImmediate、I/O（Node.js）

async和await

JavaScript中用于处理异步操作的关键字，解决了回调函数地狱的问题

async 函数是一种特殊类型的函数，它会隐式地返回一个 Promise 对象。在 async 函数中，你可以使用 await 关键字来等待其他异步操作的完成，而不需要像使用 Promise 那样嵌套多层的 then 方法。

await 关键字只能在 async 函数内部使用，它用于暂停 async 函数的执行，直到等待的 Promise 对象状态变为 resolved（已完成）或 rejected（已拒绝）