1分钟掌握Web Worker

一、概念

1. 一种在后台线程中执行 JavaScript 代码的机制。
2. 在独立的线程中执行耗时的任务，而不会阻塞主线程的运行，从而提高页面的响应性能和用户体验。
3. 可以与主线程进行双向通信，通过消息传递的方式，交换数据和任务，以便在后台线程中执行复杂的计算、数据处理、网络请求等操作。

二、场景

1. 复杂计算任务：执行复杂的计算任务，如图像处理、数据分析、数值计算等，避免阻塞主线程，保持页面的响应性能。

2. 数据处理和转换：处理大量数据或进行复杂的数据转换以提高处理速度和减轻主线程负担。例如，可以在 Web Worker 中进行数据解析、格式转换、加密解密等操作。

3. 后台数据同步：在后台执行网络请求和数据同步操作，与服务器进行数据交互，而不会影响主线程的执行。这对于实时数据更新、长轮询、WebSocket 连接等情况非常有用。

4. 图形和动画处理：在后台线程中执行复杂的图形绘制和动画计算，以提高性能和流畅度。例如，可以在 Web Worker 中进行复杂的图形渲染、物理模拟、碰撞检测等操作。

// 主线程
const worker = new Worker('worker.js');

worker.onmessage = function(event) {
  const result = event.data;
  console.log('处理结果：', result);
};

// 向 Web Worker 发送数据以进行处理
worker.postMessage('原始数据');

// worker.js
self.onmessage = function(event) {
  const data = event.data;
  // 计算任务，处理数据等
  const processedData = processData(data);
  // 将处理结果发送回主线程
  self.postMessage(processedData);
};

function processData(data) {
  // 执行数据处理和转换操作
  return '处理后的数据';
}

三、加载

由于 Web Worker 是在独立的线程中运行的，它受到同源策略的限制。默认情况下，Web Worker 只能加载与主线程同源的脚本文件。如果需要加载跨域的脚本文件，可以使用以下两种方式来解决：

1. 使用 Blob 和 importScripts 加载方式：
   • 创建一个 Blob 对象，并在其中使用 importScripts 加载跨域的脚本文件内容。
   • 创建 Blob URL，并将其传递给 Web Worker 的构造函数。
   • 示例代码：

const blob = new Blob([`importScripts('https://example.com/worker.js');`], { type: 'application/javascript' });
const blobUrl = URL.createObjectURL(blob);
const worker = new Worker(blobUrl);

2. 使用服务器端代理：
   • 在服务器端创建一个代理接口，用于将跨域的脚本文件内容作为响应返回给客户端。
   • 在 Web Worker 中加载代理接口的 URL，并通过该 URL 获取跨域脚本文件的内容。
   • 示例代码：

// 在 Web Worker 中加载服务器端代理接口的 URL
const worker = new Worker('https://example.com/proxy?url=https://targetdomain.com/worker.js');