【webWorker】webWorker 攻略

webWorker 攻略

一、什么是web worker

Web Worker 是在 Web 应用程序中运行 JavaScript 代码的一种机制，它在单独的线程中执行，并且与主线程相互独立，不会阻塞主线程的执行。这使得 Web Worker 能够执行一些耗时的任务，如计算、网络请求等，而不会影响到主线程的响应性能。

二、web worker特点

• 独立的线程：Web Worker 在单独的线程中运行，与主线程相互独立，不会阻塞主线程。
• 无法访问 DOM：由于 Web Worker 运行在独立的线程中，它无法直接访问 DOM，也不能直接操作页面上的元素。
• 通过消息传递进行通信：主线程和 Web Worker 之间通过消息传递进行通信。主线程可以向 Web Worker 发送消息，并监听 Web Worker 发送的消息，从而实现双向通信。
• 不能访问全局对象：Web Worker 中不能访问 window、document 等全局对象，但可以访问部分全局对象，如 setTimeout、XMLHttpRequest 等。
• 支持多线程：Web Worker 支持创建多个线程，可以同时执行多个任务。

三、web worker应用场景

• 大量计算密集型任务，如图像处理、视频编码等。
• 长时间运行的任务，如网络请求、文件处理等。
• 实时数据处理，如实时数据更新、数据流处理等。

四、使用示例

主线程

const worker = new Worker('worker.js');

worker.postMessage('Hello from main thread');

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

worker.js

self.onmessage = function(event) {
  console.log('Message from main thread:', event.data);
  
  // 执行一些耗时的任务
  const result = doSomeHeavyTask();

  // 将结果发送给主线程
  self.postMessage(result);
};

function doSomeHeavyTask() {
  // 模拟耗时任务
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }
  return result;
}