Web Workers是浏览器提供的后台线程机制,用于执行计算密集型任务而不阻塞主线程;其运行于独立线程、内存隔离、通过postMessage通信、不可访问DOM、支持importScripts。

Web Workers 是浏览器提供的多线程机制,让 JavaScript 能在后台线程中运行脚本,不阻塞主线程(即页面 UI 和用户交互)。它不是“真正的多线程”(JS 本身仍是单线程),而是通过隔离的执行环境实现并发任务处理。
Web Worker 的核心特点
– 运行在独立线程,与主线程内存隔离(不能直接访问 document、window、DOM)
– 通过 postMessage() 和 onmessage 与主线程通信(仅支持结构化克隆,不能传函数或 DOM 节点)
– 支持加载外部脚本(importScripts()),可复用逻辑
– 无法操作 UI,适合计算密集型任务(如数据解析、加密、图像处理、大数组排序)
如何创建一个基本的 Web Worker
分两步:写 Worker 脚本 + 在主线程中实例化
1. 创建 worker.js 文件(后台线程逻辑):
// worker.js
self.onmessage = function(e) {
const data = e.data;
// 模拟耗时计算
let result = 0;
for (let i = 0; i < data * 1e7; i++) {
result += i;
}
self.postMessage({ result });
};
2. 主线程中启动并通信:
立即学习“Java免费学习笔记(深入)”;
每个应用程序都要使用数据,Android应用程序也不例外,Android使用开源的、与操作系统无关的SQL数据库--SQLite,本文介绍的就是如何为你的Android应用程序创建和操作SQLite数据库。 数据库支持每个应用程序无论大小的生命线,除非你的应用程序只处理简单的数据,那么就需要一个数据库系统存储你的结构化数据,Android使用SQLite数据库,它是一个开源的、支持多操作系统的SQL数据库,在许多领域广泛使用,如Mozilla FireFox就是使用SQLite来存储配置数据的,iPhon
// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
console.log('Worker 返回结果:', e.data.result);
};
worker.postMessage(10); // 向 worker 发送数据
使用注意事项和常见技巧
– 路径必须同源:Worker 脚本地址需符合同源策略(不能是 data: 或 blob: 除非用 Blob URL)
– 错误捕获:用 worker.onerror 监听运行时错误(如脚本 404、语法错误)
– 终止 Worker:调用 worker.terminate() 立即销毁,释放资源
– 复用脚本:Worker 内可用 importScripts('lib.js', 'utils.js') 加载多个依赖
– 避免频繁通信:消息传递有开销,大对象建议分块或用 Transferable(如 ArrayBuffer)提升性能
高级用法:内联 Worker(Blob URL)
适合简单逻辑或动态生成代码,避免额外文件请求:
const code = `
self.onmessage = e => {
self.postMessage('Hello from inline worker: ' + e.data);
}
`;
const blob = new Blob([code], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
worker.onmessage = e => console.log(e.data);
worker.postMessage('World');
基本上就这些。Web Workers 不复杂但容易忽略通信模型和作用域限制——记住“不能碰 DOM,只能发消息”,就能避开大部分坑。










