登录
首页 >  文章 >  前端

JavaScript并发模型详解与执行机制解析

时间:2025-12-02 08:18:33 440浏览 收藏

一分耕耘,一分收获!既然打开了这篇文章《JavaScript并发模型与执行机制解析》,就坚持看下去吧!文中内容包含等等知识点...希望你能在阅读本文后,能真真实实学到知识或者帮你解决心中的疑惑,也欢迎大佬或者新人朋友们多留言评论,多给建议!谢谢!

JavaScript通过事件循环实现异步,先执行同步代码,再处理微任务队列,最后执行宏任务;例如1→4→3→2,因微任务优先于宏任务执行。

JavaScript并发模型_javascript执行机制

JavaScript 是单线程语言,意味着同一时间只能执行一个任务。为了在不阻塞主线程的情况下处理异步操作(如网络请求、定时器、用户交互等),JavaScript 设计了一套独特的并发模型,这套模型基于事件循环(Event Loop)、调用栈(Call Stack)、任务队列(Task Queue)和微任务队列(Microtask Queue)协同工作。

事件循环与执行栈

JavaScript 的代码执行依赖于调用栈,它是一个后进先出(LIFO)的数据结构,用于追踪函数的执行。每当函数被调用,就会被推入栈中;函数执行完毕后,从栈中弹出。

由于 JavaScript 是单线程的,所有同步代码会按顺序在调用栈中执行。但遇到异步操作时,比如 setTimeoutfetchPromise,它们不会立即执行回调,而是交由浏览器的 Web API 处理,完成后将回调放入相应的任务队列。

宏任务与微任务

JavaScript 中的异步任务分为两类:宏任务(Macro Task)和微任务(Micro Task)。

宏任务包括:

  • script 标签中的整体代码
  • setTimeout 回调
  • setInterval 回调
  • I/O 操作
  • UI 渲染

微任务包括:

  • Promise.then/catch/finally 回调
  • MutationObserver 回调
  • queueMicrotask()

事件循环的执行规则是:

  1. 执行一个宏任务(通常是 script 主代码)
  2. 执行过程中遇到异步操作,将其回调注册到对应的任务队列
  3. 当前宏任务执行完后,清空微任务队列中所有可用的微任务
  4. 从宏任务队列中取下一个宏任务执行,重复上述过程

执行顺序示例

以下代码可以帮助理解执行顺序:

console.log('1'); setTimeout(() => { console.log('2'); }, 0); Promise.resolve().then(() => { console.log('3'); }); console.log('4');

输出结果为:1 → 4 → 3 → 2

原因:

  • '1' 和 '4' 是同步代码,直接输出
  • setTimeout 属于宏任务,回调进入宏任务队列
  • Promise.then 属于微任务,当前宏任务结束后立即执行
  • 微任务优先于下一轮宏任务执行,因此 '3' 在 '2' 之前

关键点总结

JavaScript 虽然是单线程,但通过事件循环实现了“看似并发”的效果。

  • 每次事件循环只处理一个宏任务
  • 每个宏任务执行完后,必须清空当前所有微任务
  • 微任务具有更高优先级,常用于确保异步操作的及时响应(如 Promise 链)
  • 避免长时间运行的同步代码,防止阻塞事件循环,影响用户体验

基本上就这些,理解清楚调用栈、任务队列和事件循环的协作方式,就能掌握 JavaScript 的执行机制。不复杂但容易忽略细节。

终于介绍完啦!小伙伴们,这篇关于《JavaScript并发模型详解与执行机制解析》的介绍应该让你收获多多了吧!欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识,快来关注吧!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>