Web Workers 客户端 + 服务端应用

一. Web Workers 客户端应用

使用 JavaScript 创建 Web Worker 的步骤如下:

1.创建一个新的 JavaScript 文件,其中包含要在工作线程中运行的代码(耗时任务)。该文件不应包含对 DOM 的引用,因为在工作线程中无法访问 DOM。

2.在主 JavaScript 文件中,使用 Worker 构造函数创建一个新的worker对象。此构造函数接收一个参数,即在步骤 1 中创建的 JavaScript 文件的 URL。

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

3.向worker对象添加事件侦听器以处理主线程和工作线程之间发送的消息。onmessage 用于处理从工作线程发送来的消息,postMessage 用于向工作线程发送消息。

 
worker.onmessage = function(event) {console.log('Worker: ' + event.data);
};worker.postMessage('Hello, worker!');

4.在 Web Worker 的 JavaScript 文件中,使用self对象的onmessage属性添加一个事件监听器来处理从主线程发出的消息。可以使用event.data属性访问发送的消息数据。

 
self.onmessage = function(event) {console.log('Main: ' + event.data);self.postMessage('Hello, Main!');
};

接下来就运行应用并测试 Worker。可以在控制台看到以下信息,表示主线程和 Worker 线程之间发送和接收了消息。

 
Main:Hello worker!
Worker:Hello Main!

我们可以使用terminate()函数来终止一个工作线程,或者通过调用self上的close()函数使其自行终止。

 
// 从应用中终止一个工作线程
worker.terminate();
// 让一个工作线程自行终止
self.close();

可以使用importScripts()函数将库或文件导入到工作线程中,该函数可以接受多个文件。以下示例将script1.jsscript2.js加载到工作线程 worker.js 中:

 
importScripts('script1.js','script2');

可以使用 onerror函数来处理工作线程抛出的错误:

 
worker.onerror = function(err) {console.log("遇到错误")
}

二. Web Workers 服务端应用

服务器端 JavaScript 运行时也支持 Web Worker:

  • Node.js 在版本 10 中实现了类似 Web Worker 的功能,称为 Worker thread(工作进程)。

  • Deno 复制了 Web Worker API,因此语法与浏览器代码完全相同。它还提供了兼容模式,可以填充 Node.js API,以便可以使用该运行时的工作线程语法。

  • Bun 将支持浏览器和 Node.js 的 Web Worker API。

1. 基本使用

要在 Node.js 中使用 Web Worker,主脚本必须定义一个 Worker 对象,其中包含相对于项目根目录的 Web Worker 脚本的名称。第二个参数定义了一个对象,其中包含一个workerData属性,该属性包含要发送的数据:

 
const worker = new Worker('./worker.js', {workerData: { a: 1, b: 2, c: 3 }
});

与浏览器中的 Web Worker 不同, 它在启动时无需运行worker.postMessage()。如果需要的话,可以调用该方法并稍后发送更多数据,它会触发parentPort.on('message')事件处理程序:

 
parentPort.on('message', e => {console.log(e);
});

一旦工作线程完成处理,它会使用以下方法将结果数据发送回主线程:

 
parentPort.postMessage(result);

这将在在主脚本中触发 message 事件,主线程接收到 worker 返回的结果:

 
worker.on('message', result => {console.log( result );
});

在发送完消息后,worker 就会终止。这也会触发一个exit事件,如果希望运行清理或其他函数,可以利用这个事件:

 
worker.on('exit', code => {//...
});

除此之外,还支持其他事件处理:

  • messageerror:当 worker 收到无法反序列化的数据时触发。

  • online:当 worker 开始执行时触发。

  • error:当 worker 脚本中发生 JavaScript 错误时触发。

在服务端,一个单独的 Node.js 脚本文件可以同时包含主线程和工作线程的代码。脚本必须使用isMainThread检查自身是否在主线程上运行,然后将自身作为工作线程进行调用(可以在 ES 模块中使用import.meta.url作为文件引用,或者在 CommonJS 中使用__filename)。

 
import { Worker, isMainThread, workerData, parentPort } from "node:worker_threads";if (isMainThread) {// 主线程const worker = new Worker(import.meta.url, {workerData: { a: 1, b: 2, c: 3 }});worker.on('message', msg => {});worker.on('exit', code => {});
}
else {// 工作线程const result = runSomeProcess( workerData );parentPort.postMessage(result);
}

这种方式更快,并且对于小型、自包含的单脚本项目来说是一个选择。如果是大型项目,将 worker 脚本文件分开会更容易维护。

2. 数据通信

主线程和工作线程之间的通信涉及到了数据序列化。可以使用表示固定长度原始二进制数据的SharedArrayBuffer对象在线程之间共享数据。以下是一个示例,主线程定义了从 0 到 99 的 100 个数字元素,并将其发送给工作线程:

 
// main.js
import { Worker } from "node:worker_threads";constbuffer = new SharedArrayBuffer(100 * Int32Array.BYTES_PER_ELEMENT),value = new Int32Array(buffer);value.forEach((v,i) => value[i] = i);const worker = new Worker('./worker.js');worker.postMessage({ value });

工作线程可以接收 value对象:

 
// worker.js
import { parentPort } from 'node:worker_threads';parentPort.on('message', value => {value[0] = 100;
});

主线程或工作线程都可以更改值数组中的元素,数据将在两个线程之间保持一致。这可能会提高性能,但有一些缺点:

  • 只能共享整数数据。

  • 可能仍需要通知另一个线程更改。

  • 存在两个线程可能同时更新同一值并且失去同步的风险。

3. Node.js 子进程

在 Node.js 中,除了使用工作线程外,还可以使用子进程来实现类似的功能。子进程用于启动其他应用、传递数据并接收结果。它们与工作线程类似,但通常效率较低,进程开销较大。

子进程和工作线程的选择取决于具体的应用场景。如果只需要在 Node.js 中执行其他任务或命令,子进程是一种更好的选择。但如果需要在 Node.js 中进行复杂的计算或处理任务,Web Worker 可能更适合。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/73048.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大模型工具Ollama存在安全风险

国家网络安全通报中心:大模型工具Ollama存在安全风险 来源:国家网络与信息安全信息通报中心 3月3日,国家网络安全通报中心发布关于大模型工具Ollama存在安全风险的情况通报,内容如下: 据清华大学网络空间测绘联合研…

LINUX系统安装+添加共享目录

一、前言 Windows或mac系统中创建Linux工作环境是基于VMware和SL(Scientific Linux),下面分别安装二者。 二、VMware软件安装及注册 1、双击VMware安装包 2、点击下一步 3、 勾选接受许可,并点击下一步 4、更改路径(建议更改为容易找到的路…

BI 工具响应慢?可能是 OLAP 层拖了后腿

在数据驱动决策的时代,BI 已成为企业洞察业务、辅助决策的必备工具。然而,随着数据量激增和分析需求复杂化,BI 系统“卡”、“响应慢”的问题日益突出,严重影响分析效率和用户体验。 本文将深入 BI 性能问题的根源,并…

基于SSM+Vue的汽车维修保养预约系统+LW示例

1.项目介绍 系统角色:管理员、员工、用户功能模块:用户管理、员工管理、汽车类型管理、项目类型管理、维修/预约订单管理、系统管理、公告管理等技术选型:SSM,vue(后端管理web),Layui&#xff…

在rocklinux里面批量部署安装rocklinx9

部署三台Rockylinux9服务器 实验要求 1. 自动安装ubuntu server20以上版本 2. 自动部署三台Rockylinux9服务器,最小化安装,安装基础包,并设定国内源,设静态IP 实验步骤 安装软件 # yum源必须有epel源 # dnf install -y epel-re…

Oxidized收集H3C交换机网络配置报错,not matching configured prompt (?-mix:^(<CD>)$)

背景:问题如上标题,H3C所有交换机配置的model都是comware 解决方案: 1、找到compare.rb [rootoxidized model]# pwd /usr/local/lib/ruby/gems/3.1.0/gems/oxidized-0.29.1/lib/oxidized/model [rootoxidized model]# ll comware.rb -rw-r--…

mac本地安装运行Redis-单机

记录一下我以前用的连接服务器的跨平台SSH客户端。 因为还要准备毕设...... 服务器又过期了,只能把redis安装下载到本地了。 目录 1.github下载Redis 2.安装homebrew 3.更新GCC 4.自行安装Redis 5.通过 Homebrew 安装 Redis 安装地址:https://git…

C++学习之格斗小游戏综合案例

C格斗游戏效果视频 1.案例简介 #include "broadSword.h" //构造函数 BroadSword::BroadSword() { FileManager fm; map<string, map<string, string>> mWeapon; fm.loadCSVData("Weapons.csv", mWeapon); //武器id string id …

《用Python+PyGame开发双人生存游戏!源码解析+完整开发思路分享》

导语​ "你是否想过用Python开发一款可玩性高的双人合作游戏&#xff1f;本文将分享如何从零开始实现一款类《吸血鬼幸存者》的生存射击游戏&#xff01;包含完整源码解析、角色系统设计、敌人AI逻辑等核心技术点&#xff0c;文末提供完整代码包下载&#xff01;" 哈…

【理想解法学习笔记】

目录 理想解法原理简介算法步骤属性值规范化方法代码示例 理想解法 原理简介 TOPSIS(Technique for Order Preference by Simi larity to IdealSolution)法是一种逼近理想解的排序方法。其基本的处理思路是&#xff1a;首先建立初始化决策矩阵&#xff0c;而后基于规范化后的初…

Linux基础开发工具—vim

目录 1、vim的概念 2、vim的常见模式 2.1 演示切换vim模式 3、vim命令模式常用操作 3.1 移动光标 3.2 删除文字 3.3 复制 3.4 替换 4、vim底行模式常用命令 4.1 查找字符 5、vim的配置文件 1、vim的概念 Vim全称是Vi IMproved&#xff0c;即说明它是Vi编辑器的增强…

Skyvern AI 实现 浏览器爬虫+自动化工具

一、前言 本文Skyvern是一款功能强大的模拟浏览器自动化操作爬虫软件。它通过模拟人类在浏览器中的操作&#xff0c;实现对目标网站的自动化访问、数据抓取和处理。Skyvern支持多种编程语言&#xff0c;用户可根据需求编写脚本&#xff0c;实现高效的数据采集。同时&#xff0c…

Spring Boot + MyBatis + MySQL:快速搭建CRUD应用

一、引言 1. 项目背景与目标 在现代Web开发中&#xff0c;CRUD&#xff08;创建、读取、更新、删除&#xff09;操作是几乎所有应用程序的核心功能。本项目旨在通过Spring Boot、MyBatis和MySQL技术栈&#xff0c;快速搭建一个高效、简洁的CRUD应用。我们将从零开始&#xff…

【Academy】OAuth 2.0 身份验证漏洞 ------ OAuth 2.0 authentication vulnerabilities

OAuth 2.0 身份验证漏洞 ------ OAuth 2.0 authentication vulnerabilities 1. 什么是 OAuth&#xff1f;2. OAuth 2.0 是如何工作的&#xff1f;3. OAuth 授权类型3.1 OAuth 范围3.2 授权代码授权类型3.3 隐式授权类型 4. OAuth 身份验证4.1 识别 OAuth 身份验证4.2 侦察OAuth…

C#常用的循环语句

在C#中&#xff0c;循环是一种控制结构&#xff0c;用于重复执行一组语句直到满足特定条件。C#提供了几种循环结构&#xff0c;包括for循环、while循环、do-while循环和foreach循环。每种循环都有其特定的用途和场景。下面我将逐一介绍这些循环的用法。 一、C#循环类型 1. fo…

C语言(23)

字符串函数 11.strstr函数 1.1函数介绍&#xff1a; 头文件&#xff1a;string.h char *strstr ( const char * str1,const char *str2); 作用&#xff1a;在一个字符串&#xff08;str1&#xff09;中寻找另外一个字符串&#xff08;str2&#xff09;是否出现过 如果找到…

Vue3实战学习(Vue3的基础语法学习与使用(超详细))(3)

目录 &#xff08;1&#xff09;Vue3工程环境准备、项目基础脚手架搭建详细教程。(博客链接) &#xff08;2&#xff09;Vue3的基础语法学习与使用。 &#xff08;1&#xff09;"{{}}"绑定数据。 <1>ref()函数定义变量——绑定数据。 <2>reactive({...})…

vtkDepthSortPolyData 根据相机视图方向对多边形数据进行排序

1. 作用 在 3D 渲染中&#xff0c;透明对象的渲染顺序非常重要。如果透明对象的渲染顺序不正确&#xff0c;可能会导致错误的视觉效果&#xff08;例如&#xff0c;远处的透明对象遮挡了近处的透明对象&#xff09;。vtkDepthSortPolyData 通过对多边形数据进行深度排序&#…

【2025力扣打卡系列】0-1背包 完全背包

坚持按题型打卡&刷&梳理力扣算法题系列&#xff0c;语言为python3&#xff0c;Day5 0-1背包【目标和】 有n个物品&#xff0c;第i个物品的体积为w[i], 价值为v[i]。每个物品至多选一个&#xff0c;求体积和不超过capacity时的最大价值和常见变形 至多装capacity&#x…

MyBatis-Plus 分页查询接口返回值问题剖析

在使用 MyBatis-Plus 进行分页查询时,很多开发者会遇到一个常见的问题:当分页查询接口返回值定义为 Page<T> 时,执行查询会抛出异常;而将返回值修改为 IPage<T> 时,分页查询却能正常工作。本文将从 MyBatis-Plus 的分页机制入手,详细分析这一问题的根源,并提…