提升前端性能：使用Web Workers处理CPU密集型任务

这是文章《如何使用Web Workers处理CPU密集型任务》的第3部分（共15部分）。

body {
  background: #fff;
  font-size: 16px;
}

.wrapper {
  max-width: 600px;
  margin: 0 auto;
}
.total-count {
  margin-bottom: 34px;
  font-size: 32px;
  text-align: center;
}

.buttons {
  border: 1px solid green;
  padding: 1rem;
  margin-bottom: 16px;
}

.btn {
  border: 0;
  padding: 1rem;
}

.btn-blocking {
  background-color: #f44336;
  color: #fff;
}

#changebtn {
  background-color: #4caf50;
  color: #fff;
}

.buttons定义了实心绿边框和轻微的内边距，而阻止任务进程又进一步通过.btn-blocking样式定义了不同的背景颜色。

保存并关闭文件。

既然你已经定义了CSS样式，现在你需要编写JavaScript代码来使HTML元素交互。保存并退出你的文件。

在你的编辑器中创建并打开main.js文件。

1. nano main.js

在你的main.js文件中，添加以下代码以引用DOM元素：

这是文章《如何使用Web Workers处理CPU密集型任务》的第4部分（共15部分）。

const blockingBtn = document.getElementById("blockbtn");
const incrementBtn = document.getElementById("incrementbtn");
const changeColorBtn = document.getElementById("changebtn");
const output = document.querySelector(".output");
const totalCountEl = document.querySelector(".total-count");

在前三行代码中，我们使用document对象的getElementById()方法通过ID引用了按钮元素。在最后两行中，我们使用document对象的querySelector()方法通过类名引用了div元素。

接下来，我们将定义一个事件监听器，当点击incrementBtn按钮时，它会增加一个div元素的值。

...
totalCountEl.textContent = 0;

incrementBtn.addEventListener("click", function incrementValue() {
  let counter = totalCountEl.textContent;
  counter++;
  totalCountEl.textContent = counter;
});

首先，我们将totalCountEl元素的文本内容设置为0。然后，我们使用DOM的addEventListener()方法将一个事件监听器附加到incrementBtn按钮上。该方法接受两个参数：要监听的事件和一个回调函数。在这里，事件监听器监听点击事件，并在点击事件触发时调用incrementValue()回调函数。

在incrementValue回调函数中，我们从DOM中获取totalCountEl元素的文本内容值，并将其赋值给计数器变量。然后，我们将该值增加1，并将增加后的值设置为totalCountEl元素的文本内容。

接下来，我们将以下代码添加到changeColorBtn按钮上，以便在点击按钮时随机更改背景颜色。

这是文章《如何使用Web Workers处理CPU密集型任务》的第5部分（共15部分）。

...
changeColorBtn.addEventListener("click", function changeBackgroundColor() {
  colors = ["#009688", "#ffc107", "#dadada"];
  const randomIndex = Math.floor(Math.random() * colors.length)
  const randomColor = colors[randomIndex];
  document.body.style.background = randomColor;
});

在先前的代码中，您添加了一个点击事件监听器，当用户点击changeColorBtn按钮时会运行changeBackgroundColor回调函数。在回调函数中，您将colors变量设置为一个包含三个十六进制颜色值的数组。然后您调用了Math.random()方法，并将其结果与数组长度值相乘，以生成一个0到数组长度3之间的随机数。随机值然后使用Math.floor()方法向下取整，并存储在randomIndex变量中。

然后，您使用随机索引从数组中选择一个值，然后将文档对象的body.style.background属性设置为该颜色。

现在您已经实现了两个触发非阻塞任务执行的按钮，您将为剩下的按钮添加一个事件监听器，以启动一个占用CPU资源较多的任务。循环将重复五十亿次，并将结果保存在DOM中。

仍然在您的main.js文件中，添加以下代码来为一个按钮添加点击事件监听器，该按钮将启动一个阻塞任务。

...
blockingBtn.addEventListener("click", function blockMainThread() {
  let counter = 0;
  for (let i = 0; i < 5_000_000_000; i++) {
    counter++;
  }
  output.textContent = `计算结果: ${counter}`;
});

在前面的代码中，您添加了一个点击事件监听器，它运行blockMainThread()回调函数。在函数内部，您将计数器设置为0，然后创建了一个循环，循环迭代五十亿次。在每次迭代期间，计数器的值增加1。循环结束后，计算的结果被设置为输出元素的值。

