如何使用 Web Worker

大家好👋

在本文中，我们将了解如何在我们的网站上使用 Web Worker API 来避免在执行 CPU 密集型任务时阻塞线程。

Web Worker

Web Worker 是一种在后台运行的 JavaScript，独立于其他脚本，不会影响页面的性能。

这意味着什么？

众所周知，JavaScript 是一种单线程语言，因此在执行脚本时，网站将变得无响应，直到脚本完成为止。

为了避免阻塞网站交互，我们可以创建一个在后台执行脚本的 Worker。这样，我们就能提高网站的性能。

Web Workers 使用与 Web 应用程序主执行线程分离的后台线程。

执行

让我们探索一下 Web Worker API。

检查浏览器支持

if (typeof(Worker) !== "undefined") {
  // It support
  ...
}

我们将通过一个基本示例来理解其实现。父脚本将传递一个数字给工作脚本，然后计算该数字的平方根并返回给父脚本。

工作对象和工作脚本有一些事件监听器，借助它们我们可以进行通信和处理错误。

家长脚本

该 javascript 文件将在主线程中运行。

创建 Worker

// Creates a new worker object
var worker = new Worker("./worker.js");

接收数据

// Listen for data from the worker script
worker.onmessage = function(e) {
  // Access the data from event object
  let data = e.data;
  ...
}

错误时

// Listen for error
worker.onerror= function(err) {
  // Access the message from error object
  let error = err.message;
  ...
}

发送数据

// Send data to the worker script
worker.postMessage(data);

终止工人

// Immediately terminates the worker
worker.terminate();

工作者脚本

现在我们将创建 javascript 文件worker.js。

// Listen for data from the parent script
self.onmessage = function (e) {
  // Access the data from event object
  const value = Math.sqrt(e.data);

  // Sending data to the parent script
  self.postMessage(value);
};

// It fires when message can't be deserialized
self.onmessageerror = function (e) {
  ...
};