Web Worker 基础
在后台线程运行 JavaScript，避免阻塞 UI
问题
Web Worker 是什么？如何使用它来避免页面卡顿？
解答
Web Worker 是 HTML5 提供的一项技术，允许 JavaScript 在后台线程运行，避免阻塞主线程。主线程可以专注于用户交互和 UI 渲染，而耗时任务交给 Worker 处理。
基本使用
创建一个 Worker：
// main.js
const worker = new Worker('worker.js');
// 发送消息给 Worker
worker.postMessage({ data: 'hello' });
// 接收 Worker 的消息
worker.onmessage = function(e) {
console.log('收到消息:', e.data);
};
// 错误处理
worker.onerror = function(e) {
console.error('Worker 错误:', e.message);
};Worker 文件：
// worker.js
self.onmessage = function(e) {
console.log('Worker 收到:', e.data);
// 执行耗时计算
const result = heavyComputation(e.data);
// 返回结果
self.postMessage(result);
};
function heavyComputation(data) {
// 模拟耗时操作
let sum = 0;
for (let i = 0; i < 1000000000; i++) {
sum += i;
}
return sum;
}运行环境限制
Worker 运行在沙箱环境中，无法访问：
- DOM 元素
- window 对象
- document 对象
- parent 对象
可以使用：
- navigator 对象
- location 对象（只读）
- XMLHttpRequest
- setTimeout/setInterval
- importScripts() 加载其他脚本
关键点
- 在独立线程运行，不阻塞主线程
- 通过
postMessage和onmessage进行通信 - 无法访问 DOM，运行在受限的沙箱环境
- 适合处理大量计算、数据处理等耗时任务
- 浏览器和 Node.js 都支持（Node.js 使用 Worker Threads）
目录