JavaScript 中怎么创建并初始化一个独立的 Web Worker 脚本文件-js教程-PHP中文网

需将 worker 逻辑写在独立同源 js 文件（如 worker.js）中，主线程用 new worker('path') 加载，通过 onmessage/postmessage 通信，支持模块化（type: 'module'），使用后须调用 terminate() 或 close() 终止。

javascript 中怎么创建并初始化一个独立的 web worker 脚本文件

要创建并初始化一个独立的 Web Worker，需将工作逻辑写在单独的 JavaScript 文件中，再通过 Worker 构造函数加载执行。关键在于脚本文件必须是同源的、可通过 URL 访问的独立文件（不能是内联字符串或 Blob URL，除非显式构造）。

1. 编写独立的 Worker 脚本文件

新建一个文件，例如 worker.js，内容直接使用全局作用域中的 self（等价于 globalThis），监听 message 事件并用 postMessage() 回传结果：

// worker.js
self.onmessage = function(e) {
  const data = e.data;
  // 示例：简单计算
  const result = data.value * 2;
  self.postMessage({ result });
};

注意：不要使用 window、document 等 DOM API；可用 fetch、setTimeout、importScripts() 等 Worker 环境支持的 API。

2. 在主线程中创建并启动 Worker

确保 worker.js 与主页面同源（如都在 http://localhost:3000/ 下），然后用相对或绝对路径初始化：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

// main.js 或 HTML 中的 script 标签内
const worker = new Worker('worker.js');
<p>worker.onmessage = function(e) {
console.log('收到 Worker 结果:', e.data.result);
};</p><p>worker.postMessage({ value: 42 }); // 向 Worker 发送数据</p>

路径必须是有效的 URL —— 不能是 file:// 协议下的本地文件（开发时建议用本地服务器如 live-server 或 npm run dev）
若 Worker 文件在子目录，路径需写全，如 'js/worker.js'
出错时可通过 worker.onerror 捕获，例如脚本 404 或语法错误

3. 可选：模块化 Worker（ES Module Worker）

如果希望用 import 语法组织代码，可启用模块模式：

// 创建模块型 Worker（需浏览器支持）
const worker = new Worker('worker.js', { type: 'module' });
<p>// worker.js 内可使用：
// import { helper } from './utils.js';
// self.onmessage = ... </p>