怎样使用javascript操作webworkers_javascript如何实现多线程-js教程-PHP中文网

web workers 无法直接操作 dom，因运行在独立线程且无 document、window 等 api，只能通过 postmessage 与主线程通信；支持 console、fetch、arraybuffer 等，不支持 localstorage、xmlhttprequest；需注意结构化克隆限制、同源脚本要求及 sharedarraybuffer 使用门槛。

怎样使用javascript操作webworkers_javascript如何实现多线程

Web Workers 不能直接操作 DOM

这是最常踩的坑：试图在 Worker 里调用 document.getElementById 或修改 innerHTML，会立刻报错 ReferenceError: document is not defined。Worker 运行在独立线程，没有全局 window、document、alert 等浏览器 API。

只能通过 postMessage 和主线程通信，把计算结果传回去，由主线程负责更新界面。

Worker 内可用：console、setTimeout、fetch、JSON、ArrayBuffer、WebAssembly
Worker 内不可用：document、window、localStorage（但可用 indexedDB）、XMLHttpRequest（推荐用 fetch）
主线程创建 Worker 必须是同源脚本，不能是 data: 或内联 blob: URL（除非显式用 Blob + URL.createObjectURL）

如何正确创建和通信：主线程与 Worker 的双向 postMessage

通信靠 postMessage + onmessage，注意参数会被结构化克隆（structuredClone），函数、DOM 节点、undefined 会被丢弃。

/* main.js */
const worker = new Worker('./calc-worker.js');
<p>worker.postMessage({ type: 'start', data: [1, 2, 3, 4, 5] });</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3877" title="Revealjs Presentations"><img
														src="https://img.php.cn/upload/skill/000/000/081/178982112515430.jpg" alt="Revealjs Presentations" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill3877" title="Revealjs Presentations" class="overflowclass">Revealjs Presentations</a>
													<p class="overflowclass">创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件，可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill3877" title="Revealjs Presentations" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><p>worker.onmessage = function(e) {
const { type, result } = e.data;
if (type === 'done') {
console.log('计算完成:', result); // 15
}
};</p><p>/<em> calc-worker.js </em>/
self.onmessage = function(e) {
const { type, data } = e.data;
if (type === 'start') {
const sum = data.reduce((a, b) => a + b, 0);
self.postMessage({ type: 'done', result: sum });
}
};</p>

主线程中用 new Worker('./xxx.js')，路径必须是相对或绝对 URL（不能是模块路径，如 ./worker.ts）
Worker 内用 self.postMessage() 发送，用 self.onmessage = ... 接收（self 指向 Worker 全局作用域）
若需传大量数据（如图像像素），用 postMessage(data, [transferList]) 零拷贝转移 ArrayBuffer，避免复制开销

SharedArrayBuffer + Atomics 实现真正共享内存（需 HTTPS + Cross-Origin-Isolated）

普通 Worker 间数据靠拷贝，SharedArrayBuffer 允许主线程与 Worker 直接读写同一块内存，但启用门槛高：

页面必须开启 cross-origin-isolated：响应头需含 Cross-Origin-Embedder-Policy: require-corp 和 Cross-Origin-Opener-Policy: same-origin
现代 Chrome/Firefox 支持，Safari 仍不支持 Atomics.wait 等高级同步原语
SharedArrayBuffer 本身不带锁，必须配合 Atomics 操作（如 Atomics.add、Atomics.wait）防止竞态

// 主线程
const buffer = new SharedArrayBuffer(8);
const sabView = new Int32Array(buffer);
sabView[0] = 0;
<p>const worker = new Worker('./counter-worker.js');
worker.postMessage({ buffer });</p><p>// counter-worker.js
self.onmessage = function(e) {
const view = new Int32Array(e.data.buffer);
Atomics.add(view, 0, 1); // 原子加 1
Atomics.notify(view, 0); // 唤醒等待者
};</p>

常见错误：Worker 报错不显示在主线程控制台

Worker 内抛出未捕获异常（如 ReferenceError、TypeError）默认静默，不会触发主线程的 window.onerror，也看不到堆栈。

务必在 Worker 内加 self.onerror = console.error 或自定义上报
开发时用 chrome://inspect → “Remote Target” 找到你的 Worker，可断点调试
构建工具（如 Webpack/Vite）打包 Worker 时，需配置 worker: { type: 'module' } 才能支持 import 语法；否则只能用 importScripts()
Vite 中动态引入 Worker 要写成 new Worker(new URL('./worker.js', import.meta.url), { type: 'module' })

多线程不是银弹：Worker 启动有开销（约几毫秒），频繁创建销毁反而更慢；适合 CPU 密集型任务（加密、解析大 JSON、Canvas 像素处理），不适合简单逻辑或 I/O 等待型操作。