在前端开发中，JavaScript 是不可或缺的一部分，但是当我们处理大量数据或者复杂的计算时，JavaScript 的单线程特性可能会成为瓶颈。为了解决这个问题，HTML5 引入了 Web Workers，可以让我们在独立的线程中运行 JavaScript 代码，从而实现并行计算。
什么是 Web Workers？
Web Workers 是一种 JavaScript API，它允许我们在独立的后台线程中运行 JavaScript 代码，而不会阻塞主线程。这意味着我们可以同时执行多个计算密集型任务，而不会影响用户界面的响应性。
Web Workers 有两种类型：Dedicated Workers 和 Shared Workers。Dedicated Workers 只能被一个页面使用，而 Shared Workers 可以被多个页面共享。
如何使用 Web Workers？
首先，我们需要创建一个新的 Worker 对象，并指定要执行的 JavaScript 文件：
var worker = new Worker('worker.js');然后，在 worker.js 文件中，我们可以编写我们想要执行的 JavaScript 代码：
// www.javascriptcn.com code example
// worker.js
function doHeavyComputations() {
// ...
}
self.addEventListener('message', function(e) {
var data = e.data;
if (data === 'start') {
var result = doHeavyComputations();
self.postMessage(result);
}
}, false);在这个示例中，我们定义了一个 doHeavyComputations 函数来执行一些耗时的计算。然后，我们添加了一个事件监听器来接收来自主线程的消息。当主线程发送一个 'start' 消息时，我们调用 doHeavyComputations 函数，并通过 postMessage 方法将结果发送回主线程。
在主线程中，我们可以通过监听 message 事件来接收来自 worker.js 文件的消息：
worker.addEventListener('message', function(e) {
var result = e.data;
console.log(result);
}, false);
worker.postMessage('start');在这个示例中，我们添加了一个事件监听器来接收来自 worker.js 文件的消息。当 worker.js 文件通过 postMessage 方法发送消息时，我们将结果打印到控制台中。
Web Workers 的指导意义
使用 Web Workers 并行化 JavaScript 代码可以带来很多好处，包括：
- 提高应用程序的响应性：通过将计算密集型任务放在独立的线程中运行，我们可以避免阻塞主线程，从而提高应用程序的响应性。
- 提高应用程序的性能：通过同时执行多个计算密集型任务，我们可以利用多核 CPU，从而提高应用程序的性能。
- 提高开发效率：使用 Web Workers 可以让我们更轻松地编写并行化代码，从而提高开发效率。
但是，使用 Web Workers 也存在一些限制和注意事项：
- Web Workers 不能访问 DOM：由于 Web Workers 运行在独立的线程中，它们不能直接访问主线程中的 DOM。但是，我们可以使用 postMessage 方法来发送消息，并在主线程中处理这些消息。
- Web Workers 不能访问全局变量：由于 Web Workers 运行在独立的线程中，它们不能直接访问主线程中的全局变量。但是，我们可以使用 importScripts 方法来加载其他 JavaScript 文件。
- Web Workers 需要一些额外的开销：由于 Web Workers 运行在独立的线程中，它们需要一些额外的开销，包括内存和 CPU 时间。因此，我们应该谨慎使用 Web Workers，并确保它们真正需要并行执行的任务。
示例代码
下面是一个使用 Web Workers 并行化 JavaScript 代码的示例：
// www.javascriptcn.com code example
// main.js
var worker = new Worker('worker.js');
worker.addEventListener('message', function(e) {
var result = e.data;
console.log(result);
}, false);
worker.postMessage('start');// www.javascriptcn.com code example
// worker.js
function doHeavyComputations() {
// ...
}
self.addEventListener('message', function(e) {
var data = e.data;
if (data === 'start') {
var result = doHeavyComputations();
self.postMessage(result);
}
}, false);在这个示例中，我们创建了一个 worker.js 文件来执行一些耗时的计算。然后，在主线程中，我们创建了一个新的 Worker 对象，并将其指定为 worker.js 文件。最后，我们使用 postMessage 方法向 worker.js 文件发送消息，并通过监听 message 事件来接收结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d29329a941bf71344e3ff2