现在完整的文件将与以下内容相匹配。

这是文章《如何使用Web Workers处理CPU密集型任务》的第6部分（共15部分）。

const blockingBtn = document.getElementById("blockbtn");
const incrementBtn = document.getElementById("incrementbtn");
const changeColorBtn = document.getElementById("changebtn");
const output = document.querySelector(".output");
const totalCountEl = document.querySelector(".total-count");
totalCountEl.textContent = 0;

incrementBtn.addEventListener("click", function incrementValue() {
  let counter = totalCountEl.textContent;
  counter++;
  totalCountEl.textContent = counter;
});

changeColorBtn.addEventListener("click", function changeBackgroundColor() {
  colors = ["#009688", "#ffc107", "#dadada"];
  const randomIndex = Math.floor(Math.random() * colors.length)
  const randomColor = colors[randomIndex];
  document.body.style.background = randomColor;
});

blockingBtn.addEventListener("click", function blockMainThread() {
  let counter = 0;
  for (let i = 0; i < 5_000_000_000; i++) {
    counter++;
  }
  output.textContent = `Result: ${counter}`;
});

一旦您输入代码完成，保存并退出文件。

为了避免在第三步开始使用Web Workers时出现跨域资源共享（CORS）错误，您需要为应用程序创建一个Web服务器。运行以下命令创建服务器：

1. npx serve .

输入y以确认，控制台将输出”正在提供服务！”的消息来确认服务器正在运行。

┌─────────────────────────────────────────────────────┐
│                                                     │
│                     服务已启动！                     │
│                                                     │
│ - 本地：    http://localhost:3000                   │
│ - 在您的网络中： http://your_ip_address:3000        │
│                                                     │
│          已将本地地址复制到剪贴板！                 │
│                                                     │
└─────────────────────────────────────────────────────┘

打开您偏爱的网络浏览器，访问 http://localhost:3000/index.html。

npx serve

ERROR：无法将服务器地址复制到剪贴板：找不到"xsel"二进制文件，且回退操作无效。在Debian/Ubuntu上，您可以使用以下命令安装xsel：sudo apt install xsel。

┌─────────────────────────────────────────────────────┐
│                                                     │
│                     服务已启动！                     │
│                                                     │
│ - 本地：    http://localhost:3000                   │
│ - 在您的网络中： http://your_ip_address:3000        │
│                                                     │
│          已将本地地址复制到剪贴板！                 │
│                                                     │
└─────────────────────────────────────────────────────┘

在本地机器上打开第二个终端，然后输入以下命令：

ssh -L 3000:localhost:3000 your_non_root_user@your_server_ip

返回浏览器并访问http://localhost:3000/index.html以访问您的应用程序主页。当页面加载时，它将显示一个带有”阻止任务”、”递增”和”改变背景”按钮的主页。递增计数器将从0开始，因为您还没有按下递增计数的按钮。

首先，多次点击增加按钮，以便在每次点击时更新页面上的数字。

其次，点击几次”更改背景”按钮来改变页面的背景颜色。

最后，点击阻塞任务按钮，然后随机点击增加按钮和更改背景按钮。页面将变得无响应，按钮将无效。这个冻结是因为阻塞任务按钮开始了一个消耗CPU的任务，导致主线程被阻塞，其他代码直到主线程空闲才会执行。过一段时间后，当CPU密集任务完成时，页面将显示结果：5000000000。此时，如果点击其他按钮，它们将恢复正常工作。

正如您所经历的，一个阻塞任务对用户来说是立即可见的，并且会损害您的应用用户体验。

现在您已经创建了一个通过主线程冻结应用程序的阻塞任务的应用程序，您将使用 Promise 将 CPU 密集型任务转换为非阻塞任务。

第二步 – 使用Promise来卸载CPU密集型任务

使用Fetch API或其他基于Promise的方法处理I/O任务有时会给人一种错误的印象，即将一个CPU密集型任务包装在Promise中可以使其变为非阻塞。如介绍所述，I/O任务之所以是非阻塞的，是因为它们由操作系统处理，操作系统在完成任务时会通知JavaScript引擎。当操作系统执行I/O任务时，与I/O任务相关的回调会在一个队列中等待操作系统的响应。在它们等待的同时，主线程可以处理所有后续任务。当操作系统发送响应时，回调在主线程中执行，回调之间没有并行执行。

