HTML5 Web Workers|程序员教程

HTML5 Web Workers

创建 Web Worker 文件

首先，需要创建一个 JavaScript 文件，其中包含要在 Web Worker 中运行的代码。这个文件被称为工作线程文件，在本教程中我们将其命名为 worker.js。例如，以下是一个简单的 Web Worker 文件，用于计算数字的平方：

                self.addEventListener("message", function (event) {
                const input = event.data;
                const result = input * input;
                self.postMessage(result);
                });

在这个示例中，我们监听 "message" 事件。当从主线程接收到消息时，我们获取传递的数据（数字），计算其平方，并通过 postMessage 方法将结果发送回主线程。

创建 Web Worker 实例

接下来，在主要的 JavaScript 文件中，我们需要创建一个 Web Worker 实例，并指定刚才创建的 worker.js 文件。例如：

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

发送消息给 Web Worker

现在，您可以通过 postMessage() 方法向 Web Worker 发送消息。例如，为了计算数字 5 的平方，可以这样做：

                worker.postMessage(5);

从 Web Worker 接收消息

要处理从 Web Worker 发送回来的消息，需要在主线程中监听 "message" 事件。例如：

                worker.addEventListener("message", function (event) {
                console.log("Square of the number is: ", event.data);
                });

在这个示例中，当我们接收到来自 Web Worker 的消息时，我们会在控制台上打印出数字的平方。

关闭 Web Worker

在某些情况下，您可能希望在完成任务后关闭 Web Worker。为此，可以调用 terminate() 方法。例如：

                >worker.terminate();

请注意，一旦调用了 terminate()，Web Worker 将立即停止执行，且无法重新启动。如果需要再次使用该 Web Worker，则必须创建一个新实例。

以下是完整的代码示例：

                <!-- index.html -->
                <!DOCTYPE html>
                <html>
                <head>
                <script src="main.js"></script>
                </head>
                <body>
                </body>
                </html>

                // main.js
                const worker = new Worker("worker.js");

                worker.postMessage(5);

                worker.addEventListener("message", function (event) {
                console.log("Square of the number is: ", event.data);
                });

                worker.terminate();

                // worker.js
                self.addEventListener("message", function (event) {
                const input = event.data;
                const result = input * input;
                self.postMessage(result);
                });

通过使用 HTML5 Web Workers 功能，您可以将耗时的、计算密集型任务移到后台线程中，从而避免阻塞用户界面，并提高应用程序的性能。请务必了解这些概念，以便更好地利用 Web Workers 的优点。