Web Workers通过在后台线程执行JavaScript，避免主线程阻塞，提升页面响应性。它适用于计算密集型任务，如大数据处理、图像操作、复杂算法等，能有效分离UI渲染与逻辑计算，结合Transferable Objects可优化通信性能，调试较复杂但现代工具已支持良好，另有Shared Worker、Service Worker和Worklets等扩展类型适应不同场景。
Web Workers本质上就是浏览器提供的一种在后台线程运行JavaScript脚本的能力，它最核心的作用就是让那些计算量大、耗时长的任务不再霸占主线程，从而避免界面卡顿、用户体验下降。你可以把它理解成给浏览器开辟了一个独立的“小作坊”，专门处理一些脏活累活，而主界面依然能流畅地响应用户的操作。
要使用Web Workers，核心思路就是将那些可能导致页面卡死的计算逻辑，从主线程剥离出去，放到一个独立的
.js
Worker
1. 创建Worker实例： 在主线程脚本中，你通过
new Worker()
// main.js (主线程)
const myWorker = new Worker('worker.js');2. 主线程与Worker的通信： 通信主要通过
postMessage()
onmessage
主线程向Worker发送数据：
// main.js
myWorker.postMessage({ type: 'startCalculation', data: [1, 2, 3, ..., 1000000] });
console.log('消息已发送给Worker，主线程继续执行...');postMessage()
主线程接收Worker返回的数据：
// main.js
myWorker.onmessage = function(event) {
const result = event.data; // event.data 就是Worker发送过来的数据
console.log('Worker计算结果：', result);
// 在这里更新UI，因为现在是在主线程了
};
// 错误处理：当Worker内部发生未捕获的错误时
myWorker.onerror = function(error) {
console.error('Worker发生错误:', error);
};3. Worker内部的逻辑 (worker.js
self
window
navigator
location
XMLHttpRequest
fetch
Worker接收主线程发送的数据：
// worker.js
self.onmessage = function(event) {
const message = event.data;
if (message.type === 'startCalculation') {
console.log('Worker收到数据，开始计算...');
let sum = 0;
for (let i = 0; i < message.data.length; i++) {
sum += message.data[i]; // 模拟一个耗时计算
}
// 计算完成后，将结果发送回主线程
self.postMessage({ type: 'calculationComplete', result: sum });
}
};Worker向主线程发送数据： 通过
self.postMessage()
关闭Worker： 当Worker完成了它的任务，或者不再需要时，可以通过
terminate()
self.close()
// main.js myWorker.terminate(); // 主线程关闭Worker // worker.js // self.close(); // Worker内部关闭自己
一个完整的简单示例：
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Worker 示例</title>
</head>
<body>
<h1>Web Worker 演示</h1>
<button id="startCalc">开始复杂计算</button>
<p>计算结果：<span id="result">等待中...</span></p>
<p>主线程状态：<span id="status">空闲</span></p>
<script>
const startButton = document.getElementById('startCalc');
const resultSpan = document.getElementById('result');
const statusSpan = document.getElementById('status');
const myWorker = new Worker('worker.js');
startButton.addEventListener('click', () => {
statusSpan.textContent = '主线程正在模拟繁忙...';
// 模拟主线程的UI阻塞任务
let i = 0;
const intervalId = setInterval(() => {
i++;
if (i > 100000000) { // 模拟耗时操作，不使用Worker的话会卡住
clearInterval(intervalId);
statusSpan.textContent = '主线程模拟繁忙结束。';
}
}, 0);
// 发送数据给Worker进行实际的复杂计算
const largeArray = Array.from({ length: 50000000 }, (_, i) => i + 1);
myWorker.postMessage(largeArray);
resultSpan.textContent = 'Worker正在计算中...';
});
myWorker.onmessage = function(event) {
resultSpan.textContent = event.data;
console.log('Worker计算完成，结果已更新。');
};
myWorker.onerror = function(error) {
console.error('Worker出错了:', error);
resultSpan.textContent = '计算失败！';
};
</script>
</body>
</html>worker.js
// worker.js
self.onmessage = function(event) {
const data = event.data;
console.log('Worker收到数据，开始求和...');
let sum = 0;
for (let i = 0; i < data.length; i++) {
sum += data[i];
}
console.log('Worker计算完成，准备发送结果。');
self.postMessage(sum); // 将计算结果发送回主线程
};Web Workers最核心的价值在于它能把浏览器主线程从繁重的计算任务中解放出来，让用户界面始终保持响应。这在很多场景下都显得尤为重要，尤其是在处理一些计算密集型或者IO密集型（但通过Ajax/Fetch完成）的任务时。
想象一下，你正在开发一个图片编辑器，用户上传了一张高分辨率图片，然后想应用一个复杂的滤镜。如果这个滤镜算法直接跑在主线程，整个页面可能就会“假死”几秒钟，用户会觉得应用卡顿了。但如果把这个滤镜计算放到Web Worker里，主线程依然可以愉快地显示加载动画、响应用户的其他点击，等Worker计算完了，再把处理好的图片数据传回来显示。
具体的应用场景，我个人觉得主要体现在：
它和
async/await
async/await
Web Workers虽然好用，但它毕竟是独立于主线程的，所以在使用上有一些需要特别注意的地方，不然很容易踩坑。我个人觉得最容易犯错的就是对它的隔离性理解不够。
window
document.getElementById()
postMessage
Transferable Objects
ArrayBuffer
MessagePort
ImageBitmap
file://
self
<script src="...">
importScripts()
onerror
Worker
onerror
总的来说，Web Workers是把双刃剑，用得好能大幅提升应用性能，用不好反而可能引入新的复杂性。关键在于理解其工作原理和限制。
Web Workers家族其实比我们通常理解的“经典Worker”（即Dedicated Worker）要庞大一些，它们各自有特定的应用场景和能力边界。
Shared Workers（共享Worker）： 顾名思义，共享Worker可以被多个同源的浏览上下文（如不同的浏览器标签页、iframe）共享。这意味着你可以在多个页面之间共享一个Worker实例，并让它们通过这个Worker进行通信或者共享数据。
MessagePort
onconnect
MessagePort
Service Workers（服务Worker）： 这是Web Workers家族里最“出圈”的一个成员，它不仅仅是一个后台线程，更像是一个可编程的网络代理。Service Worker能够拦截和处理网络请求，从而实现离线缓存、推送通知、后台同步等功能，是渐进式Web应用（PWA）的核心技术之一。
Cache API
fetch
Push API
Background Sync API
Worklets（工作小线程）： Worklets是更低级别、更专业化的Worker变体，它们允许开发者在渲染管道的特定阶段注入JavaScript代码，以实现高性能的图形和音频处理。它们通常比通用Web Worker更轻量，生命周期更短，且有更严格的限制。
这些变体扩展了Web Workers的能力边界，使得Web应用能够处理更复杂的任务，提供更接近原生应用的体验。在选择使用哪种Worker时，需要根据具体的业务需求和性能目标来权衡。比如，如果你只是想在后台跑个计算，Dedicated Worker就够了；如果想做离线应用或推送，那肯定是Service Worker；如果想实现一些自定义的CSS绘制或音频处理，Worklets才是你的菜。
此外，还有一些库和工具可以帮助我们更方便地使用Web Workers，比如
Comlink
workerize-loader
以上就是Web Workers怎么使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
745
收藏
