Web Worker了解

Web Worker是什么？

Web Worker是浏览器的API，可以创建worker线程，在主线程之外运行JS脚本

Web Worker的作用？

Web Worker的目的是：为JS创造多线程环境
在主线程中创建Worker线程，将耗时的任务分配给Worker线程，Worker线程在后台运行和主线程互不干扰，等到Worker线程执行完毕将计算的结果返回给主线程。

好处：避免阻塞主线程的执行，提高应用的性能和响应性。

为什么引入Web Worker?

JS =》 单线程模型，即所有任务只能在一个线程上完成，一次只能完成一件事。前面任务未执行，后面的任务必须等待执行
当面对耗时任务在主线程执行时会阻塞后续任务执行，造成页面卡顿或降低应用的响应性

Web Worker的分类

Web Worker存在两种类型：专用Worker和共享Worker

• 专用Worker： 随着创建专用Worker的网页一起存在和终止（Worker类 =》专用Worker
• 共享Worker： 可以在多个网页之间共享（SharedWorker类 =》共享Worker

Web Worker注意事项

1. 同源限制：Worker线程运行的脚本文件必须和主线程同源
2. DOM限制：Worker线程和主线程在运行中互不影响，无法读取主线程所在网页的DOM对象也无法使用document、window、parent这些对象
3. 通信联系：Worker线程和主线程不在同一上下文环境，无法直接通信，必须通过消息完成
4. Worker线程无法读取本地文件，必须加载来自于网络的脚本

Web Worker的使用场景

长时间运行的计算：比如复杂的数学运算、大数据处理等。
大规模数据分析：在后台线程处理大量数据，减少主线程的压力。
文件处理：例如在上传文件时，对文件内容进行压缩、加密等处理。
图像处理：如图像处理、渲染等计算密集型任务。

Web Worker的用法

1.创建 Worker：你可以通过 new Worker('worker.js') 来创建一个 Web Worker，worker.js 是你需要执行的 JavaScript 脚本文件。

2.主线程和 Worker 通信：通过 postMessage 向 Worker 发送消息，Worker 通过 onmessage 接收消息；相应地，Worker 通过 postMessage 向主线程发送消息，主线程通过 onmessage 接收。

3.关闭 Worker：一旦任务完成，可以调用 terminate() 方法来手动停止 Worker。

基本案例

⭐ 主线程（index.js）
const worker = new Worker('worker.js'); // 创建Web Worker

worker.postMessage('Hello Worker'); // 主线程向Worker线程发送消息

worker.onmessage = function(event) {
  console.log('message from worker: ', event.data)
}

// 错误处理
worker.onerror = function(error) {
    console.error('Worker 错误:', error.message);
};

// 关闭 Worker
worker.terminate();


⭐ Worker线程（worker.js)
// 接收主线程的消息
worker.onmessage = function (event) {
  console.log('Received message ' + event.data);
  doSomething();
}
function doSomething() {
  // 执行任务
  worker.postMessage('Work done!');
}

// 这里的worker.onmessage 也可以换成self.addEventListener ,self代表子线程自身，即子线程的全局对象  等同于
self.addEventListener('message', function (e) {
  self.postMessage('You said: ' + e.data);
}, false);