从 Web Worker 开始-猿码集

1. 什么是 Web Worker

Web Worker 是一种 JavaScript API，它允许我们在主线程之外运行一个子线程。这意味着我们可以将一些繁重的计算或处理移动到另一个线程中，以免阻止主线程的运行。

在 Web Worker 中运行的代码可以像普通的 JavaScript 代码一样访问全局变量，但是它们不能访问 DOM，因为 DOM 只存在于主线程中。我们可以使用 postMessage() 方法来向主线程发送消息，也可以使用 onmessage 事件来接收主线程发送的消息。

1.1 Web Worker 的语法

Web Worker 的语法非常简单。要创建一个新的 Worker，只需要向 Worker 构造函数传递一个 JavaScript 文件的 URL。这个 JavaScript 文件中的代码就会在一个新的线程中运行。

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

在新线程中运行的 JavaScript 文件可以使用 importScripts() 方法来导入其他的 JavaScript 文件。

2. Web Worker 的用途

Web Worker 可以用于很多不同的目的，但是最常见的用途是处理一些耗时的计算或操作。下面我们来看几个具体的例子。

2.1 计算 Fibonacci 数列

计算 Fibonacci 数列是一个非常著名的递归问题，在 JavaScript 中，递归的性能很差，因为它会占用大量的内存。我们可以使用 Web Worker 来在一个单独的线程中计算 Fibonacci 数列，从而避免阻塞主线程。

// 在主线程中
const worker = new Worker('fibonacci.js');
worker.postMessage(40); // 计算第 40 项 Fibonacci 数
// 在 fibonacci.js 中
function calculateFibonacci(n) {
  if (n < 2) return n;
  return calculateFibonacci(n - 1) + calculateFibonacci(n - 2);
}
self.onmessage = function(event) {
  const result = calculateFibonacci(event.data);
  self.postMessage(result); // 发送计算结果给主线程
}

在 fibonacci.js 中计算 Fibonacci 数列的函数 calculateFibonacci() 是递归的，这会阻塞主线程。但是由于它在一个单独的线程中运行，所以不会阻塞主线程。

2.2 图像处理

图像处理通常需要大量的计算，可以使用 Web Worker 在另一个线程中进行。下面是一个简单的例子，使用 Web Worker 对图像进行模糊处理。

// 在主线程中
const worker = new Worker('blur.js');
const canvas = document.getElementById('canvas');
const imageData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
worker.postMessage(imageData); // 发送图像数据给 Worker
worker.onmessage = function(event) {
  // 接收处理后的图像数据
  const blurredImageData = event.data;
  canvas.getContext('2d').putImageData(blurredImageData, 0, 0);
}
// 在 blur.js 中
function getPixel(imageData, x, y) {
  const index = (y * imageData.width + x) * 4;
  const r = imageData.data[index];
  const g = imageData.data[index + 1];
  const b = imageData.data[index + 2];
  const a = imageData.data[index + 3];
  return [r, g, b, a];
}
function setPixel(imageData, x, y, rgba) {
  const index = (y * imageData.width + x) * 4;
  imageData.data[index] = rgba[0];
  imageData.data[index + 1] = rgba[1];
  imageData.data[index + 2] = rgba[2];
  imageData.data[index + 3] = rgba[3];
}
function getAveragePixels(imageData, x, y, radius) {
  let r = 0,
      g = 0,
      b = 0,
      a = 0,
      count = 0;
  for (let j = -radius; j <= radius; j++) {
    for (let i = -radius; i <= radius; i++) {
      const [currentR, currentG, currentB, currentA] = getPixel(imageData, x + i, y + j);
      r += currentR;
      g += currentG;
      b += currentB;
      a += currentA;
      count++;
    }
  }
  r /= count;
  g /= count;
  b /= count;
  a /= count;
  return [r, g, b, a];
}
self.onmessage = function(event) {
  const imageData = event.data;
  const radius = 5;
  const blurredImageData = new ImageData(imageData.width, imageData.height);
  for (let y = 0; y < imageData.height; y++) {
    for (let x = 0; x < imageData.width; x++) {
      const [r, g, b, a] = getAveragePixels(imageData, x, y, radius);
      setPixel(blurredImageData, x, y, [r, g, b, a]);
    }
  }
  self.postMessage(blurredImageData); // 发送处理后的图像数据给主线程
}

blur.js 中的代码会在一个单独的线程中运行，对图像进行模糊处理。处理后的图像数据会通过 postMessage() 方法发送到主线程。

2.3 加载和处理大型数据集

在加载和处理大型数据集时，主线程通常会被阻塞，导致一些不良的用户体验。可以使用 Web Worker 在另一个线程中加载和处理大型数据集，这样就可以避免阻塞主线程。

// 在主线程中
const worker = new Worker('process-data.js');
worker.postMessage({ url: 'data.csv' }); // 发送要处理的数据 URL 给 Worker
worker.onmessage = function(event) {
  const processedData = event.data;
  // 在主线程中使用处理后的数据
}
// 在 process-data.js 中
function processData(data) {
  // 处理数据的代码
  return processedData;
}
self.onmessage = function(event) {
  fetch(event.data.url)
    .then(response => response.text())
    .then(data => {
      const processedData = processData(data);
      self.postMessage(processedData); // 发送处理后的数据给主线程
    });
}

process-data.js 中的代码会在一个单独的线程中运行，加载和处理大型数据集。处理后的数据会通过 postMessage() 方法发送到主线程。

3. Web Worker 的限制

尽管 Web Worker 提供了一个方便的方法来处理一些耗时的计算或操作，但是它也有一些限制。

3.1 Web Worker 不能访问 DOM

Web Worker 只能访问全局变量，不能访问 DOM。因为 DOM 只存在于主线程中。

3.2 Web Worker 不能跨域访问资源

由于同源策略的限制，Web Worker 不能跨域访问资源。这意味着 Web Worker 只能访问与主页面相同域名的资源。

3.3 Web Worker 不能访问部分 JavaScript 对象

Web Worker 不能访问部分 JavaScript 对象，比如 window 和 document 等。这些对象只存在于主线程中。

4. 总结

Web Worker 提供了一个非常方便的方法来处理一些耗时的计算或操作。它允许我们在主线程之外运行一个子线程，避免阻塞主线程。

Web Worker 的主要用途之一是计算和处理一些耗时的操作，比如计算 Fibonacci 数列、图像处理和加载和处理大型数据集等。

尽管 Web Worker 提供了很大的帮助，但是它也有一些限制。Web Worker 不能访问 DOM，不能跨域访问资源，不能访问部分 JavaScript 对象等。

从 Web Worker 开始