首页 > web前端 > js教程 > 正文

JavaScript并发模型_事件循环任务调度

夜晨
发布: 2025-11-29 21:43:02
原创
624人浏览过
JavaScript通过事件循环实现异步处理,先执行同步代码,再优先清空微任务队列,然后执行宏任务,形成“宏任务→所有微任务→下一宏任务”的循环机制。

javascript并发模型_事件循环任务调度

JavaScript 是单线程语言,但它通过事件循环(Event Loop)实现了高效的并发模型。这种模型让 JS 能在不阻塞主线程的前提下处理异步操作,比如网络请求、定时器和用户交互。

执行与任务队列

JavaScript 的代码执行依赖于调用栈,也就是执行栈。函数被调用时入栈,执行完毕后出栈。同步代码会依次执行并清空栈。

当遇到异步操作(如 setTimeout、fetch),它们不会立即执行回调,而是交给浏览器的其他模块(如定时器模块或网络模块)处理。这些回调最终会被放入任务队列中,等待事件循环调度。

立即学习Java免费学习笔记(深入)”;

  • 宏任务(Macro Task):包括整体代码块、setTimeout 回调、setInterval 回调、I/O 操作、UI 渲染。
  • 微任务(Micro Task):包括 Promise.then 回调、MutationObserver、queueMicrotask。

事件循环的工作机制

事件循环持续监听执行栈和任务队列的状态。它的基本流程是:

  • 主线程执行同步代码,清空执行栈。
  • 遇到异步任务时,将其回调注册到对应的任务队列中。
  • 同步代码执行完成后,事件循环先检查微任务队列。
  • 如果有微任务,逐一执行直到微任务队列清空。
  • 然后从宏任务队列中取一个任务执行。
  • 每轮宏任务执行后,再次清空所有微任务。

这个“宏任务 → 所有微任务 → 下一个宏任务”的模式保证了微任务的高优先级。

实际调度示例

看一段典型代码帮助理解执行顺序:

牛小影
牛小影

牛小影 - 专业的AI视频画质增强器

牛小影 420
查看详情 牛小影
console.log('1');
<p>setTimeout(() => {
console.log('2');
}, 0);</p><p>Promise.resolve().then(() => {
console.log('3');
});</p><p>console.log('4');</p>
登录后复制

输出顺序是:1 → 4 → 3 → 2

原因:

  • '1' 和 '4' 是同步代码,直接输出。
  • setTimeout 回调进入宏任务队列。
  • Promise.then 回调进入微任务队列。
  • 同步代码结束后,事件循环先处理微任务(输出3),再处理宏任务(输出2)。

理解任务优先级的重要性

微任务总是在当前宏任务结束前被清空,这意味着它们比下一个宏任务更早执行。这在处理 Promise 链或异步状态更新时尤为重要。

例如,在 Vue 或 React 中,状态更新后的回调常借助微任务实现“异步但尽快”执行,避免频繁渲染。

基本上就这些。事件循环虽不复杂,但掌握它能帮你准确预测异步代码的执行顺序,减少 bug。

以上就是JavaScript并发模型_事件循环任务调度的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号