你是否曾遇到过网页因为复杂计算而卡顿的情况？今天，让我们一起探索Web Worker的神奇世界，看看如何用多线程技术解决性能瓶颈，并实现流畅的图片压缩功能！
为什么需要Web Worker？
想象一下，你在一个繁忙的餐厅里，只有一位服务员（主线程）负责点餐、上菜、结账所有工作。当客人突然暴增时，这位服务员就会手忙脚乱，其他客人只能干等着…
这就是JavaScript的现状——单线程！所有任务都在一个线程中排队执行，一旦遇到复杂计算（如图片处理、大模型运算等），整个页面就会冻结。
Web Worker就是我们的救星！它允许我们在后台创建新的线程，让主线程专注页面渲染和用户交互，复杂任务交给Worker线程处理。
🧙♂️ Web Worker 魔法揭秘
基本概念速览
- HTML5特性：浏览器赋予JS启动新线程的能力
- 独立环境：Worker线程有自己的全局对象（
self代替this） - 无DOM访问：Worker线程不能操作DOM，专注计算
- 消息通信：通过
postMessage和onmessage传递数据
创建你的第一个Worker
主线程代码：
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Web Worker魔法</title>
5</head>
6<body>
7 <script>
8
9 const worker = new Worker('./worker.js');
10
11
12 worker.postMessage('你好，Worker！');
13
14
15 worker.addEventListener('message', e => {
16 console.log('收到回复：', e.data);
17 });
18 </script>
19</body>
20</html>
worker.js（Worker线程）：
1console.log('Worker启动成功！');
2
3self.onmessage = function(e) {
4 console.log('收到主线程消息：', e.data);
5
6
7 const result = e.data.split('').reverse().join('');
8
9
10 self.postMessage(`处理结果：${result}`);
11}
🌟 Worker线程的”三不能”
- 不能操作DOM -
document对象不存在 - 不能使用
this- 需改用self - 不能阻塞主线程 - 这就是它的使命！
🖼️ 实战：Web Worker图片压缩
图片压缩是典型的重计算任务，直接在主线程处理会导致页面卡顿。让我们用Web Worker解决这个问题！
实现思路
- 用户选择图片 -> 转成Base64
- 主线程将Base64发送给Worker
- Worker线程：
- Base64 -> Blob -> Bitmap
- 使用Canvas压缩图片
- 压缩结果转回Base64
- Worker将结果传回主线程显示
Base64
- 定义：Base64是一种基于64个可打印字符来表示二进制数据的编码方式。它常用于在文本协议（如电子邮件）中传输二进制数据。
- 用途：在网络环境中，当需要通过仅支持文本的数据传输层（例如HTTP请求中的URL或POST数据）发送二进制文件（如图片、视频等）时，可以先将这些文件编码为Base64字符串。
Blob
- 定义：Blob（Binary Large Object）是一种用来表示不可变的、原始数据的类文件对象。Blob可以包含任何类型的数据，比如文本或二进制数据。
- 用途：在Web开发中，Blob通常用于处理文件上传下载、图像预览等功能。例如，你可以从一个Base64字符串创建一个Blob对象，然后使用这个Blob对象生成本地链接以展示图片或者进行文件保存。
关于Blob的深度解析在多模态模型数据传输的秘密武器：html5对象Blob深度解析多模态模型数据传输的秘密武器：html5对象Blob深度解析 - 掘金这篇文章中有较为详细的说明
Bitmap
- 定义：位图（Bitmap），也称栅格图形，是由像素组成的图像。每个像素都包含了颜色信息，当放大位图图像时，可以看到一个个独立的小方块，即像素点。
- 用途：位图广泛应用于数字图像处理领域，包括但不限于照片编辑软件、网页显示等。在编程语言中，位图可能由特定的对象或结构体表示，如Android中的
Bitmap类，用于加载、绘制和操作图像。
完整实现代码
主线程（index.html）：
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>Web Worker图片压缩</title>
6 <style>
7 .container { max-width: 800px; margin: 0 auto; }
8 .image-box { display: flex; gap: 20px; margin-top: 20px; }
9 .image-container { flex: 1; border: 1px solid #eee; padding: 10px; }
10 img { max-width: 100%; display: block; }
11 .stats { margin-top: 10px; font-size: 14px; color: #666; }
12 </style>
13</head>
14<body>
15 <div class="container">
16 <h1>Web Worker图片压缩器</h1>
17 <input type="file" id="fileInput" accept="image/*">
18
19 <div class="image-box">
20 <div class="image-container">
21 <h3>原始图片</h3>
22 <div id="originalImg"></div>
23 <div id="originalStats" class="stats"></div>
24 </div>
25 <div class="image-container">
26 <h3>压缩后图片</h3>
27 <div id="compressedImg"></div>
28 <div id="compressedStats" class="stats"></div>
29 </div>
30 </div>
31 </div>
32
33 <script>
34
35 const worker = new Worker('./compressWorker.js');
36
37
38 worker.onmessage = function(e) {
39 if(e.data.success) {
40 const compressedImg = document.createElement('img');
41 compressedImg.src = e.data.data;
42 document.getElementById('compressedImg').innerHTML = '';
43 document.getElementById('compressedImg').appendChild(compressedImg);
44
45
46 document.getElementById('compressedStats').textContent =
47 `压缩后大小: ${(e.data.size / 1024).toFixed(2)}KB`;
48 } else {
49 console.error('压缩失败:', e.data.err);
50 alert(`压缩失败: ${e.data.err}`);
51 }
52 };
53
54
55 function readFileAsDataURL(file) {
56 return new Promise((resolve) => {
57 const reader = new FileReader();
58 reader.onload = () => resolve(reader.result);
59 reader.readAsDataURL(file);
60 });
61 }
62
63
64 document.getElementById('fileInput').addEventListener('change', async (e) => {
65 const file = e.target.files[0];
66 if (!file) return;
67
68
69 const originalDataURL = await readFileAsDataURL(file);
70 const originalImg = document.createElement('img');
71 originalImg.src = originalDataURL;
72 document.getElementById('originalImg').innerHTML = '';
73 document.getElementById('originalImg').appendChild(originalImg);
74 document.getElementById('originalStats').textContent =
75 `原始大小: ${(file.size / 1024).toFixed(2)}KB`;
76
77
78 worker.postMessage({
79 imgData: originalDataURL,
80 quality: 0.6
81 });
82 });
83 </script>
84</body>
85</html>
Worker线程（compressWorker.js）：
1self.onmessage = async function(e) {
2 const { imgData, quality = 0.8 } = e.data;
3
4 try {
5
6 const response = await fetch(imgData);
7 const blob = await response.blob();
8 const bitmap = await createImageBitmap(blob);
9
10
11 const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
12 const ctx = canvas.getContext('2d');
13 ctx.drawImage(bitmap, 0, 0);
14
15
16 const compressedBlob = await canvas.convertToBlob({
17 type: 'image/jpeg',
18 quality
19 });
20
21
22 const reader = new FileReader();
23 reader.onload = () => {
24 self.postMessage({
25 success: true,
26 data: reader.result,
27 size: compressedBlob.size
28 });
29 };
30 reader.readAsDataURL(compressedBlob);
31
32 } catch (err) {
33 self.postMessage({
34 success: false,
35 err: err.message
36 });
37 }
38};
效果展示
💡 最佳实践与注意事项
-
合理选择Worker使用场景：
- 适合：图像/视频处理、复杂计算、大数据分析
- 不适合：简单DOM操作、轻量级任务
-
数据传输优化：
1const buffer = new ArrayBuffer(1024 * 1024); 2worker.postMessage(buffer, [buffer]); -
错误处理：
1worker.onerror = (e) => { 2 console.error(`Worker错误: ${e.filename} (行:${e.lineno}): ${e.message}`); 3}; -
资源释放：
1worker.terminate();
🌈 Web Worker的未来
随着Web应用越来越复杂，Web Worker的重要性不断提升。特别是在以下领域：
- 浏览器端AI：运行机器学习模型
- Web游戏：复杂的物理计算
- 科学计算：生物信息学、数据分析
- PWA应用：后台数据同步和处理
结语
Web Worker就像JavaScript世界的”分身术”，让我们能够突破单线程的限制。通过图片压缩的实战案例，我们看到了Worker如何将繁重的计算任务转移到后台，保持页面的流畅响应。
小提示：在现代前端框架（React、Vue等）中，也可以轻松集成Web Worker，只需将Worker文件放在public目录或使用worker-loader等工具即可。
个人笔记记录 2021 ~ 2025