JavaScript_并发模型与多线程编程-js教程-PHP中文网

JavaScript_并发模型与多线程编程

幻影之瞳

发布： 2025-11-20 21:18:06

原创

861人浏览过

JavaScript是单线程语言，通过事件循环、微任务队列和宏任务队列实现并发；例如，console.log('start')、setTimeout（宏任务）、Promise.then（微任务）执行顺序为：start → end → promise → timeout，因微任务在当前宏任务后立即执行；异步编程历经回调函数、Promise到async/await的发展，提升了代码可读性与维护性；此外，Web Workers提供多线程能力，用于执行耗时计算而不阻塞主线程，但需通过postMessage通信且无法访问DOM。

javascript_并发模型与多线程编程

JavaScript 是单线程语言，但这并不意味着它不能处理并发任务。实际上，JavaScript 通过事件循环（Event Loop）、任务队列、微任务机制和异步编程模型实现了高效的并发操作。理解其并发模型对编写高性能、响应迅速的应用至关重要。

JavaScript 的单线程本质

JavaScript 引擎在同一时间只能执行一个任务，这意味着所有同步代码会按顺序执行。这种设计避免了多线程中常见的竞态条件和锁机制问题，但也带来了如何处理耗时操作（如网络请求、定时器）的挑战。

为解决这个问题，JavaScript 借助运行时环境（如浏览器或 Node.js）提供的异步 API 来实现非阻塞操作。

事件循环与任务队列

事件循环是 JavaScript 实现并发的核心机制。它持续检查调用栈和任务队列，当调用栈为空时，就从队列中取出一个任务执行。

立即学习“Java免费学习笔记（深入）”；

宏任务（Macrotask）：包括整体代码块、setTimeout、setInterval、I/O、UI 渲染等。
微任务（Microtask）：包括 Promise.then、MutationObserver、queueMicrotask 等。

每次事件循环迭代会先执行当前宏任务，然后清空所有可用的微任务队列，再进入下一个宏任务。

示例说明执行顺序：

console.log('start'); setTimeout(() => console.log('timeout'), 0); Promise.resolve().then(() => console.log('promise')); console.log('end');

输出结果为：start → end → promise → timeout，因为 Promise 的回调属于微任务，在当前宏任务结束后立即执行，而 setTimeout 属于宏任务，需等待下一轮事件循环。

v7.0.0603UsualToolCMS大众版

UsualToolCMS 是一款企业级的网站内容管理系统，由PHP+MYSQL编写，使用模板分离技术，支持创建多种类型的站点。拥有UsualToolCMS便能快速同时在手机端与电脑端建立网站，通过UsualToolCMS能快速接入公众号，快速生成一个微信小程序及WEBAPP，真正的多站合一。互联网技术变得更简单。升级说明： UsualToolCMS7.0.0604增加文字/图片自动水印系

查看详情

异步编程方式的发展

为了更好地管理异步逻辑，JavaScript 提供了多种编程范式：

回调函数：最原始的方式，容易导致“回调地狱”（Callback Hell）。
Promise：通过链式调用改善可读性，支持错误冒泡。
async/await：基于 Promise 的语法糖，让异步代码看起来像同步代码，提升可维护性。

例如使用 async/await 处理多个异步请求：

async function fetchData() { const res1 = await fetch('/api/user'); const user = await res1.json(); const res2 = await fetch(`/api/posts/${user.id}`); const posts = await res2.json(); return { user, posts }; }

Web Workers：有限的多线程支持

虽然主线程是单线程的，但浏览器提供了 Web Workers 来创建独立线程，用于执行计算密集型任务而不阻塞 UI。

Worker 线程与主线程之间通过消息传递通信（postMessage），彼此不共享内存。

创建一个 Worker：

// main.js const worker = new Worker('worker.js'); worker.postMessage({ data: [1, 2, 3, 4] }); worker.onmessage = function(e) { console.log('Result:', e.data); };

// worker.js self.onmessage = function(e) { const result = e.data.data.map(x => x * 2); self.postMessage(result); };

注意：Worker 中不能访问 DOM 或某些全局对象（如 window），适合纯数据处理。

基本上就这些。JavaScript 虽然不是多线程语言，但凭借强大的异步模型和 Web Workers 的补充，能够高效应对各种并发场景。关键在于理解事件循环机制和合理使用异步控制手段。

以上就是JavaScript_并发模型与多线程编程的详细内容，更多请关注php中文网其它相关文章！