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 =newWorker('worker.js');
- 发送消息：主线程和工作线程之间通过
postMessage方法传递消息。主线程发送消息到Worker：
worker.postMessage([firstValue, secondValue]);
- 其中
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);};
主线程接收Worker消息：
worker.onmessage=function(e){let result = e.data;// 更新UI或做其他处理...};
- 终止Worker：当不再需要Worker时，应使用
terminate方法结束其生命周期。
worker.terminate();
完整示例
主线程（index.html）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Web Worker 示例</title></head><body><buttononclick="startWorker()">开始计算</button><pid="result"></p><script>// 创建Workervar worker =newWorker('worker.js');functionstartWorker(){
worker.postMessage([1024,512]);// 向Worker发送消息
worker.onmessage=function(e){// 监听Worker的消息
document.getElementById('result').innerText ='结果: '+ e.data;};}// 可选：终止Worker// worker.terminate();</script></body></html>
Worker线程（worker.js）
self.onmessage=function(e){// 接收主线程的消息var data = e.data;// 获取传入的数据var result = data[0]* data[1];// 执行计算
self.postMessage(result);// 将结果发送回主线程};
在这个例子中，当用户点击“开始计算”按钮时，主线程会启动一个Worker，并向其发送两个数字。Worker接收到这两个数字后，计算它们的乘积，并将结果发送回主线程，最后在页面上显示出来。这样，即使计算过程耗时较长，也不会影响页面的其他交互。
本文转载自: https://blog.csdn.net/imdeity/article/details/139952340
版权归原作者 昱晏 所有， 如有侵权，请联系我们删除。
版权归原作者 昱晏 所有， 如有侵权，请联系我们删除。