HTML5的多线程技术：Web Worker API

作者：笔触狂放9 | 2024-06-30 18:24:35

踩

Web Workers API 是HTML5的一项技术，它允许在浏览器后台独立于主线程运行脚本，即允许进行多线程处理。这对于执行密集型计算任务特别有用，因为它可以防止这些任务阻塞用户界面，从而保持网页的响应性和交互性。Web Workers在自己的线程中运行，拥有自己的事件循环和消息传递系统，与主线程进行通信。

概念

主线程与工作线程：Web页面默认在主线程上执行JavaScript，负责UI渲染和事件处理。Web Workers提供了工作线程，使得耗时操作可以在后台进行，避免影响用户体验。
类型

：Web Workers主要有两种类型：
- Dedicated Worker：每个Dedicated Worker与创建它的脚本一对一通信，适用于单个任务的后台处理。
- Shared Worker：可以被多个脚本共享，适合多个页面或标签共享数据和资源的场景。

用法

创建Worker对象：首先，需要创建一个新的Worker对象，并传入一个脚本URL作为参数。这个脚本将在新的线程中执行。
发送消息：使用postMessage()方法从主线程向Worker线程发送数据。
监听消息：在Worker线程中，通过监听onmessage事件来接收主线程发来的消息。
返回结果：Worker线程也可以通过调用自身的postMessage()方法向主线程发送数据。
终止Worker：使用terminate()方法可以停止Worker线程。

使用限制

同源限制：Worker线程运行的脚本文件必须与主线程的脚本文件同源。
DOM限制：Worker线程无法读取主线程所在网页的DOM对象。
通信联系：Worker线程和主线程不能直接通信，必须通过消息完成。
脚本限制：Worker线程不能执行alert()和confirm()方法。
文件限制：Worker线程无法读取本地文件，只能加载来自网络的脚本。

使用场景

复杂计算：如大数据处理、图像处理或加密解密等计算密集型任务。
长时间运行的任务：如轮询服务器、实时数据分析等。
异步I/O操作：虽然通常使用Fetch API或XMLHttpRequest，但在某些特殊情况下，Worker可以用于执行这些操作而不阻塞UI。

使用步骤

创建Worker：首先，在一个单独的JavaScript文件中编写将在工作线程中执行的代码。然后，在主线程中使用Worker构造函数创建一个新的Worker实例，传入这个文件的URL。



   let worker = new Worker('worker.js');
1
2
3

发送消息：主线程和工作线程之间通过postMessage方法传递消息。

主线程发送消息到Worker：

   worker.postMessage([firstValue, secondValue]);
1

其中message可以是文本，也可以是对象。需要注意的是，这种通信是拷贝关系，即是传值而不是传址，Worker 对通信内容的修改，不会影响到主线程。事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给 Worker，后者再将它还原。主线程与 Worker 之间也可以交换二进制数据，比如 File、Blob、ArrayBuffer 等类型，也可以在线程之间发送,但是一旦二级制数据量太大，会导致性能问题。
transfer可转移对象是如ArrayBuffer，MessagePort或ImageBitmap等二进制数据。JavaScript 允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。这使得主线程可以快速把数据交给 Worker，对于影像处理、声音处理、3D 运算等就非常方便了，不会产生额外的性能负担。

监听消息：使用onmessage事件监听器接收来自其他线程的消息。

Worker接收主线程消息：

   self.onmessage = function(e) {
       let data = e.data;
       // 处理数据...
       self.postMessage(result);
   };
1
2
3
4
5

主线程接收Worker消息：

 worker.onmessage = function(e) {
       let result = e.data;
       // 更新UI或做其他处理...
   };
1
2
3
4

终止Worker：当不再需要Worker时，应使用terminate方法结束其生命周期。



   worker.terminate();
1
2
3

完整示例

主线程（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Worker 示例</title>
</head>
<body>
    <button onclick="startWorker()">开始计算</button>
    <p id="result"></p>

    <script>
        // 创建Worker
        var worker = new Worker('worker.js');

        function startWorker() {
            worker.postMessage([1024, 512]); // 向Worker发送消息
            worker.onmessage = function(e) { // 监听Worker的消息
                document.getElementById('result').innerText = '结果: ' + e.data;
            };
        }

        // 可选：终止Worker
        // worker.terminate();
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Worker线程（worker.js）

self.onmessage = function(e) { // 接收主线程的消息
    var data = e.data; // 获取传入的数据
    var result = data[0] * data[1]; // 执行计算
    self.postMessage(result); // 将结果发送回主线程
};
1
2
3
4
5

在这个例子中，当用户点击“开始计算”按钮时，主线程会启动一个Worker，并向其发送两个数字。Worker接收到这两个数字后，计算它们的乘积，并将结果发送回主线程，最后在页面上显示出来。这样，即使计算过程耗时较长，也不会影响页面的其他交互。

在这里插入图片描述

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】