当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript多线程怎么用？Workers教程详解

JavaScript多线程怎么用？Workers教程详解

2026-02-14 23:09:52 0浏览收藏

JavaScript 本身是单线程的，但通过 Web Worker 可在浏览器中启用真正的多线程能力——Worker 在独立线程中运行，内存隔离、不阻塞主线程，完美解决耗时计算（如大JSON解析、图像处理、复杂算法）导致的UI卡顿问题；不过它无法访问DOM、window或localStorage，所有通信必须通过序列化的 `postMessage`/`onmessage` 进行，且脚本需同源、路径相对HTML文件，模块化Worker还需显式声明 `type="module"` 并禁用 `importScripts()`；真正挑战不在于“开启线程”，而在于如何安全、高效地在主线程与Worker之间搬运数据——理解这些边界，才能用好这个强大却严谨的并发机制。

javascript如何实现 Workers_如何进行多线程编程【教程】

Web Worker 创建后为什么主线程没卡住？

因为 Web Worker 在浏览器分配的独立线程中运行，与主线程内存隔离。它不能直接操作 document、window 或 localStorage，所有通信必须通过 postMessage() 和 onmessage 进行序列化传递。

常见误操作：在 Worker 文件里写 document.getElementById() —— 会直接报 ReferenceError: document is not defined。

Worker 脚本必须是同源的独立 JS 文件（不能是内联字符串或 Blob URL，除非显式指定）
构造时传入的路径是相对于当前 HTML 的，不是相对于 JS 文件的
Chrome DevTools 的 “Application → Service Workers” 不显示普通 Worker，得去 “Sources → Workers” 面板查看

如何用 `Worker` 处理耗时计算而不阻塞 UI？

典型场景：解析大 JSON、加密解密、图像像素处理、复杂路径规划。关键不是“多线程”，而是“把重活移出主线程”。

示例：主线程启动 Worker 并监听结果：

// main.js
const worker = new Worker('./math-worker.js');
worker.postMessage({ type: 'fib', n: 40 });
worker.onmessage = (e) => {
  console.log('Result:', e.data); // { result: 102334155 }
};

Worker 文件中必须调用 self.onmessage 接收，用 self.postMessage 返回：

// math-worker.js
self.onmessage = function(e) {
  if (e.data.type === 'fib') {
    const fib = (n) => n

不要在 Worker 里用 console.log 依赖调试 —— 输出会出现在 DevTools 的 “Console” 但归属为 “Worker” 上下文，容易被忽略
频繁通信（如每帧传 Canvas 像素）会成为瓶颈，考虑用 Transferable 对象（如 ArrayBuffer）避免拷贝
Worker 实例不自动销毁，记得在不需要时调用 worker.terminate()

SharedArrayBuffer + Atomics 能否真正共享内存？

可以，但有严格前提：必须启用跨域隔离（crossorigin 属性 + HTTP 头 Cross-Origin-Embedder-Policy: require-corp 和 Cross-Origin-Opener-Policy: same-origin），否则 SharedArrayBuffer 构造会抛 TypeError。

一旦启用，多个 Worker 可读写同一块内存：

// 主线程
const buffer = new SharedArrayBuffer(1024);
const view = new Int32Array(buffer);
Atomics.store(view, 0, 42);

// worker.js
const view = new Int32Array(buffer);
console.log(Atomics.load(view, 0)); // 42

没有 Atomics 直接读写会导致竞态 —— 比如两个 Worker 同时 view[0]++，结果可能只加了一次
Atomics.wait() 和 Atomics.notify() 可实现简单信号量，但无法替代完整锁机制
目前 Safari 对 SharedArrayBuffer 支持仍受限（仅 macOS 12.3+ 且需用户手动开启实验性功能）

Worker 中如何加载模块或使用 `importScripts`？

传统 Worker 只支持 importScripts('a.js', 'b.js') 同步加载脚本，不支持 import 语法。若要用 ES 模块，必须用 new Worker(url, { type: 'module' })。

模块 Worker 示例：

// main.js
const worker = new Worker('./worker.mjs', { type: 'module' });

// worker.mjs
import { heavyCalc } from './utils.mjs';
self.onmessage = (e) => {
  self.postMessage(heavyCalc(e.data));
};

type: 'module' 是必需参数，漏掉会报 SyntaxError: Cannot use import statement outside a module
模块 Worker 中不能用 importScripts()，反之亦然 —— 两者运行环境不兼容
动态 import() 在模块 Worker 中可用，但注意路径解析仍基于 HTML 页面 URL，不是 Worker 文件位置

Worker 的边界比想象中更硬：没有 DOM、没有全局变量泄漏、没有隐式共享。真正麻烦的从来不是“怎么开线程”，而是“数据怎么安全、高效地来回搬”。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~