为了证明Promise不能使CPU绑定任务变为非阻塞状态，您将在此步骤中将CPU密集型任务包装在一个Promise中。

在您的文本编辑器中，打开main.js文件：

nano main.js

在您的main.js文件中，添加这段代码来创建一个calculateCount()函数，它将一个耗费大量CPU的任务封装在一个Promise中。

这是文章《如何使用Web Workers处理CPU密集型任务》的第8部分（共15部分）。

...
function calculateCount() {
  return new Promise((resolve, reject) => {
    let counter = 0;
    for (let i = 0; i < 5_000_000_000; i++) {
      counter++;
    }
    resolve(counter);
  });
}

blockingBtn.addEventListener("click", function blockMainThread(){
  ....
})

calculateCount()函数返回一个Promise。在这个函数中，使用new Promise语法初始化了一个promise，该promise接受一个回调函数作为参数，该回调函数包含resolve和reject参数。这些参数处理回调中操作的成功或失败。回调中包含了一个耗费CPU的循环，循环迭代五十亿次。循环结束后，使用resolve方法传递结果。

现在在calculateCount()函数中有一个受CPU限制的任务，需要删除高亮显示的代码。

...
blockingBtn.addEventListener("click", function blockMainThread() {
  let counter = 0;
  for (let i = 0; i < 5_000_000_000; i++) {
    counter++;
  }
  output.textContent = `结果: ${counter}`;
});

在移除了代码之后，将在blockMainThread()函数中调用calculateCount()函数。由于该函数返回一个promise，需要使用async/await语法来消耗这个promise。

将下面的高亮代码添加到blockMainThread()函数中，使其异步并调用calculateCount()函数。

...
blockingBtn.addEventListener("click", async function blockMainThread() {
  const counter = await calculateCount();
  output.textContent = `结果: ${counter}`;
});

在上述JavaScript代码中，我们在blockMainThread()函数前添加了async关键字，使其成为一个异步函数。这种方法是JavaScript异步编程的重要技术，可以有效处理CPU密集型任务而不阻塞主线程。

在函数内部，我们使用await关键字来调用calculateCount()函数。await操作符会暂停函数执行，直到Promise对象解析完成。这种异步处理方式是Web Workers性能优化的关键策略之一。

一旦Promise解析完成，计数器变量将被设置为返回值，输出div元素将显示CPU密集型任务的计算结果。这种异步编程模式可以显著提升Web应用的响应速度和用户体验。

现在，您的完整文件将与以下内容匹配：

const blockingBtn = document.getElementById("blockbtn");
const incrementBtn = document.getElementById("incrementbtn");
const changeColorBtn = document.getElementById("changebtn");
const output = document.querySelector(".output");
const totalCountEl = document.querySelector(".total-count");
totalCountEl.textContent = 0;

incrementBtn.addEventListener("click", function incrementValue() {
  let counter = totalCountEl.textContent;
  counter++;
  totalCountEl.textContent = counter;
});

changeColorBtn.addEventListener("click", function changeBackgroundColor() {
  colors = ["#009688", "#ffc107", "#dadada"];
  const randomIndex = Math.floor(Math.random() * colors.length)
  const randomColor = colors[randomIndex];
  document.body.style.background = randomColor;
});

function calculateCount() {
  return new Promise((resolve, reject) => {
    let counter = 0;
    for (let i = 0; i < 5_000_000_000; i++) {
      counter++;
    }
    resolve(counter);
  });
}

blockingBtn.addEventListener("click", async function blockMainThread() {
  const counter = await calculateCount();
  output.textContent = `Result: ${counter}`;
});

完成更改后，保存并退出您的文件。

当您的服务器仍在运行时，在浏览器中刷新http://localhost:3000/index.html。点击增加和更改背景的按钮。之后，点击阻塞任务按钮，然后点击其他按钮。当运行一个占用CPU的任务时，其他按钮仍然无响应，这证明将一个占用CPU的任务包装在一个Promise中并不会使任务非阻塞。

既然你已经尝试过使用承诺（promises）来减轻CPU负载并注意到其失败，那么你将使用Web Workers使CPU密集型任务变得非阻塞。

第三步 – 使用Web Workers来卸载CPU密集型任务

