JavaScript - Worker API: 解锁并行处理能力

你好，未来的JavaScript大师们！今天，我们将踏上一段激动人心的旅程，探索Web Workers的世界。想象一下，你是一位忙碌厨房中的厨师。有时，你需要额外的手来帮助你准备一顿复杂的饭菜。Web Workers对你的JavaScript代码所做的正是这样——它们伸出援手，处理繁重任务，而不会拖慢你的主要烹饪……我是说，编码过程！

JavaScript - Worker API

Web Worker API：你的JavaScript副厨师

Web Worker API就像在你的JavaScript厨房里有一位助手厨师。它允许你在后台独立运行脚本。这意味着你可以执行耗时的任务，而不会干扰主页面的性能。酷不酷？

让我们深入研究，看看如何让这些助手投入工作！

检查Web Worker支持

在使用Web Workers之前，我们需要确保我们的浏览器支持它们。这就像在开始烹饪之前检查你的厨房是否有正确的设备。以下是如何操作：

if (typeof(Worker) !== "undefined") {
// 太好了！Web Workers受到支持
console.log("让我们开始工作！");
} else {
// 哎呀！Web Workers不受支持
console.log("抱歉，你的浏览器不支持Web Workers");
}

在这段代码中，我们在检查Worker对象是否已定义。如果是，我们可以开始。如果不是，我们需要找到其他方式来处理我们的任务。

创建Web Worker文件

既然我们知道我们的浏览器可以处理Web Workers，那么让我们来创建一个！Web Worker就像我们的助手厨师（浏览器）将遵循的食谱。我们将为我们的Web Worker创建一个单独的JavaScript文件。

让我们创建一个名为worker.js的文件：

// worker.js
self.addEventListener('message', function(e) {
const result = e.data * 2;
self.postMessage(result);
}, false);

这个worker监听消息，接收的数字翻倍，然后发送结果回去。简单吧？

创建Web Worker对象

现在我们有了worker文件，让我们在主脚本中创建一个Web Worker对象：

let myWorker;

if (typeof(Worker) !== "undefined") {
myWorker = new Worker("worker.js");
} else {
console.log("你的浏览器不支持Web Workers！");
}

这段代码创建了一个新的Web Worker对象，指向我们的worker.js文件。这就像雇佣我们的助手厨师并给他们我们的食谱。

与我们的Web Worker通信

现在，让我们看看如何向我们的worker发送任务并获取结果：

// 向worker发送数据
myWorker.postMessage(10);

// 从worker接收数据
myWorker.onmessage = function(e) {
console.log("worker发回：" + e.data);
};

在这个例子中，我们向worker发送数字10。worker将其翻倍并发回20。就像让你的助手将食谱的配料翻倍！

终止Web Worker的执行

当我们完成Web Worker的使用时，我们应该结束它以释放资源。这就像告诉你的助手厨师他们可以在准备好饭菜后回家：

myWorker.terminate();
myWorker = undefined;

这段代码终止了worker并将myWorker变量设置为undefined，有效地移除了我们对它的引用。

示例：Web Worker的完整程序

让我们把所有的东西放在一起，形成一个完整的示例：

<!DOCTYPE html>
<html>
<body>

<p>计算数字：<output id="result"></output></p>
<button onclick="startWorker()">开始Worker</button>
<button onclick="stopWorker()">停止Worker</button>

<script>
let w;

function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("worker.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉！不支持Web Worker。";
}
}

function stopWorker() {
w.terminate();
w = undefined;
}
</script>

</body>
</html>

这是我们的worker.js：

let i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

这个示例创建了一个计数数字的worker，每半秒更新一次。主页面可以启动和停止这个worker，展示了我们如何从主“厨房”控制我们的“助手厨师”。

Web Worker的使用场景

Web Workers对于可能需要很长时间才能完成的任务非常有用。以下是一些常见的使用场景：

复杂计算
大数据处理
图像或视频处理
网络操作
解析大型数据集（如CSV文件）

将这些视为你的助手厨师可以处理的复杂食谱，而不会干扰你的主要烹饪过程！

Web Workers与DOM

记住一件重要的事情：Web Workers不能直接访问DOM（文档对象模型）。就像你的助手厨师不能直接为顾客服务一样——他们需要先将准备好的食物交给你。

如果Worker需要与网页交互，它必须向主脚本发送消息，然后主脚本更新DOM。

结论

Web Workers是您JavaScript工具箱中的强大工具。它们允许您在不减慢主脚本速度的情况下执行复杂任务，就像助手厨师帮助您更有效地准备复杂菜肴一样。

记住，有效使用Web Workers的关键是识别可以独立于主脚本运行的任务。随着实践，您将能够指挥一群Web Workers，创建快速、响应的Web应用程序，轻松处理复杂任务。

快乐编码，愿您的JavaScript厨房总是充满高效的Web Workers！

Credits: Image by storyset

上一教程:

JavaScript - 表单API

下一教程:

JavaScript - Fetch API