HTML Web Workers 多线程
Web Workers：Worker构造函数创建后台线程、postMessage/onmessage消息传递、Transferable Objects零拷贝转移所有权、SharedWorker多页面共享、内联Worker（Blob URL） · 难度：入门 · +10XP
HTML Web Workers —— 让网页不卡顿的幕后英雄
JavaScript是单线程的——一个耗时计算会把整个页面卡住。Web Workers就是来解决这个问题的。
问题演示
// 这个计算会让整个页面卡住5秒！
for (let i = 0; i < 10000000000; i++) { /* 耗时计算 */ }解决方案：Web Worker
worker.js（独立文件）：
self.onmessage = function(e) {
let sum = 0;
for (let i = 0; i < e.data; i++) { sum += i; }
self.postMessage(sum); // 算完了，把结果发回主线程
};主页面：
const worker = new Worker('worker.js');
worker.postMessage(10000000000);
worker.onmessage = function(e) {
console.log('计算结果：', e.data); // 页面全程不卡顿
};Worker 的限制
| 能做什么 | 不能做什么 |
|---|---|
| 执行JavaScript计算 | 操作DOM（没有document） |
| 发送网络请求 | 访问window对象 |
| 使用定时器 | 直接操作页面元素 |
动手练习
- 基础练习：做一个计算斐波那契数列的Worker。
- 进阶应用：用Worker做实时搜索——后台过滤数据，主线程显示结果。
- 项目实战：加一个进度条和开始计算按钮，Worker在后台计算，计时器每秒更新证明页面没卡。