在这一步中，您将创建一个专用工作线程，通过将CPU密集型任务移入一个worker.js文件来卸载这些任务。在main.js文件中，您将使用worker.js文件的路径来实例化一个专用的Web Worker。一旦Web Worker被初始化，CPU密集型任务将会被卸载到一个独立线程，而主线程将会自由地处理剩下的任务。

首先，创建一个worker.js文件。

1. nano worker.js

在您的worker.js文件中，添加以下代码以在文件中添加CPU密集型任务。

let counter = 0;
for (let i = 0; i < 5_000_000_000; i++) {
  counter++;
}

前面的代码块包含了迄今为止您一直在使用的CPU密集型任务。现在这段代码将在一个单独的线程中运行。

为了确保主线程可以获取计算结果，您需要使用Worker接口的postMessage()方法发送包含数据的消息。

在您的worker.js文件中，添加突出显示的行以将数据发送到主线程。

let counter = 0;
for (let i = 0; i < 5_000_000_000; i++) {
  counter++;
}
postMessage(counter);

在此行代码中，您使用包含CPU密集型任务计算结果的counter变量调用postMessage()方法。

保存并关闭文件。

既然您已将CPU密集型任务转移到了worker.js文件中，现在打开main.js文件。

1. nano main.js

请删除main.js文件中包含CPU密集型任务的突出显示行。

...
function calculateCount() {
  return new Promise((resolve, reject) => {
    let counter = 0;
    for (let i = 0; i < 5_000_000_000; i++) {
      counter++;
    }
    resolve(counter);
  });
}

blockingBtn.addEventListener("click", async function blockMainThread() {
  const counter = await calculateCount();
  output.textContent = `结果: ${counter}`;
});

在blockMainThread回调中，添加以下突出显示的代码来初始化工作线程并监听工作线程的消息。

blockingBtn.addEventListener("click", function blockMainThread() {
  const worker = new Worker("worker.js");
  worker.onmessage = (msg) => {
    output.textContent = `结果: ${msg.data}`;
  };
});

首先，您使用之前创建的worker.js文件的路径创建了一个Worker实例。其次，您将Worker接口的onmessage属性附加到工作线程上，以便监听来自工作线程的任何消息。如果有消息进来，就会触发消息事件，调用回调函数并将消息数据msg作为参数传递。在回调函数中，您使用来自Web Worker的消息修改输出文本的内容。

完整的文件现在将与以下代码块相匹配。

const blockingBtn = document.getElementById("blockbtn");
const incrementBtn = document.getElementById("incrementbtn");
const changeColorBtn = document.getElementById("changebtn");
const output = document.querySelector(".output");
const totalCountEl = document.querySelector(".total-count");
totalCountEl.textContent = 0;

incrementBtn.addEventListener("click", function incrementValue() {
  let counter = totalCountEl.textContent;
  counter++;
  totalCountEl.textContent = counter;
});

changeColorBtn.addEventListener("click", function changeBackgroundColor() {
  colors = ["#009688", "#ffc107", "#dadada"];
  const randomIndex = Math.floor(Math.random() * colors.length)
  const randomColor = colors[randomIndex];
  document.body.style.background = randomColor;
});

blockingBtn.addEventListener("click", function blockMainThread() {
  const worker = new Worker("worker.js");
  worker.onmessage = (msg) => {
    output.textContent = `结果：${msg.data}`;
  };
});

保存并退出文件。

在服务器运行时，返回到您的网络浏览器并访问http://localhost:3000/index.html。页面将成功从服务器加载。

首先，点击递增和更改背景按钮几次。其次，点击阻塞任务按钮来启动需要大量CPU资源的任务，然后继续点击其他的按钮。尽管CPU密集型任务仍在执行，但这些按钮现在能正常工作。

您现在可以使用一个专门的Web Worker来卸载一个CPU密集型任务，使之成为非阻塞的。

总结

在这个教程中，您创建了一个启动CPU密集型任务并阻塞主线程的应用程序，并尝试使用Promise使CPU密集型任务非阻塞，但未能成功。最后，您使用了一个专用的Web Worker将CPU密集型任务转移到另一个线程，使其变得非阻塞。

作为下一步，您可以访问Web Workers API文档，全面了解专用Web Workers。除了专用Web Workers，Web Workers API还包含共享Web Workers（Shared Workers）和服务Web Workers（Service Workers），可以用于提供离线访问和提升性能。

如果您使用Node.js，您可以学习如何在《如何使用Node.js进行多线程编程》中使用工作线程。