正在加载...

HTML Web Workers

上一课 Drag and Drop 用指针事件移动或标注 DOM 载荷。本课离开指针手势，介绍 Web Workers：在后台线程运行 JavaScript，使长循环不冻结界面。范围务实——创建、传消息、worker 内无 DOM——不是 SharedWorker 集群课。

为何在 HTML 课学 web workers

主线程忙循环时，初学者会看到页面冻结。Worker 是后台计算常见的第一套 API。在 DnD 之后，分工不同：页面脚本拥有 DOM/UI；worker 拥有重计算，只通过消息交谈。

直接回答

1) new Worker("worker.js") 或 Blob。2) 从页面 postMessage。3) 在 worker 中 onmessage、计算、再 postMessage。4) 只在页面更新 DOM。5) 无直接 DOM 访问。6) 优先 http(s) 或 Blob。

📊 main thread vs worker

Topic Main page script Dedicated worker
Typical role UI, DOM, create Worker Heavy compute off UI thread
Talks via postMessage / onmessage postMessage / onmessage
Can touch DOM? Yes No — return data instead
Beginner entry new Worker(url or Blob) onmessage + compute + postMessage
This course depth Required Required (simple round-trip)
Not this lesson Drag-and-drop gestures SharedWorker / Service Worker products

微型 Blob Worker 往返

单个 HTML 用 Blob 构建 worker，无需单独 worker.js。页面发送数字；worker 返回循环求和。

Blob Worker compute round-trip

html 
<button id="go" type="button">Run in worker</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
const src =
"onmessage=function(e){" +
"var n=e.data,s=0,i;" +
"for(i=1;i<=n;i++){s+=i;}" +
"postMessage(s);" +
"};";
const blob = new Blob([src], { type: "application/javascript" });
const w = new Worker(URL.createObjectURL(blob));
w.onmessage = function (e) {
out.textContent = "Sum 1..40 = " + e.data;
};
document.getElementById("go").onclick = function () {
out.textContent = "Working…";
w.postMessage(40);
};
</script>

阅读往返调用

  • Blob + createObjectURL 无需第二文件
  • new Worker 启动后台脚本
  • postMessage 发送数字
  • worker 计算并回复
  • 页面写入 pre——DOM 留在主线程
  • 与 DnD 不同：无 draggable
  • 保持演示精简

UI 留在主线程

Worker 返回数据；页面脚本决定用户看到什么。本演示向 worker 要字符串；页面 onmessage 更新段落。

Worker replies; page updates DOM

html 
<button id="ask" type="button">Ask worker</button>
<p id="msg">Waiting…</p>
<script>
const msg = document.getElementById("msg");
const src =
"onmessage=function(e){" +
"postMessage('Worker got: ' + e.data);" +
"};";
const w = new Worker(
URL.createObjectURL(new Blob([src], { type: "application/javascript" }))
);
w.onmessage = function (e) {
msg.textContent = e.data;
};
document.getElementById("ask").onclick = function () {
w.postMessage("hello");
};
</script>

阅读 UI 所有权思路

  • Worker 只回显字符串——无 document
  • 页面设置 textContent
  • 同一消息桥
  • 不是 DnD
  • 不是 Service Worker 课
  • 当工作有冻结 UI 风险时再用 worker
  • 下一课：SSE

何时使用 worker

  • 长 CPU 循环：适合入门
  • 微小字符串改动：通常留在主线程
  • 把卡片移入区域：那是 DnD
  • GPS：那是 Geolocation
  • SharedWorker/Service Worker 产品：超出本入门
  • 在 worker 内更新按钮：不允许

练习 — 创建、发消息、绘制

  1. 试求和演示。
  2. 改 40。
  3. 试回显演示。
  4. （可选）在 http(s) 上看 worker.js。
  5. 一句话：DnD 用指针；Worker 用消息离线计算。
  6. 优先 http(s)/Blob。
  7. 预告：SSE。

易错点

  • 期望 worker 内可用 querySelector
  • 为琐碎任务用 worker
  • 与 DnD 混淆
  • 脆弱的 file:// 路径
  • 忘记页面 onmessage
  • 把 Blob 当作唯一生产模式
  • 把入门当成完整 SharedWorker 课

小结

  • Worker 在 UI 线程外运行 JS
  • 用 postMessage/onmessage；只在页面画 DOM
  • 经典 worker 无 document/window
  • 演示用 Blob；真实 worker.js 用 http(s)
  • DnD 是指针移动/贴标签；本课是后台计算 + 消息
  • 下一课：SSE

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
5
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 66 的 68
Html 教程