在浏览器端执行大量循环计算或数据解析时，如果所有逻辑都跑在UI线程，用户点击和滚动都会明显变卡。HTML5引入的Web Workers正是为解决这类问题而设计的后台线程方案，它让脚本脱离主线程运行。而HTML4规范中并没有对应的多线程标准，旧项目只能借助其他手段模拟。
Web Workers的基本工作原理
Web Workers运行在与页面主线程分离的独立上下文中，拥有自己的全局作用域，不能直接操作DOM，也不能使用window对象上的多数方法。主线程与Worker之间通过postMessage发送数据，并通过onmessage接收对方传来的消息，底层基于结构化克隆算法拷贝对象，因此传递大对象会有一定性能开销。
这种隔离设计带来两个明显好处：一是耗时任务不会阻塞渲染和交互；二是线程崩溃通常不会拖垮整个页面。不过Worker也无法访问localStorage、document等接口，需要主线程代理完成相关操作。在规划任务拆分时，应把纯计算、数据排序、加解密等逻辑放入Worker，把界面更新保留在主线程。
HTML5中如何创建和使用Worker
使用Worker的第一步是把后台逻辑写在一个独立js文件中，然后通过new Worker(url)实例化。主线程调用worker.postMessage把参数送进去，Worker内部用self.onmessage监听并回传结果。下面示例演示了主线程派发求和任务，Worker完成后再把结果返回。
// main.js 主线程代码
var worker = new Worker('compute.js');
worker.onmessage = function (e) {
console.log('收到Worker结果：' + e.data);
};
worker.postMessage({ nums: [1, 2, 3, 4, 5] });
// compute.js Worker线程代码
self.onmessage = function (e) {
var sum = 0;
var arr = e.data.nums;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
self.postMessage(sum);
};
当任务结束或页面卸载时，应当调用worker.terminate()主动释放线程，避免内存占用。若Worker中需要引入其他脚本，可使用importScripts('helper.js')，但注意该方法会同步加载并执行，可能短暂影响Worker效率。
对于较新浏览器，还可以使用SharedWorker实现多个页面共享同一后台线程，适合做跨标签页的状态同步。但在移动端兼容性参差不齐，生产环境使用前建议用特性检测判断typeof Worker是否为function。
HTML4能否实现多线程处理
严格来说，HTML4规范没有定义任何多线程脚本执行标准，当时主流浏览器也不会在页面里开多个JS引擎线程。开发者常提到的“伪多线程”其实是利用setTimeout分片、动态创建iframe，或把任务交给后端服务来完成，并不是真正的并行计算。
一种常见兼容写法是把大循环切成小块，每次用setTimeout推迟到下个事件周期，让浏览器有机会处理用户输入。示例代码如下：
// HTML4时代的分片处理示例
var list = new Array(100000).join(',').split(',').map(function (_, i) { return i; });
var index = 0;
function chunkProcess() {
var end = Math.min(index + 500, list.length);
for (; index < end; index++) {
list[index] = list[index] * 2;
}
if (index < list.length) {
setTimeout(chunkProcess, 0);
} else {
console.log('处理完成');
}
}
chunkProcess();
上述方式虽能减少卡顿，但所有代码依旧跑在单线程，无法利用多核CPU。另一种思路是把计算逻辑放到服务端，前端通过XMLHttpRequest轮询或长连接获取结果，这依赖网络且实时性较弱。因此若项目允许升级运行环境，优先采用HTML5的Web Workers才是正解。
两种环境的方案对比
我们将关键差异整理成表格，方便在技术选型时快速判断：
| 维度 | HTML5 Web Workers | HTML4模拟方案 |
|---|---|---|
| 是否真多线程 | 是，独立线程并行 | 否，单线程分片 |
| DOM访问 | 不可直接访问 | 可直接访问 |
| 多核利用 | 可以利用 | 无法利用 |
| 兼容性 | 现代浏览器支持 | 极旧浏览器可用 |
从表里能看出，Worker在性能和架构清晰度上优势明显，而老方案仅作为降级补充。实际开发中可封装一个统一任务接口，环境支持Worker时走后台线程，不支持时自动切换到分片处理，从而兼顾体验与兼容。
使用注意事项与避坑点
不少人在初次使用Worker时试图直接传递函数或包含方法的对象，由于结构化克隆不支持函数，会导致报错。应只传纯数据，执行逻辑预先写在Worker文件里。另外跨域加载Worker脚本会被浏览器拦截，本地调试请通过http服务而非file协议打开页面。
还有一点容易忽略：Worker中抛出的异常不会冒泡到主线程，需在Worker内用self.onerror捕获并postMessage出来，主线程再做日志上报。合理加上心跳机制和超时终止，能防止个别浏览器中Worker僵死占用资源。
Web_WorkersHTML5多线程HTML4限制修改时间：2026-08-05 10:00:36