JavaScript 中 Web Workers【完整指南】

原文链接: Web Workers in JavaScript [A Complete Guide] - 原文作者: Bala Krishna Ragala

本文采用的是意译的方式

JavaScript 被设计来在浏览器运行小块的脚本。因为该语言的简单和直白，JavaScript 备受欢迎，在当时，没有人能够预料它能执行大量的计算和对 CPU 要求较高的任务。这是一门深受初学者程序员喜爱的语言，帮助他们进入编程中的“逻辑构建”世界。在过去的 20 年时间，JavaScript 正在主导现代世界的整个 Web 应用业务。从操作前端的的 Dom 到涉及后端的服务，都能通过 JavaScript 来完成整个业务。

JavaScript 中的 Web Workers 是什么？

JavaScript 中的 Web Worker 允许我们在不干扰用户界面的前提下，Web 内容在后台运行。JavaScript 是单线程的语言。 所以，所有的脚本执行都是通过这个单线程执行，称为主线程。主线程通常负责进行所有繁重的工作。当主线程已经忙于执行其他 CPU 密集型进程时，当你尝试执行一个进程时，可能会出现问题。这就是 HTML5 中 Web Workers 发挥作用的地方。使用 Web Workers，我们可以将一些进程从主线程转移到 Web Worker 线程中。这就释放主线程去做其他的任务，因为这个时候 Worker 线程在处理 CPU 密集型的任务。

Web Worker - 案例

HTML Web Workers 通常用来卸载任务。它们被用来卸载主线程的任务，以方便主线程可以立马执行其他任务。

• 它可以用于执行一些对 CPU 要求高的任务。
• 它还用于在后台循环 URL。
• 在线上代码编辑器上，它被用来进行语法高亮功能。

总之，当我们想执行某个任务而不希望用户界面在任务执行期间保持卡住时，我们可以使用 HTML Web Workers。

Web Workers 通信

为了从主线程卸载（转移）任务到 worker 线程中，然后再将 worker 中的结果返回主线程中，我们需要在两个线程中建立某种通信渠道，或者说是脚本。

我们可以通过下面两种方法在 main 脚本和 worker 脚本中建立通信渠道：

1. postMessage() Method

这个方法，我们创建了一个分离的脚本，并在 main 的脚本中，使用 .postMessage() 和 onmessage() 的事件监听器将其联系起来。我们也使用 Worker 类构建器创建其对象，然后定义 worker 脚本的引用路径。

代码语言：javascript复制

const worker = new Worker(worker.js);
Sending and Receiving a message from the main script to the worker script:
// main.js
btn1.addEventListner('click', (event) => {
  worker.postMessage('Hello Worker'); // Using the postMessage to send Message from the main.js to worker.js
})
worker.onmessage = function(message);
alert(`The sum is: ${message.data}`);

worker 脚本从 main 脚本中接收信息：

代码语言：javascript复制

// worker.js
self.onmessage = function(message){ // Using onmessage to receive the message in the worker.js
let sum = 0;
for(let i = 0; i < 10000000l i  = 1)
sum  = 1;
self.postMessage(sum); // Using postMessage to send the answer back to the main.js
}

2. 广播通道

广播通道，就像我们所知道的广播通道接口（Broadcast Channel API），允许浏览器上下文基本的通信（比如 windows, frames, tabs, 或者 iframes）。与 worker 通信，我们创建一个 BroadcastChannel 对象。我们想要进行通信的 frames 或者 workers，不需要保存在我们的引用列表中，因为它们可以通过使用相同的名称创建它们的 BroadcastChannel，并在它们之间实现双向通信。

A) 创建 Broadcast 通道

代码语言：javascript复制

const bc = new BroadcastChannel('newChannel');

B) 发送一条信息

代码语言：javascript复制

bc.postMessage('Message is sent through a broadcast channel');

C) 接受一条信息

代码语言：javascript复制

bc.onmessage = (event) => { console.log(event) };

D) 断开通道

代码语言：javascript复制

bc.close();

Web Worker API

正如上面我们提及到的引入 worker 的脚本路径那样，worker 就是通过使用 Worker 类构造函数创建的一个对象。worker 脚本中包含了将运行的 worker 线程。Web Worker 有两种类型：

1. Dedicated Workers（专用）

Dedicated Workers 是由一个脚本利用 DedicatedWorkerGlobalScope 对象表示的上下文的工作线程。Dedicated Workers 专用线程只能被调用它的脚本访问。

代码语言：javascript复制

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

上面