1. JavaScript中的进程与线程基础概念在浏览器和Node.js环境中JavaScript处理并发任务的方式与传统编程语言有着显著差异。我们先明确几个核心概念**进程Process**是操作系统资源分配的基本单位每个进程都有独立的内存空间。浏览器中每个标签页通常运行在独立的渲染进程中而Node.js默认运行在单个进程中。**线程Thread**是CPU调度的基本单位属于同一进程的多个线程共享内存空间。JavaScript传统上是单线程运行的但现代环境通过特定机制实现了类似多线程的效果。重要提示虽然Web Workers和Worker Threads被称为线程但它们的实际行为更接近轻量级进程因为每个Worker都有独立的内存空间。2. 浏览器环境下的执行模型2.1 单线程事件循环机制JavaScript在浏览器主线程中采用事件循环Event Loop模型while (queue.waitForMessage()) { queue.processNextMessage(); }这个模型包含三个关键部分调用栈Call Stack同步代码的执行上下文栈任务队列Task Queue待处理的异步回调队列微任务队列Microtask QueuePromise等产生的高优先级任务典型执行顺序示例console.log(Script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve().then(() { console.log(Promise 1); }).then(() { console.log(Promise 2); }); console.log(Script end);输出顺序为Script start → Script end → Promise 1 → Promise 2 → setTimeout2.2 Web Workers的多线程方案当需要执行CPU密集型任务时可以使用Web Workers创建后台线程// main.js const worker new Worker(worker.js); worker.postMessage({ data: heavy task }); worker.onmessage (e) { console.log(Result:, e.data); }; // worker.js self.onmessage (e) { const result processData(e.data); // 耗时计算 self.postMessage(result); };使用限制不能直接操作DOM与主线程通信需要通过postMessage每个Worker大约占用4MB内存3. Node.js环境中的并发处理3.1 主线程与Worker ThreadsNode.js v12引入了worker_threads模块实现真线程const { Worker, isMainThread } require(worker_threads); if (isMainThread) { const worker new Worker(__filename, { workerData: { value: 42 } }); worker.on(message, (result) { console.log(Worker result:, result); }); } else { const { parentPort, workerData } require(worker_threads); parentPort.postMessage(workerData.value * 2); }与Web Workers的关键区别可以共享内存通过SharedArrayBuffer更精细的线程控制适合CPU密集型而非I/O密集型任务3.2 进程集群方案对于多核利用Node.js提供了cluster模块const cluster require(cluster); const os require(os); if (cluster.isMaster) { // 根据CPU核心数创建子进程 for (let i 0; i os.cpus().length; i) { cluster.fork(); } } else { require(./app.js); // 业务代码 }4. 性能优化实战技巧4.1 线程/进程数量控制浏览器中Web Workers的最佳实践// 根据设备性能动态创建Worker const MAX_WORKERS navigator.hardwareConcurrency || 4; const workers Array(MAX_WORKERS).fill().map(() new Worker(task.js)); // 任务分发逻辑 function dispatchTask(data) { const worker workers.find(w !w.busy); if (worker) { worker.busy true; worker.postMessage(data); return new Promise(resolve { worker.onmessage (e) { worker.busy false; resolve(e.data); }; }); } return Promise.reject(All workers busy); }Node.js中的线程池实现const { Worker, isMainThread, parentPort } require(worker_threads); const path require(path); class ThreadPool { constructor(size) { this.queue []; this.workers Array(size).fill().map(() { const worker new Worker(path.join(__dirname, worker.js)); worker.on(message, (result) { const { resolve } this.queue.shift(); resolve(result); this.processQueue(); }); return worker; }); } runTask(taskData) { return new Promise(resolve { this.queue.push({ resolve, taskData }); this.processQueue(); }); } processQueue() { const idleWorker this.workers.find(w !w.busy); if (idleWorker this.queue.length) { const { taskData } this.queue[0]; idleWorker.busy true; idleWorker.postMessage(taskData); } } }4.2 内存共享与通信优化使用SharedArrayBuffer实现零拷贝通信// 主线程 const sharedBuffer new SharedArrayBuffer(1024); const arr new Uint8Array(sharedBuffer); arr[0] 1; const worker new Worker(worker.js); worker.postMessage({ buffer: sharedBuffer }); // worker.js self.onmessage (e) { const sharedArray new Uint8Array(e.data.buffer); Atomics.add(sharedArray, 0, 1); // 原子操作 };5. 常见问题与调试技巧5.1 典型错误排查死锁问题// 错误示例主线程与Worker相互等待 // main.js worker.onmessage (e) { if (e.data A) { worker.postMessage(B); } }; // worker.js self.onmessage (e) { if (e.data B) { self.postMessage(A); } };内存泄漏// 忘记终止Worker会导致内存泄漏 const worker new Worker(leaky.js); // 应该添加 // worker.terminate(); 当不再需要时5.2 性能分析工具Chrome DevTools的Performance面板可以分析主线程和Worker的活动录制性能时间线查看主线程和Worker线程的CPU占用分析事件循环中的任务分布Node.js性能分析# 生成CPU profile node --cpu-prof app.js # 生成内存快照 node --heapsnapshot-signalSIGUSR2 app.js6. 现代JavaScript并发方案演进6.1 WebAssembly的多线程支持通过Emscripten编译的C代码可以在Web Workers中实现真线程// 主线程 const module await WebAssembly.compileStreaming(fetch(program.wasm)); const workers Array(4).fill().map(() { const worker new Worker(wasm-worker.js); worker.postMessage({ module }); return worker; }); // wasm-worker.js self.onmessage async (e) { const instance await WebAssembly.instantiate(e.data.module); const result instance.exports.compute(); self.postMessage(result); };6.2 Node.js的AsyncLocalStorage解决多线程环境下的上下文共享问题const { AsyncLocalStorage } require(async_hooks); const storage new AsyncLocalStorage(); storage.run({ traceId: 123 }, () { setTimeout(() { console.log(storage.getStore()); // { traceId: 123 } }, 100); });7. 安全注意事项跨线程数据验证// worker.js self.onmessage (e) { if (typeof e.data ! object) return; if (!validateInput(e.data)) return; // 安全处理数据 };限制Worker资源// 设置执行超时 const worker new Worker(task.js); const timeout setTimeout(() { worker.terminate(); }, 5000); worker.onmessage () { clearTimeout(timeout); };沙箱化执行环境// Node.js中使用vm模块 const vm require(vm); const context vm.createContext({}); vm.runInContext(untrustedCode(), context, { timeout: 100, microtaskMode: afterEvaluate });