各位亲爱的同学们，晚上好！我是你们的老朋友，今天咱们聊点刺激的：Web Worker，这玩意儿可是能让你的JavaScript代码飞起来的秘密武器！
开场白：为什么我们需要Web Worker？
想象一下，你在做一个炫酷的网页，有个功能需要计算一大堆数据，结果网页卡成了PPT，用户对着屏幕发呆……是不是很尴尬？ 这是因为JavaScript是单线程的，所有任务都在主线程上排队执行。如果某个任务太耗时，就会阻塞主线程，导致页面无响应。
Web Worker就是来拯救你的！它允许你在后台线程中运行JavaScript代码，不会阻塞主线程，让你的网页始终保持流畅。简单来说，就是找个小弟帮你干活，老板（主线程）只负责指挥。
第一章：Web Worker初体验：你好，多线程！
咱们先来个最简单的例子，让你感受一下Web Worker的魅力。
-
创建Worker文件 (worker.js):
// worker.js self.addEventListener('message', function(event) { const data = event.data; console.log('Worker: 收到消息:', data); // 模拟耗时计算 let result = 0; for (let i = 0; i < data.count; i++) { result += i; } // 将结果返回给主线程 self.postMessage({ result: result }); console.log('Worker: 发送消息:', { result: result }); });self.addEventListener('message', ...): 这是Worker接收消息的监听器，类似于主线程中的addEventListener('message', ...)。event.data: 包含了主线程发送过来的数据。self.postMessage(...): 这是Worker向主线程发送消息的方法。
-
主线程代码 (index.html):
<!DOCTYPE html> <html> <head> <title>Web Worker Example</title> </head> <body> <h1>Web Worker Demo</h1> <button id="startWorker">Start Worker</button> <div id="result"></div> <script> const startWorkerButton = document.getElementById('startWorker'); const resultDiv = document.getElementById('result'); startWorkerButton.addEventListener('click', function() { // 创建Worker实例 const worker = new Worker('worker.js'); // 监听Worker发来的消息 worker.addEventListener('message', function(event) { const data = event.data; console.log('Main: 收到消息:', data); resultDiv.textContent = 'Result: ' + data.result; }); // 向Worker发送消息 const count = 100000000; // 模拟大量计算 worker.postMessage({ count: count }); console.log('Main: 发送消息:', { count: count }); //Worker发生错误 worker.addEventListener('error', function(error) { console.error('Worker error:', error); }); // 可选：在任务完成后终止Worker // setTimeout(function() { // worker.terminate(); // console.log('Worker terminated.'); // }, 5000); }); </script> </body> </html>new Worker('worker.js'): 创建Worker实例，参数是Worker文件的路径。worker.addEventListener('message', ...): 监听Worker发来的消息。worker.postMessage(...): 向Worker发送消息。worker.terminate(): 终止Worker。 不terminate的话，worker会一直处于活动状态。
-
运行效果:
点击 "Start Worker" 按钮，你会发现页面没有卡顿，结果会很快显示出来。打开浏览器的开发者工具，你会看到主线程和Worker线程分别打印了消息，证明它们是并行运行的。
第二章：Web Worker的类型：专用型与共享型
Web Worker分为两种类型：
-
专用Worker (Dedicated Worker): 只能被创建它的脚本使用。上面的例子就是专用Worker。
-
共享Worker (Shared Worker): 可以被来自同一域的不同脚本使用。 稍微复杂一点，需要通过
SharedWorker构造函数创建，并且需要通过port对象进行通信。-
创建共享Worker文件 (shared_worker.js):
// shared_worker.js let connections = 0; self.addEventListener('connect', function(event) { const port = event.ports[0]; connections++; console.log('SharedWorker: 新连接，当前连接数:', connections); port.addEventListener('message', function(event) { const data = event.data; console.log('SharedWorker: 收到消息:', data); // 将消息广播给所有连接的客户端 for (let i = 0; i < self.clients.length; i++) { self.clients[i].postMessage({ message: 'SharedWorker: ' + data.message }); } port.postMessage({ response: 'SharedWorker: 已处理消息' }); console.log('SharedWorker: 发送消息:', { response: 'SharedWorker: 已处理消息' }); }); port.start(); // 启动端口 });self.addEventListener('connect', ...): 监听客户端连接请求。event.ports[0]: 获取连接端口。port.start(): 启动端口，开始接收消息。self.clients: 一个Client对象的对象数组,代表连接到这个共享worker的所有客户端。
-
主线程代码 (index.html 和 another_page.html):
<!-- index.html --> <!DOCTYPE html> <html> <head> <title>Shared Worker Example - Page 1</title> </head> <body> <h1>Shared Worker Demo - Page 1</h1> <input type="text" id="messageInput1"> <button id="sendMessage1">Send Message</button> <div id="result1"></div> <script> const messageInput1 = document.getElementById('messageInput1'); const sendMessage1 = document.getElementById('sendMessage1'); const resultDiv1 = document.getElementById('result1'); // 创建SharedWorker实例 const sharedWorker = new SharedWorker('shared_worker.js'); // 监听SharedWorker发来的消息 sharedWorker.port.addEventListener('message', function(event) { const data = event.data; console.log('Page 1: 收到消息:', data); resultDiv1.textContent = 'Page 1: ' + data.message || data.response; }); sharedWorker.port.start(); // 启动端口 sendMessage1.addEventListener('click', function() { const message = messageInput1.value; sharedWorker.port.postMessage({ message: message }); console.log('Page 1: 发送消息:', { message: message }); }); </script> </body> </html> <!-- another_page.html --> <!DOCTYPE html> <html> <head> <title>Shared Worker Example - Page 2</title> </head> <body> <h1>Shared Worker Demo - Page 2</h1> <input type="text" id="messageInput2"> <button id="sendMessage2">Send Message</button> <div id="result2"></div> <script> const messageInput2 = document.getElementById('messageInput2'); const sendMessage2 = document.getElementById('sendMessage2'); const resultDiv2 = document.getElementById('result2'); // 创建SharedWorker实例 const sharedWorker = new SharedWorker('shared_worker.js'); // 监听SharedWorker发来的消息 sharedWorker.port.addEventListener('message', function(event) { const data = event.data; console.log('Page 2: 收到消息:', data); resultDiv2.textContent = 'Page 2: ' + data.message || data.response; }); sharedWorker.port.start(); // 启动端口 sendMessage2.addEventListener('click', function() { const message = messageInput2.value; sharedWorker.port.postMessage({ message: message }); console.log('Page 2: 发送消息:', { message: message }); }); </script> </body> </html>new SharedWorker('shared_worker.js'): 创建SharedWorker实例。sharedWorker.port: 获取连接端口。- 必须调用
sharedWorker.port.start()来启动端口才能开始通信。
-
运行效果:
同时打开
index.html和another_page.html，你会发现两个页面共享同一个Worker。 在一个页面发送消息，另一个页面也能收到。
-
第三章：Web Worker的应用场景：用对地方才能发挥威力
Web Worker不是万能的，它更适合处理以下类型的任务：
- CPU密集型计算: 例如图像处理、视频编码、密码破解等等。
- 数据处理: 例如大数据分析、数据清洗、数据转换等等。
- 网络请求: 例如轮询服务器、预取数据等等。
不适合的场景：
- DOM操作: Web Worker无法直接访问DOM，只能通过消息传递来间接操作。
- 频繁的通信: 消息传递有开销，如果主线程和Worker线程需要频繁通信，可能会降低性能。
举例：图像处理
假设我们需要对一张图片进行灰度处理。
-
Worker文件 (image_worker.js):
// image_worker.js self.addEventListener('message', function(event) { const imageData = event.data.imageData; const width = imageData.width; const height = imageData.height; const data = imageData.data; // 灰度处理 for (let i = 0; i < data.length; i += 4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; const gray = (r + g + b) / 3; data[i] = gray; data[i + 1] = gray; data[i + 2] = gray; } self.postMessage({ imageData: imageData }); }); -
主线程代码 (index.html):
<!DOCTYPE html> <html> <head> <title>Image Processing with Web Worker</title> </head> <body> <h1>Image Processing with Web Worker</h1> <canvas id="originalCanvas" width="400" height="300"></canvas> <canvas id="processedCanvas" width="400" height="300"></canvas> <script> const originalCanvas = document.getElementById('originalCanvas'); const processedCanvas = document.getElementById('processedCanvas'); const originalContext = originalCanvas.getContext('2d'); const processedContext = processedCanvas.getContext('2d'); // 加载图片 const image = new Image(); image.src = 'image.jpg'; // 替换为你的图片路径 image.onload = function() { originalContext.drawImage(image, 0, 0, originalCanvas.width, originalCanvas.height); const imageData = originalContext.getImageData(0, 0, originalCanvas.width, originalCanvas.height); // 创建Worker实例 const worker = new Worker('image_worker.js'); // 监听Worker发来的消息 worker.addEventListener('message', function(event) { const processedImageData = event.data.imageData; processedContext.putImageData(processedImageData, 0, 0); }); // 向Worker发送消息 worker.postMessage({ imageData: imageData }); }; </script> </body> </html>originalContext.getImageData(...): 获取图片的像素数据。processedContext.putImageData(...): 将处理后的像素数据绘制到Canvas上。
第四章：Web Worker的通信机制：消息传递的艺术
Web Worker和主线程之间的通信是基于消息传递的。 它们之间不能直接共享内存，只能通过postMessage()方法发送消息，并通过addEventListener('message', ...)监听消息。
1. 数据类型:
可以传递的数据类型包括：
- 基本类型:
string,number,boolean,null,undefined - 可序列化对象:
Object,Array ArrayBuffer,TypedArray,DataView
2. 结构化克隆算法:
传递复杂对象时，会使用结构化克隆算法进行复制。这意味着对象会被完整复制一份，而不是传递引用。
3. Transferable Objects:
对于大型数据，例如ArrayBuffer，可以使用Transferable Objects来避免复制，提高性能。 使用Transferable Objects后，原始对象会被清空，所有权转移到接收方。
// 主线程
const buffer = new ArrayBuffer(1024 * 1024); // 1MB
worker.postMessage(buffer, [buffer]); // 第二个参数指定Transferable Objects
// Worker
self.addEventListener('message', function(event) {
const buffer = event.data;
// 主线程的buffer已经失效，不能再使用
console.log('Buffer received in worker:', buffer);
});第五章：Web Worker的注意事项：避免踩坑指南
- 安全限制: Web Worker运行在与主线程不同的上下文中，无法访问
window对象和document对象。 - 调试困难: Web Worker的调试相对困难，需要使用浏览器的开发者工具进行调试。
- 内存泄漏: 如果Worker线程没有正确终止，可能会导致内存泄漏。
- 跨域问题: 加载Worker文件时需要注意跨域问题。
- 不要过度使用: 过度使用Web Worker可能会增加代码复杂性，降低可维护性。
第六章：更高级的技巧与最佳实践
-
使用模块化的Web Workers: 使用ES模块可以更好地组织Worker代码。
// worker.js export function calculateSum(count) { let result = 0; for (let i = 0; i < count; i++) { result += i; } return result; } self.addEventListener('message', function(event) { const data = event.data; const result = calculateSum(data.count); self.postMessage({ result: result }); });在主线程中，需要使用
new Worker('worker.js', { type: 'module' })来创建模块化的Worker。 -
使用Promise封装Web Worker: 可以更方便地处理异步操作。
function runWorker(workerUrl, data) { return new Promise((resolve, reject) => { const worker = new Worker(workerUrl); worker.addEventListener('message', (event) => { resolve(event.data); worker.terminate(); }); worker.addEventListener('error', (error) => { reject(error); worker.terminate(); }); worker.postMessage(data); }); } // 使用 runWorker('worker.js', { count: 100000000 }) .then(result => { console.log('Result from worker:', result); }) .catch(error => { console.error('Error from worker:', error); }); -
使用第三方库: 有一些第三方库可以简化Web Worker的使用，例如Comlink。
Comlink可以将Worker中的函数暴露给主线程，就像调用本地函数一样。
总结：Web Worker，让你的网页飞起来！
Web Worker是一个强大的工具，可以让你在JavaScript中实现多线程并行计算，提高网页的性能和用户体验。但是，也需要注意一些问题，才能正确使用它。
希望今天的讲座对大家有所帮助！ 记住，代码的世界，多一份探索，多一份乐趣！ 下课！