JS `Web Workers`：在后台运行 CPU 密集型任务，不阻塞主线程

各位观众老爷，大家好！今天咱们不聊风花雪月，就来唠唠嗑，关于JavaScript世界里一个相当实用，但又经常被忽视的“打工人”—— Web Workers！咱们的目标是让你的页面不再卡成PPT，让用户体验丝滑如德芙巧克力！

开场白：谁动了我的主线程？

想象一下，你正在开发一个超酷的网页，用户可以上传图片，然后你用各种炫酷的滤镜处理它。问题来了，如果滤镜算法特别复杂，CPU直接飙到100%，整个页面卡住，用户只能眼巴巴地看着浏览器转圈圈，恨不得把电脑砸了。

这就是主线程被阻塞的典型场景。JavaScript是单线程的，这意味着所有的代码都在同一个线程里执行。如果某个任务耗时太长，就会阻塞主线程，导致页面无法响应用户的操作。

所以，我们需要一种机制，把这些耗时的任务扔到后台去处理，让主线程可以继续愉快地响应用户的操作。Web Workers就是来拯救世界的！

什么是Web Workers？

Web Workers就像是浏览器里的小弟，专门用来帮你处理一些繁重的任务。它们在独立的线程里运行，不会阻塞主线程。你可以把一些CPU密集型的任务，比如图像处理、复杂的计算、数据加密等，交给Web Workers去处理。

Web Workers的特点：

并行执行： Web Workers在独立的线程里运行，可以和主线程并行执行任务。
非阻塞： Web Workers不会阻塞主线程，保证页面的流畅性。
独立性： Web Workers拥有独立的全局作用域，不能直接访问DOM元素。
消息传递： 主线程和Web Workers之间通过消息传递进行通信。

Web Workers的类型：

Web Workers有两种类型：

Dedicated Workers： 只能被创建它的脚本访问。
Shared Workers： 可以被来自不同源的脚本访问。

咱们今天主要讨论的是Dedicated Workers，因为它最常用。

Web Workers的用法：

创建Web Worker：

首先，你需要创建一个JavaScript文件，用来编写Web Worker的代码。比如，我们创建一个名为worker.js的文件：

// worker.js
self.addEventListener('message', function(e) {
  let data = e.data;
  console.log('Worker received: ', data);

  // 模拟一个耗时的计算任务
  let result = longRunningCalculation(data.number);

  self.postMessage({result: result}); // 发送消息回主线程
}, false);

function longRunningCalculation(number) {
  let result = 0;
  for (let i = 0; i < number; i++) {
    result += Math.sqrt(i);
  }
  return result;
}

这个worker.js文件定义了一个message事件监听器。当主线程向Web Worker发送消息时，这个监听器就会被触发。Web Worker会执行一些计算，然后通过postMessage方法将结果发送回主线程。

在主线程中使用Web Worker：

在你的HTML文件中，你需要使用JavaScript来创建和管理Web Worker：

<!DOCTYPE html>
<html>
<head>
  <title>Web Worker Example</title>
</head>
<body>
  <button id="startCalculation">Start Calculation</button>
  <div id="result"></div>

  <script>
    const startCalculationButton = document.getElementById('startCalculation');
    const resultDiv = document.getElementById('result');

    startCalculationButton.addEventListener('click', function() {
      // 创建Web Worker
      const worker = new Worker('worker.js');

      // 监听Web Worker发回的消息
      worker.addEventListener('message', function(e) {
        let result = e.data.result;
        resultDiv.textContent = 'Result: ' + result;
        worker.terminate(); // 任务完成，终止Web Worker
      }, false);

      // 监听Web Worker的错误
      worker.addEventListener('error', function(e) {
        console.error('Worker error: ', e.message);
      }, false);

      // 向Web Worker发送消息
      worker.postMessage({number: 10000000}); // 传递一个大数字
    });
  </script>
</body>
</html>

这段代码首先获取了按钮和结果显示区域的引用。然后，当用户点击按钮时，会创建一个Web Worker，并监听它的message和error事件。最后，通过postMessage方法向Web Worker发送一条消息，包含一个大数字。

消息传递：

主线程和Web Worker之间通过postMessage方法进行消息传递。postMessage方法可以传递任何JavaScript对象，包括字符串、数字、数组、对象等。

在Web Worker中，可以使用self.addEventListener('message', ...)来监听主线程发来的消息。在主线程中，可以使用worker.addEventListener('message', ...)来监听Web Worker发来的消息。
终止Web Worker：

当Web Worker完成任务后，你可以使用worker.terminate()方法来终止它。这将释放Web Worker占用的资源。

Web Workers的注意事项：

不能直接访问DOM： Web Workers运行在独立的线程里，不能直接访问DOM元素。如果需要更新页面，只能通过消息传递的方式告诉主线程。
不能使用某些全局对象： Web Workers不能使用window、document、parent等全局对象。但是，可以使用self来引用Web Worker自身的全局作用域。
需要注意跨域问题： 如果你的Web Worker脚本文件来自不同的域名，可能会遇到跨域问题。你需要配置CORS头，允许跨域访问。
调试Web Workers： 大部分浏览器的开发者工具都支持调试Web Workers。你可以像调试普通JavaScript代码一样，设置断点、单步执行、查看变量等。

