微/宏任务,事件循环

js执行机制是从上至下一条条执行,遇到异步代码会放到消息队列里面,然后再往下走。异步不会进入到主进程,而进入消息队列的任务,只有任务队列通知主进程,该任务可以执行了才会被放到主进程里面。其中异步任务又分为微任务宏任务,微任务就可以看作是比较紧急的事务,优先级始终比宏任务高。每次微任务执行完毕之后才回去执行宏任务。然后执行完当前的宏任务后会再折返回去看有没有微任务,如果有微任务那么就去执行微任务。当微任务执行完毕之后再去执行下一条宏任务,如此以往就形成了事件循环 Event Loop

//宏任务:
setTimeout,setInterval ...
//微任务
Promise.then catch finally

其中async 属于promise的语法糖 await的前面的代码属于同步 而await后面的代码则相当于then 所以await后面的代码则是微任务。

JavaScript 的事件循环机制是其异步编程模型的核心,尤其在单线程环境中,它通过任务(MacroTask)和任务(MicroTask)的调度,确保任务的高效执行和代码的响应性。 ### 事件循环的基本机制 JavaScript 引擎在执行代码时,会维护一个**调用栈**,用于存储正在执行的函数。当调用栈为空时,事件循环会从任务队列中取出任务并推入调用栈执行。任务队列分为两类: - **任务队列**:如 `setTimeout`、`setInterval`、`DOM 事件` 和 `I/O 操作` 等。 - **任务队列**:如 `Promise.then`、`MutationObserver` 和 `queueMicrotask` 等。 事件循环的执行流程如下: 1. **执行调用栈中的同步任务**:所有同步代码优先执行,直到调用栈清空。 2. **执行任务队列中的所有任务**:任务队列中的任务会按顺序全部执行,直到队列为空。 3. **执行任务队列中的一个任务**:从任务队列中取出队首的任务执行。 4. **重复上述步骤**:事件循环会不断重复,直到调用栈和任务队列都为空。 ### 任务任务的执行顺序 任务任务的执行顺序遵循以下规则: - **任务的优先级低于任务**:在每次事件循环迭代中,只有在任务队列为空时,才会执行任务。 - **任务队列中的任务会全部执行**:任务队列中的任务会一次性全部执行完毕,不会被任务打断。 - **任务队列中的任务按先进先出(FIFO)顺序执行**:任务队列中的任务会按照它们被添加的顺序依次执行。 例如,以下代码展示了任务任务的执行顺序: ```javascript console.log('start'); setTimeout(() => { console.log('setTimeout'); }, 0); Promise.resolve().then(() => { console.log('Promise.then'); }); console.log('end'); ``` 输出结果为: ``` start end Promise.then setTimeout ``` 在这个例子中: - `console.log('start')` 和 `console.log('end')` 是同步任务,优先执行。 - `Promise.then` 是任务,会在同步任务完成后立即执行。 - `setTimeout` 是任务,会在任务队列清空后执行。 ### 实际场景中的应用 理解任务任务的执行顺序,有助于优化异步代码的设计,避免不必要的延迟和性能瓶颈。例如,在以下场景中,任务可以确保某些异步操作在任务之前完成: ```javascript function asyncOperation() { return new Promise((resolve) => { resolve('async result'); }); } asyncOperation().then((result) => { console.log(result); }); setTimeout(() => { console.log('timeout'); }, 0); console.log('synchronous'); ``` 输出结果为: ``` synchronous async result timeout ``` 在这个例子中,`Promise.then` 的任务优先于 `setTimeout` 的任务执行。 ### 总结 JavaScript 的事件循环机制通过任务任务的调度,确保了单线程环境下的高效异步处理。任务任务的执行顺序如下: 1. 执行所有同步任务。 2. 执行所有任务。 3. 执行一个任务。 4. 重复上述步骤。 通过合理利用任务任务,可以优化异步代码的设计,提高代码的响应性和性能 [^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值