webWorker基本用法

我们都知道js是一个单线程的语言,当线程堵塞时,可能会导致页面无法正常交互,如一些复杂的可视化处理。即使是异步处理,也只是将其暂存到任务队列中去,等主线程执行完后依然会从任务队列中取过去。

为此,js提供了一种多线程效果的处理方式--webWorker,下面来用一段实力来展示:

基本示例(这里在一个vue项目中展示)

1.先创建一个webWorker对应的js文件

注:由于webworker构造函数接收的路径需要是线上的地址,因此在开发过程中可以放到public文件夹中(如example.js)这样,通过 项目启动地址+文件名即可访问该文件。

这样通过http://127.0.0.1:5173/example.js 即可访问该文件,并看到该文件内容:

2.在想要使用webWorker的方法中,创建一个webWorker对象(参数为上面的地址,本示例中的http://127.0.0.1:5173/example.js);不用本地地址的原因后续会说。

<button @click="startWebWorker">点我触发webWorker</button>
startWebWorker() {// 创建一个webWorker对象let myWorker = new Worker("http://127.0.0.1:5173/example.js")
},

这样,当点击此按钮时,会调用example.js中的脚本内容输出“hello world”。

3.postMessage方法:

通过postMessage可以向webWorker中传递参数(不可为函数):

startWebWorker() {// 创建一个webWorker对象let myWorker = new Worker("http://127.0.0.1:5173/example.js")myWorker.postMessage("hello webWorker");
},

4.接收传过来的数据:

这里可以通过监听message事件来获取到数据。(webWorker对应文件中使用self进行postMessage等相关操作)

example.js中:

// console.log("hello world")
self.addEventListener("message", (res) => {console.log(res.data); // 输出 hello webWorker
})

(ps,也可以使用self.onmessage来获取)

5.反向传递信息

其原理与上面的类似,同样使用postMessage,与监听message来实现:

示例vue文件中的方法:

startWebWorker() {// 创建一个webWorker对象let myWorker = new Worker("http://127.0.0.1:5173/example.js")myWorker.postMessage("发送的信息:hello webWorker");myWorker.addEventListener("message", (res) => {console.log("返回的信息:" + res.data)})
},

example.js中:

// console.log("hello world")
self.addEventListener("message", (res) => {console.log(res.data); // 输出 hello webWorkerself.postMessage("nice to meet you too!");
})

结果:

6.补充:

比如说 public/example.js 中想要使用 public/test.js 中的方法:

 public/test.js:

function testFun() {console.log('我是testFun')
}

 public/example.js:(这里直接这样引用会报错)

import "./test.js"
testFun();

需改为以下引发:

// import "./test.js"
importScripts("http://127.0.0.1:5173/test.js")
testFun()

当然有一种例外,就是test.js中使用的es6的module:

 public/test.js:

export function testFun() {console.log('我是testFun')
}

报错:Uncaught SyntaxError: Cannot use import statement outside a module

此时就不能用importScripts了,需要在创建webWorker对象时声明type为module

示例vue文件中的 创建一个webWorker对象 部分:

// 创建一个webWorker对象
let myWorker = new Worker("http://127.0.0.1:5173/example.js", {type: "module"
})

 public/example.js:

import { testFun } from "./test.js"
// importScripts("http://127.0.0.1:5173/test.js")
testFun()

这样就生效了。

webWorker注意事项

1.webWorker文件中的方法不可操作节点。

2.postMessage方法不可传递function方法。

3.new Worker参数不可为本地文件,可使用线上地址(如发布出去)。

4.在webWorker文件中若想使用第三方库的方法(如导出excel),可以通过cdn引入,或者将node_modules关键文件以同样方式(放入public或发布)引入。

单线程堵塞处理实例

1.堵塞简单示例,最简单的,遍历百亿次(电脑好可以更多,根据务必电脑情况斟酌):

<button @click="startWebWorker">遍历一亿次</button>
信息:<input />
startWebWorker() {let total = 0for(let i = 0; i< 10000000000; i++) {total++;}console.log("结果是:" + total);
},

在结果输出前,你会发现输入框处于无法交互状态,整个页面都被堵塞所影响了,这个是异步也很难解决的问题。

因此,这里可以借助webWorker来实现:

startWebWorker() {// 创建一个webWorker对象let myWorker = new Worker("http://127.0.0.1:5173/example.js");myWorker.postMessage("开始遍历");myWorker.onmessage = (res) => {console.log("结果是:" + res.data);}
},

 public/example.js:

self.addEventListener("message", (res) => {if(res.data == "开始遍历") {let total = 0for(let i = 0; i< 10000000000; i++) {total++;}self.postMessage(total)}
})

这样,堵塞就因 webWorker多线程 的缘故而不会影响页面(如:输入框)的正常交互了。

希望本文会对您有所帮助 ^_^ ~

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

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

相关文章

【1】虚拟机安装

1.安装VMware WorkStation Pro VMware下载地址&#xff1a; 2.新建虚拟机 centos7下载地址&#xff1a;centos-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿里云

2-149 基于matlab的LDPC译码性能分析

基于matlab的LDPC译码性能分析&#xff0c;LDPC&#xff08;Low-Density Parity-Check&#xff09;码作为编码技术&#xff0c;具有优秀的纠错性能和较低的编解码复杂度。为保证可靠的数据传输&#xff0c;对传输过程中可能出现的信道噪声、干扰等进行模拟和分析。分析对比了误…

游戏开发--C#面试题

游戏开发--C#面试题 C#1. 值类型和引用类型的区别2. 重载和重写的区别3. ArrayList和List的区别4. List底层是什么实现的&#xff1f;5. 抽象类和接口的区别6. 静态成员和⾮静态成员的区别7. 装箱和拆箱是指什么&#xff1f;8. 值和引用类型在变量赋值时的区别是什么&#xff1…

Systemd:tmpfiles

Systemd提供了一个结构化的可配置方法来管理临时文件和目录,即systemd-tmpfiles,可以创建、删除和管理临时文件的服务。 $ systemctl list-units --all | grep systemd-tmpfilessystemd-tmpfiles-clean.service load…

TDengine 集群能力:超越 InfluxDB 的水平扩展与开源优势

随着物联网、车联网等领域的快速发展&#xff0c;企业所面临的数据采集量呈爆炸式增长&#xff0c;这对 IT 基础设施和数据库提出了严峻挑战。传统单机版数据库逐渐无法应对高并发的数据写入和复杂的查询需求。因此&#xff0c;底层数据库必须具备水平扩展能力&#xff0c;以确…

DAY23|回溯算法Part02|LeetCode: 39. 组合总和 、40.组合总和II 、131.分割回文串

目录 LeetCode: 39. 组合总和 基本思路 C代码 LeetCode: 40.组合总和II 基本思路 C代码 LeetCode: 131.分割回文串 基本思路 C代码 LeetCode: 39. 组合总和 力扣代码链接 文字讲解&#xff1a;LeetCode: 39. 组合总和 视频讲解&#xff1a;带你学透回溯算法-组合总和…

selenium大量并发连接驱动超时

我的业务是根据数据生成一大片报表图&#xff0c;组成一个word文档&#xff0c;量大概10~100之间&#xff0c;挨个执行太慢了&#xff0c;15分钟左右&#xff0c;为了加快速度使用了多线程&#xff0c;而多线程又被机器速度限制&#xff0c;一旦跑的多了&#xff0c;就会有线程…

【linux】再谈网络基础(二)

8. 再谈端口号 &#xff08;一&#xff09;与协议之间的关系 端口号(Port)标识了一个主机上进行通信的不同的应用程序 在TCP/IP协议中, 用 "源IP", "源端口号", "目的IP", "目的端口号", "协议号" 这样一个五元组来标识…

OpenCV视觉分析之目标跟踪(12)找到局部的最大值函数meanShift()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在反向投影图像上找到一个对象。 meanShift 是一种用于图像处理和计算机视觉领域的算法&#xff0c;特别适用于目标跟踪、图像分割等任务。该算…

VS2022配置OpenGL

下载地址&#xff1a; https://download.csdn.net/download/hgaohr1021/89974202 1、下载后&#xff0c;直接把OpenGL文件&#xff0c;全部放在 D:\Program Files这里&#xff0c;OpenGL这个名字也不要改&#xff01;&#xff01;&#xff01; 2、把文件PropertySheetOpenGL.p…

nvlink 训练笔记

目录 还没测试出效果 还没测试出效果 import torch import torch.nn as nn from torch.utils.data import DataLoader from torchvision.datasets import CIFAR10 from torchvision.transforms import ToTensor# 定义上述的大型全连接层模型 class LargeFullyConnectedModel(…

美术资源规范

很多项目都没有重视资源规范&#xff0c;而是不断追求更高的运行效率。然而资源规范在项目中是非常重要的&#xff0c;资源规范才是高效运行的前提。 在有的项目中&#xff0c;一个人物模型几万个面、一个建筑模型就几十万个面&#xff0c;贴图也不规范&#xff0c;1024、2048…

革命性AI搜索引擎!ChatGPT最新功能发布,无广告更智能!

文章目录 零、前言一、ChatGPT最新AI搜索引擎功能操作指导实战1:搜索新闻实战2:搜索天气实战3:搜索体育消息 二、感受 零、前言 大人&#xff0c;时代变了。 最强 AI 助力下的无广告搜索引擎终于问世。我们期待已久的这一刻终于到来了&#xff0c;从今天起&#xff0c;ChatGPT…

在 Ubuntu 上安装 Redis 并为其设置登录密码

在 Ubuntu 上安装 Redis 并为其设置密码 在 Ubuntu 上安装 Redis 并为其设置密码1. 更新包索引2. 安装 Redis3. 配置 Redis 密码4. 配置 Redis 以使用 systemd5. 启动 Redis 服务6. 检查 Redis 状态7. 测试 Redis8. 配置防火墙&#xff08;可选&#xff09;完成 在 Ubuntu 上安…

微积分复习笔记 Calculus Volume 1 - 4.10 Antiderivatives

4.10 Antiderivatives - Calculus Volume 1 | OpenStax

echarts设置tooltip宽高

ECharts容器&#xff1a; 1&#xff0c;ECharts容器设置宽度width&#xff0c;值可以是百分比或者是像素&#xff0c;当设置为百分比时&#xff0c;要检查父元素是否设置了宽度。注意&#xff1a;容器宽度设置不要用min-width&#xff0c;不然会发现tooltip的宽度等于min-widt…

kafka生产消费问题

一、kafka生产问题 1.漏发 生产者发送时候 有可能节点突然挂掉,send返回future,get(),同步发送,还可以在pro设置重试次数来容错,可以在失败时候,存储到哪里,另一个线程补发,不影响主流程 2.broker数据同步 broker里也可能出现问题,acks设置all,保证所有副本也收到消息 二、…

O-RAN Fronthual CU/Sync/Mgmt 平面和协议栈

O-RAN Fronthual CU/Sync/Mgmt 平面和协议栈 O-RAN Fronthual CU/Sync/Mgmt 平面和协议栈O-RAN前端O-RAN 前传平面C-Plane&#xff08;控制平面&#xff09;&#xff1a;控制平面消息定义数据传输、波束形成等所需的调度、协调。U-Plane&#xff08;用户平面&#xff09;&#…

Git 入门篇(三)

前言 Git 入门篇&#xff08;一&#xff09; Git 入门篇&#xff08;二&#xff09; Git 入门篇&#xff08;三&#xff09; 目录 更新代码到远程仓库 git add git commit git push git status git log git rm git reset 更新代码到远程仓库 git add 用于将文件的更改&…

PADS操作技巧

CTRL左键单击&#xff1a;结束布线 过孔&#xff1a;信号换层、散热 F2布线&#xff0c;然后右键添加过孔。 切换过孔大小