Web Workers的应用场景：

图像处理： 比如，图像滤镜、图像缩放、图像格式转换等。
复杂的计算： 比如，科学计算、金融计算、数据分析等。
数据加密： 比如，对用户密码进行加密、对敏感数据进行加密等。
代码高亮： 比如，对代码进行语法高亮显示。
游戏开发： 比如，处理游戏中的物理引擎、AI算法等。

代码示例：图像滤镜

咱们来一个稍微复杂点的例子，用Web Workers实现一个简单的图像滤镜。

HTML结构：

<!DOCTYPE html>
<html>
<head>
  <title>Image Filter with Web Worker</title>
</head>
<body>
  <input type="file" id="imageInput">
  <button id="applyFilter">Apply Filter</button>
  <canvas id="imageCanvas"></canvas>
  <canvas id="filteredCanvas"></canvas>

  <script>
    const imageInput = document.getElementById('imageInput');
    const applyFilterButton = document.getElementById('applyFilter');
    const imageCanvas = document.getElementById('imageCanvas');
    const filteredCanvas = document.getElementById('filteredCanvas');
    const imageCtx = imageCanvas.getContext('2d');
    const filteredCtx = filteredCanvas.getContext('2d');
    let imageData = null;

    imageInput.addEventListener('change', function(e) {
      const file = e.target.files[0];
      const reader = new FileReader();

      reader.onload = function(event) {
        const img = new Image();
        img.onload = function() {
          imageCanvas.width = img.width;
          imageCanvas.height = img.height;
          filteredCanvas.width = img.width;
          filteredCanvas.height = img.height;
          imageCtx.drawImage(img, 0, 0);
          imageData = imageCtx.getImageData(0, 0, img.width, img.height);
        }
        img.src = event.target.result;
      }
      reader.readAsDataURL(file);
    });

    applyFilterButton.addEventListener('click', function() {
      if (!imageData) {
        alert('Please select an image first.');
        return;
      }

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

      worker.addEventListener('message', function(e) {
        const filteredImageData = e.data.imageData;
        filteredCtx.putImageData(filteredImageData, 0, 0);
        worker.terminate();
      });

      worker.addEventListener('error', function(e) {
        console.error('Worker error: ', e.message);
      });

      worker.postMessage({imageData: imageData});
    });
  </script>
</body>
</html>

这段代码实现了文件上传，将图片绘制到canvas上，并且获取imageData。

Web Worker 代码 (filterWorker.js):

// filterWorker.js
self.addEventListener('message', function(e) {
  const imageData = e.data.imageData;
  const filteredImageData = applySepiaFilter(imageData);

  self.postMessage({imageData: filteredImageData}, [filteredImageData.data.buffer]);
}, false);

function applySepiaFilter(imageData) {
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    let red = data[i];
    let green = data[i + 1];
    let blue = data[i + 2];

    data[i] = Math.min(255, (red * 0.393) + (green * 0.769) + (blue * 0.189));
    data[i + 1] = Math.min(255, (red * 0.349) + (green * 0.686) + (blue * 0.168));
    data[i + 2] = Math.min(255, (red * 0.272) + (green * 0.534) + (blue * 0.131));
  }
  return imageData;
}

这段代码实现了怀旧滤镜的效果，并使用postMessage将处理后的imageData发送回主线程。注意，这里使用了[filteredImageData.data.buffer]，这是Transferable Objects，能提高传递大数据时的性能，避免复制数据，直接转移所有权。

Web Workers 的优势与劣势

特性	优势	劣势
性能	将 CPU 密集型任务移至后台，避免阻塞主线程，提升页面响应速度。	数据传递需要序列化和反序列化，对于小型任务可能带来额外的开销。
并发	允许并行执行任务，充分利用多核 CPU 的性能。	需要处理线程间的通信，增加代码复杂性。
独立性	独立的作用域，避免污染主线程的全局变量。	无法直接访问 DOM，需要通过消息传递来更新 UI。
兼容性	大部分现代浏览器都支持 Web Workers。	某些旧版本浏览器可能不支持，需要进行兼容性处理。
资源管理	可以通过 `terminate()` 方法手动终止 Web Worker，释放资源。	如果 Web Worker 中存在内存泄漏，可能会影响整个应用程序的性能。

高级技巧：Transferable Objects

在Web Workers和主线程之间传递大量数据时，使用Transferable Objects可以提高性能。Transferable Objects允许你将数据的 ownership 从一个上下文转移到另一个上下文，而不需要复制数据。这意味着数据在内存中只有一个副本，避免了复制的开销。

总结：让你的网页不再卡顿！

Web Workers是JavaScript中一个强大的工具，可以帮助你提高网页的性能和用户体验。通过将CPU密集型的任务移到后台线程，你可以让你的网页保持流畅，即使在执行复杂的计算时也是如此。

希望今天的讲座能让你对Web Workers有一个更深入的了解。记住，下次你的页面卡顿的时候，不妨试试Web Workers，让你的网页飞起来！

各位观众老爷，下次再见！

发表回复 取消回复

发表回复取消回复