JavaScript Academy · 课时

创建 Web Worker

Q: 「创建 Web Worker」这节课中我会学到什么？

创建后台线程来执行任务。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

创建后台线程来执行任务。

创建 Web Worker 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

为什么使用 Web 工作线程

JavaScript 在单个主线程上运行。长时间计算会阻塞所有操作：界面冻结，点击也无法响应。Web 工作线程 会在后台线程上运行脚本，从而保持页面响应。

创建工作线程

将脚本 URL 传递给 Worker 构造函数，即可创建一个工作线程。浏览器会加载该文件，并在独立线程上运行它。

const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.

工作线程脚本

工作线程文件是普通的 JavaScript，但会在自己的全局作用域中运行（没有 window，也没有 document）。它只能通过消息进行通信。

// worker.js
console.log('worker started');
// This runs off the main thread.

两个独立的全局作用域

主页面和工作线程各自拥有独立的全局作用域和内存。它们不能直接共享变量，而是通过消息交换数据副本。

主线程：window、DOM、用户界面
工作线程：self、计算能力，没有 DOM

工作线程中的 self

在工作线程中，全局对象是 self（一个 DedicatedWorkerGlobalScope）。您可以在它上面绑定处理程序并调用 API，不过 self 通常可以省略。

// worker.js
self.addEventListener('message', (e) => {
  console.log('worker got:', e.data);
});

模块工作线程

您可以通过传递 type: 'module' 选项，创建一个使用 ES 模块 import 的工作线程。这样，工作线程就能整洁地导入其他模块。

const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.

导入脚本（经典模式）

在经典（非模块）工作线程中，使用 importScripts 将其他脚本同步加载到工作线程作用域中。

// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.

终止工作线程

在主线程中使用 worker.terminate() 停止工作线程，或在工作线程内部使用 self.close() 停止它。这样可以释放线程及其占用的内存。

// From the main thread:
worker.terminate();

// From inside the worker:
// self.close();

处理工作线程错误

监听工作线程上的 error 事件，以捕获其中抛出的未捕获异常。该事件会携带消息、文件名和行号。

worker.addEventListener('error', (e) => {
  console.log('worker error:', e.message, 'at line', e.lineno);
});

同源要求

工作线程脚本必须与页面来自同一源（或通过 Blob URL 提供）。您不能直接从任意跨源 URL 加载工作线程。

// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');

// You can also build one from a Blob URL when needed.

专用与共享工作线程

Worker 是专用的，只与创建它的页面关联。多个同源页面可以访问 SharedWorker。本课程将重点介绍专用工作线程。

快速检查

测试您对创建 Web 工作线程的理解。

回顾

您学会了创建 Web 工作线程：

new Worker('worker.js') 会创建一个后台线程。
工作线程拥有自己的全局对象（self），并且没有 DOM。
使用 type: 'module' 导入模块，或在经典工作线程中使用 importScripts。
terminate() / self.close() 可以停止工作线程。
工作线程必须与页面同源。

接下来学习线程之间的消息传递。

常见问题解答

「创建 Web Worker」课时是免费的吗？

是的 — 「创建 Web Worker」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「创建 Web Worker」这节课中我会学到什么？

创建后台线程来执行任务。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「创建 Web Worker」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy