JavaScript Academy · 课时

应用场景与限制

Q: 「应用场景与限制」这节课中我会学到什么？

了解 Worker 何时有帮助，以及它们无法完成什么。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解 Worker 何时有帮助，以及它们无法完成什么。

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

worker 擅长的工作

当您需要执行原本会冻结用户界面的 CPU 密集型工作时，Web worker 非常有用：

图像和视频处理
解析大型文件（CSV、JavaScript 对象表示法）
密码学和哈希计算
物理计算、数据分析和模拟

无法访问 DOM

最大的限制是：worker 无法操作 DOM。这里没有 document 或 window。worker 负责计算数据并将其发回；主线程负责更新用户界面。

// Inside a worker:
// document.querySelector(...) -> ReferenceError
// Workers have no DOM at all.

可用的 IS 功能

worker 仍然可以使用许多实用的 API：fetch、setTimeout、WebSocket、IndexedDB、crypto 和类型化数组。因此，在后台线程中进行数据获取和存储完全可行。

// Inside a worker this is valid:
// const res = await fetch('/data.json');
// const json = await res.json();
// self.postMessage(json);

结构化克隆的限制

请记住，消息会通过结构化克隆进行复制。您不能发送函数、DOM 节点或带有方法的类实例，只能发送其中可序列化的数据。

// Cannot be sent:
// worker.postMessage(() => {});      // function - fails
// worker.postMessage(document.body); // DOM node - fails

启动与消息传递的开销

创建 worker 和序列化消息都需要开销。对于很小的任务，消息传递的成本可能超过 worker 带来的收益。只有工作量较大且持续时间较长时，使用 worker 才更有价值。

保持 worker 运行

每个任务都启动一个新的 worker 是浪费资源的。请重复使用一个长期运行的 worker 并向它发送多条消息，或者维护一个小型 worker 池来实现并行处理。

// Reuse one worker for many tasks:
const worker = new Worker('worker.js');
function run(task) {
  worker.postMessage(task);
}
// Avoid: new Worker(...) on every single call.

worker 池

要使用多个 CPU 核心，请创建多个 worker，并在它们之间分配任务。跟踪哪些 worker 处于空闲状态，并将新任务分配给空闲的 worker。

const pool = [];
for (let i = 0; i < 4; i++) {
  pool.push(new Worker('worker.js'));
}
// Round-robin or queue tasks across the pool.

共享内存

对于高级场景，SharedArrayBuffer 可以让线程直接共享内存（使用 Atomics 进行安全访问）。这需要特殊的跨源隔离标头，而且很容易被误用。

// Requires COOP/COEP headers to be enabled.
// const shared = new SharedArrayBuffer(1024);
// Atomics.add(view, 0, 1); // safe concurrent update

错误隔离

worker 中未捕获的错误不会使页面崩溃。它会在 worker 上表现为一个 error 事件，您应当处理该事件，以便记录日志或重新启动 worker。

worker.onerror = (e) => {
  console.log('worker failed:', e.message);
  // optionally recreate the worker here
};

不应使用 NOT 的情况

当任务非常简单、需要持续更新 DOM，或主要是在等待网络响应时，请跳过 worker（异步 fetch 本身不会阻塞）。请将 worker 用于真正受 CPU 限制的工作。

综合运用

Web worker 以无法直接访问 DOM 和不易共享数据为代价，换来了真正的并行处理能力。请将它们用于繁重计算，通过消息进行通信，重复使用 worker，并传输大型 buffer，以保持应用快速流畅。

快速检查

请测试您对 worker 应用场景和限制的理解。

回顾

您已经学会了 worker 的应用场景和限制：

适合 CPU 密集型工作，但无法访问 DOM。
许多 API（数据获取、IndexedDB、加密）都可用。
消息会通过结构化克隆处理，因此不能传递函数或 DOM 节点。
重复使用 worker 或 worker 池，可以分摊启动开销。
错误会隔离在 worker 中。

您已经完成了 Web worker 的学习。接下来将学习 IndexedDB。

常见问题解答

「应用场景与限制」课时是免费的吗？

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

「应用场景与限制」这节课中我会学到什么？

了解 Worker 何时有帮助，以及它们无法完成什么。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「应用场景与限制」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy