nodejs 038: Js Worker线程消息传递 Worker.postMessage() & Worker.postMessage()

javascript学习——Web Worker JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。 阅读详情
  • worker.postMessage() 是 Web Workers API 的一部分,用于在主线程和 Worker 线程之间进行通信。通过这种方法,可以在不同的执行上下文(例如主线程与Web Worker之间)安全地传递消息。
Layer 1 worker.postMessage Worker Main worker=new Worker() self.addEventListener('message', async (event) => {}) self.postMessage({status: 'message_worker2main'}); 'message', onMessageReceived); worker.addEventListener( 主线程发送消息 主线程接收消息 worker线程发送消息 worker程接收消息

基本概念

  • Web Worker:允许在后台线程中运行脚本而不干扰用户界面。这非常适合执行计算密集型任务,如数据处理或运行复杂算法,而不会冻结网页。
  • 主线程与Worker之间的通信:由于JavaScript是单线程的,Web Worker提供了一种机制来利用多核CPU的优势。主线程和Worker之间可以通过postMessage()方法发送消息,并使用onmessage事件监听器接收消息。

使用方法

在主线程中使用

当你想从主线程向Worker发送消息时,可以使用如下方式:

const worker = new Worker('worker.js'); // 创建一个新的Worker实例
worker.postMessage({cmd: 'start', value: 10}); // 发送消息到Worker

在这个例子中,我们创建了一个新的Worker实例并给它发送一个包含命令(cmd)和值(value)的对象。

在Worker内部使用

同样,Worker也可以使用postMessage()方法将消息发送回主线程:

self.postMessage({status: 'progress', progress: 50}); // 向主线程发送消息

这里的self指的是Worker全局作用域,等同于在Worker环境中使用this关键字。

消息内容

  • 可以发送基本类型的数据、对象、数组等。对于复杂的数据结构,JavaScript会自动执行结构化克隆算法来复制这些数据,这意味着不需要担心原始数据是否会被修改。
  • 对于需要高效传输大量数据的情况,可以使用ArrayBuffer对象,这样可以避免不必要的数据复制。

示例代码

// 主线程监听来自主线程的消息事件
self.addEventListener('message', async (event) => {
    let output = await func(event.data, {
        // 其他参数...
    });

    // 将翻译结果发送回主线程
    self.postMessage({
        status: 'complete',
        output: output,
    });
});
  • 这里,self.postMessage()被用来将进度更新和最终的翻译结果从Worker发送回主线程。每当有新进展时,都会调用self.postMessage(),将相关信息作为参数传递,从而让主线程能够根据这些信息更新UI或其他状态。

注意事项

  • 数据传递是异步的,这意味着postMessage()不会阻塞当前线程等待响应。
  • 如果你需要从主线程或Worker接收到消息后执行特定操作,必须设置相应的onmessage事件处理器。
别再只盯着GPS了!手把手教你用Python仿真UWB定位,30厘米精度是怎么算出来的? 本文详细解析了UWB(超宽带)室内定位技术的原理与实现,通过Python代码演示如何从三边测量法到实现30厘米精度的定位。文章涵盖了UWB的核心数学模型、Python仿真环境搭建、误差分析及优化策略,为开发者提供了实用的技术指南和应用场景。 阅读详情

相关推荐

Win11家庭版彻底关闭Hyper-V的3种方法(实测有效)

本文详细介绍了Win11家庭版彻底关闭Hyper-V的3种实测有效方法,解决与VMware的兼容性问题。包括命令行禁用虚拟化功能、微软官方工具DG_Readiness深度清理以及组策略与功能组件联用方案,帮助用户高效禁用Hyper-V并优化系统性能。

weixin_33728268的博客 2670

webWorker 多线程 -- postMessage 通信

主线程中通过子线程文件,实例化一个。子线程在接受到数据后进行处理加工。主线程待处理数据通过。监听子线程返回的数据。

然后他就拿棍子来打我 1897

手把手教你用CODESYS将旧笔记本改造成软PLC(含证书配置避坑指南)

本文提供了一份详尽的指南,教你如何利用CODESYS平台将闲置旧笔记本改造为一台功能完整的软PLC。内容涵盖从硬件评估、系统实时性优化、软件安装与驱动配置,到关键的证书授权管理避坑指南,旨在帮助自动化工程师和爱好者低成本搭建稳定可靠的学习与开发平台。

weixin_29190573的博客 279

主线程和Worker之间的通信——postMessage方法

在JavaScript中,方法是用于在不同上下文之间(如主线程和Web Workers或ServiceWorkers)传递消息的一种机制。以下是如何使用。

求职大学生 1765

AXI Memory Mapped To PCI Express IP 核设计实例

本文详细描述了AXI Memory Mapped To PCI Express(2.9) IP核的应用实例

u011565038的博客 2799

ORBSLAM3运行记录(单目+IMU)

ORBSLAM3运行记录1.单目+IMU数据集运行记录自己做的其它测试2.单目+IMU自己采集数据运行记录测试结果 1.单目+IMU数据集运行记录 ORBSLAM3没有预留ROS下单目+IMU的结点,这个需要自己去写代码添加,可以参考这篇博客,《ORBSLAM3 用ROS接口运行双目IMU和单目IMU模式》。我的ROS结点为Mono-IMU,字典文件ORBvoc.txt在ORBSLAM3 / Vocabulary文件夹中,配置文件EuRoC.yaml在ORB_SLAM3 / Examples / Monoc

yys2324826380的博客 1万+

Web Worker 使用教程

(点击上方公众号,可快速关注)作者:阮一峰www.ruanyifeng.com/blog/2018/07/web-worker.html一、概述JavaScript 语言...

前端大全 814

在Windows11下安装完Ubuntu20.04双系统后配置环境的过程

在Windows11下安装完Ubuntu20.04双系统后配置环境的过程 1.NVIDIA驱动检测及安装 2.Anaconda的安装 3.安装cuda、cudnn、pytorch 4.其他报错

aaaccc444的博客 2424

一个实例浅析webWroker

Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。 ...

baidu_41601048的博客 549

美军利用MANET技术实现无人作战单元协同作战

本文首先介绍了移动自组织网络 (MANET)以及Wave Relay®波形中继技术,并探讨了波形中继MANET平台在美空军ABMS项目等军事方面的运用情况。

guanyifu9的博客 853

JSON 与 JSON-RPC 的区别

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,基于文本,采用人类可读的语法来表示结构化数据。它起源于JavaScript,但如今已被几乎所有主流编程语言支持。标准文档:RFC 4627数据类型:支持 String、Number、Boolean、Null、Object、Array 六种基本类型格式示例"name": "张三","age": 30,JSON-RPC(JSON Remote Procedure Call)是一种远程过程调用(RPC)协议。

h a 6 6 6 c k 为 你解决复杂难题! 146

不同窗口通信的postMessage方法的详解

窗口之间的通信,如果是不同域的,会受到浏览器的同源策略的限制,这篇文章介绍的postMessage方法可以解决这个问题 postMessage是window的属性,一般用于跨域窗口之间的通信 我们直接从实例中来学这个方法, 这样会理解的更深 我们现在要实现https://v.qq.com/和https://ke.qq.com之间的通信 在v.qq.com的控制台中输入下面代码,打开ke....

dreamjay1997的博客 4221

AEJoy —— 表达式之仅限在某一维摆动【JS】

效果图 wiggle() 的作用仅限于水平方向 想法 wiggle() 确实是一个非常方便的工具,但有时您希望对它有更多的控制。在本例中,我们希望仅将摆动限制在水平方向。 设计 要理解 wiggle() 最重要的一点是,它生成的结果与应用它的属性具有相同的维度。例如,如果你将 wiggle() 应用于 3D 层的 position 属性,结果将是一个由三个元素组成的数组(x、y 和 z 各一个)。我们需要做的就是将 wiggle() 的结果捕捉到一个变量(我们称之为 “w” ),然后从这个变量中提取我们想

ShaderJoy 的兴趣技术杂货铺 2094

JavaScript-worker基本使用

这个有点像java的socket 主线程 张三:喂喂喂李四在吗? postMessage(发送喂喂喂李四在吗给李四) onmessage(接收李四说的话) 分线程 李四:在的在的. onmessage(用于接收张三说的话) postMessage (发送在的在的给张三) 示例 index.html <script> //params String(js文件) var worker = new Worker('./work.js'); //发送数据到分线程 wor

xwc999 465

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

初识 web workers

Web Workers 是 HTML5 新增的一项 API,它允许在后台线程中运行 JavaScript 代码,从而避免阻塞主线程并提高 Web 应用程序的响应性能。通过将计算密集型任务(如大量数据的处理)放在 Worker 线程中,可以使 Web 应用程序更加流畅和快速响应用户操作。Web Workers 是运行在主线程之外的 JavaScript 线程,可以执行计算密集型操作、长时间运行的代码或其他繁重的任务。

qq_34185872的博客 769

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

Web Worker 性能革命:让浏览器多线程为您的应用加速

WebWorker是HTML5的多线程技术,允许在后台运行计算密集型任务而不阻塞UI主线程。它分为专用Worker、共享Worker和服务Worker三种类型,通过postMessage()实现线程通信。主要应用场景包括图像处理、大数据分析和实时计算。最佳实践包括Worker复用、Transferable对象传输和错误处理。虽然无法直接操作DOM,但能显著提升应用性能。开发者需注意兼容性和内存管理,合理使用可优化Web应用体验。

前端开发-前端技术分享 460

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

浏览器JavaScript的多线程与web worker

对于js来说,自己还是一个单线程,计时任务分配出去了,但事实回调还是在,例如setTimeout依然只是一个事件调用,在一些大量计算的时候还是会导致死锁。为了解释上面的问题,我们来深入解析一下浏览器。就像上文中我的描述,setTimeout,setInterval并不是多线程,只是一个定时的事件触发器,它们在合适的时间(时间结束后)把定时器的回调事件塞到JS引擎的队列中。

墨羽晨的博客 1922

js worker使用总结

文章目录概述一、使用步骤创建worker消息通信销毁worker简单示例二、数据共享三、外部引用四、自动创建五、其他worker使用electron中使用workernodejs中使用worker六、共享worker(SharedWorker)简单使用使用用途七、API主进程子进程 概述 Worker 接口是 Web Workers API 的一部分。执行URL指定的脚本,可以使用 Blob、URL 作为参数。 worker的特点: 并行 高效 一、使用步骤 创建worker 创建一个基础的work

qokie的博客 2万+

js中【postMessage】八大点解读+完整示例

是一个强大而灵活的 API,能够实现不同窗口、iframe、Web Worker 以及其他上下文之间的安全通信。虽然它简化了跨域通信的实现,但也带来了潜在的安全风险。使用时,必须注意确保消息的发送和接收过程都是可信的,尤其是要谨慎指定和验证消息来源的origin属性。

2301_79858914的博客 7850

web messaging与Woker分类:漫谈postMessage跨线程跨页面通信

web messaging 跨文档通信(cross-document messaging):跨就是我们国内更为熟知的HTML5 window.postMessage()应用的那种通信; 通道通信(channel messaging):伴随着server-sent事件以及web sockets, 跨文档通信和通道通信成为HTML5 通信接口“套件”中有用的一部分。 window.postMessage window.postMessage() 方法可以安全地实现跨源通信。 ifram.

周陆军的博客,分享it技术。 751

Web前端之JavaScript的Worker子线程、addEventListener、importScripts、postMessage、onmessage、onclick、self

Web前端之JavaScript的Worker子线程、addEventListener、importScripts、postMessage、onmessage、onclick、self

优快云博客主页地址:https://mengjian.blog.youkuaiyun.com/ 3094

worker多线程的使用与理解

JavaScript是单线程的,并不是说它是单线程语言,只能说在浏览器中运行是单线程的,单线程会免去许多麻烦,比如说,有两个线程同时进行DOM操作,一个是在父级下添加子元素,一个是删除这个父级元素,这样会冲突的。但是呢?浏览器是多线程的,浏览器打开多个标签页依旧运行良好,为了充分利用,就有了 Web Worker 它为 JavaScript 创造多线程环境,允许主线程创建子线程,将一些任务分配给子线程运行。在主线程运行的同时,子线程在后台运行,两者互不干扰。等到子线程完成计算任务,再把结果返回给主线程...

天命爱心职责的博客 1947

给 JavaScript 插上多线程的翅膀 —— Web Worker 的 Promise 化实践

众所周知,JavaScript 这门语言的一大特点就是单线程,即同一时间只能同步处理一件事情,这也是这门语言衍生出的 nodeJS 被各后端大佬诟病的很重要的一点。然而,JavaScript 在设计之初,其实是故意被设计成单线程语言的,这是由于它当时的主要用途决定的。

小漠007的专栏 1056

【JavaScript 漫游】【044】Web Worker

本篇文章为【JavaScript 漫游】专栏的第 044 篇文章,对浏览器模型的 Web Worker 相关知识点进行了总结。

CYW2019_HUST的博客 908

web worker 的传值方式以及耗时对比

背景 前一阵子开发的项目 pptx 导入, 由于自己的代码问题,引起了个性能问题,一个 40p 的 pptx 文件,转换成 json 数据,大概要耗时 60s+ ,虽然后面发现是某个使用频率非常高的函数内部,用了 new Function 构造函数 造成的(所以这里顺便提醒一下,如果你很在乎几毫秒的差距的话,建议谨慎使用哈),但是在优化的...

weixin_33907511的博客 456

【JS】postMessage与MessageChannel

【JS】postMessage与MessageChannel

owo_ovo的博客 1934
上一篇: fpga系列 HDL:Quartus II JTAG 间接配置文件 Indirect Configuration File (.jic)& AS模式烧录
下一篇: webassembly009 transformers.js 网页端侧推理 NLLB翻译模型
FakeOccupational
博客等级 码龄6年 2万+粉丝 1727原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值