PWA 开发中使用 Web Workers 进行多线程处理的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

前端开发中，有时需要进行一些计算密集型的操作，比如对大量数据进行排序、搜索等处理。如果使用主线程进行这些操作，可能会造成页面卡顿，用户体验很差。针对这种情况，PWA 开发中可以使用 Web Workers 进行多线程处理，提高页面的响应速度，提升用户体验。本文将介绍 PWA 中使用 Web Workers 的最佳实践。

Web Workers 简介

Web Workers 是 HTML5 提供的一种多线程解决方案，可以让 JavaScript 在后台线程中运行，不会对主线程造成阻塞。Web Workers 主要包括两种类型：

Dedicated Workers（专用线程）：只能被创建它的脚本所使用，与其他脚本不共享数据。
Shared Workers（共享线程）：可以被多个使用相同 origin 的脚本共享，可以处理来自多个页面的消息。

在 PWA 开发中，常使用 Dedicated Workers 进行多线程处理。

Web Workers 的使用

使用 Web Workers 可以实现多线程处理，代码如下：

// javascriptcn.com 代码示例
//index.js
//创建 dedicated worker
const worker = new Worker('worker.js');
worker.onmessage = (evt) => {
  console.log('Received message from worker: ', evt.data);
}
worker.postMessage('Hello worker!');

//worker.js
self.onmessage = (evt) => {
  console.log('Received message from main thread: ', evt.data);
  self.postMessage('Hello main thread!');
}

在主线程中创建 Dedicated Worker 可以使用 new Worker('worker.js') ，并通过 worker.postMessage() 向 Worker 发送消息。Worker 中可以使用 self.onmessage 接收来自主线程的消息，并使用 self.postMessage() 向主线程发送消息。在主线程中，可以通过 worker.onmessage 接收来自 Worker 的消息。

实现多线程处理的最佳实践

不要阻塞主线程

对于计算密集型操作，不要在主线程中进行处理。使用 Dedicated Worker 可以将这些操作转移到后台线程中，避免阻塞主线程。

将数据复制到 Worker 线程中

由于 Dedicated Worker 与主线程是完全独立的环境，它们之间不能共享数据，所有数据必须通过 postMessage() 进行传递。因此，将需要处理的数据复制到 Dedicated Worker 环境中是一个不错的选择。

// javascriptcn.com 代码示例
//index.js
const data = [1,2,3,4,5];
const worker = new Worker('worker.js');
//复制数据到 Worker 中
worker.postMessage(data);

//worker.js
self.onmessage = (evt) => {
  const data = evt.data;
  console.log('Received message from main thread: ', data);
  const result = processData(data);
  //将处理后的结果发送回主线程
  self.postMessage(result);
}

function processData(data) {
  //处理数据的逻辑
}

使用 Transferable Objects 传递数据

对于一些大内存的对象，使用 postMessage() 进行复制会造成性能上的瓶颈。如果这些对象不需要在主线程中继续使用，可以使用 Transferable Objects 进行传递，这样可以将数据彻底转移到 Dedicated Worker 环境中，避免复制数据的性能瓶颈。

// javascriptcn.com 代码示例
//index.js
const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);
view[0] = 1;
view[1] = 2;
const worker = new Worker('worker.js');
//使用 Transferable Objects 传递数据
worker.postMessage(buffer, [buffer]);

//worker.js
self.onmessage = (evt) => {
  const buffer = evt.data;
  const view = new Int32Array(buffer);
  view[0] += 1;
  view[1] += 2;
  //将处理后的结果发送回主线程
  self.postMessage(buffer, [buffer]);
}

使用 Thread Pool 进行任务调度

对于大量的任务，可以使用 Thread Pool 进行任务调度，当有任务需要处理时，从线程池中取出一个线程进行处理，避免创建过多的 Dedicated Worker 造成资源浪费。线程池的实现可以使用 generic-pool 库。

// javascriptcn.com 代码示例
//index.js
const { createPool } = require('generic-pool');
const workerPath = './worker.js';

//创建线程池
const pool = createPool({
  create: () => new Worker(workerPath),
  destroy: (worker) => worker.terminate(),
}, {
  max: 5, //线程池中线程的最大数量
  min: 2, //线程池中线程的最小数量
  idleTimeoutMillis: 30000, //线程在空闲状态下的最大存活时间
});

//从线程池中获取一个线程，执行任务
pool.acquire()
  .then((worker) => {
    worker.onmessage = (evt) => {
      console.log('Received message from worker: ', evt.data);
      pool.release(worker);
    };
    worker.postMessage('Hello worker!');
  });

//worker.js
self.onmessage = (evt) => {
  console.log('Received message from main thread: ', evt.data);
  self.postMessage('Hello main thread!');
}

总结

使用 Web Workers 进行多线程处理是 PWA 开发中的一项重要技术，可以提高页面的响应速度，提升用户体验。在实践中，需要注意不要阻塞主线程，使用 Transferable Objects 可以优化数据传递的性能，使用 Thread Pool 可以进行任务调度，避免资源的浪费。希望本文可以帮助读者更好地理解和应用 Web Workers。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653611c97d4982a6ebde8e1c