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.rhkb.cn/news/467789.html

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

相关文章

《手写Spring渐进式源码实践》实践笔记(第十八章 JDBC功能整合)

文章目录 第十八章 JDBC功能整合背景技术背景JDBC JdbcTemplate关键特性 用法示例业务背景 目标设计实现代码结构类图实现步骤 测试事先准备属性配置文件测试用例测试结果&#xff1a; 总结 第十八章 JDBC功能整合 背景 技术背景 JDBC JDBC&#xff08;Java Database Conne…

【Python】轻松实现机器翻译:Transformers库使用教程

轻松实现机器翻译&#xff1a;Transformers库使用教程 近年来&#xff0c;机器翻译技术飞速发展&#xff0c;从传统的基于规则的翻译到统计机器翻译&#xff0c;再到如今流行的神经网络翻译模型&#xff0c;尤其是基于Transformer架构的模型&#xff0c;翻译效果已经有了质的飞…

Linux awk命令详解-参数-选项-内置变量-内置函数-脚本(多图、多示例)

文章目录 awk基础结构说明与示例参数与内置变量常用参数内置变量其他参数内置变量 简单示例理解option简单参数NR与FNR-v ARGC ARGV参数 执行脚本if elsefor循环关联数组指定匹配pattern 使用正则指定分隔符理解pattern正则与逻辑算术 printfif else for whileBEGIN ENDnext(跳…

RHCE的学习(12)

第九章 Ubuntu 什么是Ubuntu 概述 Ubuntu&#xff08;乌班图&#xff09;属于Debian系列&#xff0c;Debian是社区类Linux的典范&#xff0c;是迄今为止最遵循GNU规范的Linux系统。 Debian最早由Ian Murdock于1993年创建&#xff0c;分为三个版本分支&#xff08;branch&…

可视化建模与UML《顺序图实验报告》

旷野的规则是永不回头。 一、实验目的&#xff1a; 1、熟悉顺序图的构件事物。 2、熟悉发送者与接受者的关系 3、熟练掌握描绘顺序图 4、加深对顺序图的理解和应用能力 二、实验环境&#xff1a; window7 | 10 | 11 EA15 三、实验内容&#xff1a; 据如下描述绘制顺序图&…

30-手动准备地图包

map包遵循特定的文件夹结构&#xff0c;并且必须包含描述该结构的.json文件。我们的自动地图导入过程自动创建这个.json文件&#xff0c;但您也可以选择自己准备它。包括您自己的.json文件将覆盖传递给make import命令的任何参数。 标准地图 为标准地图创建文件夹结构 1.…

汽车免拆诊断案例 | 2017款凯迪拉克XT5车组合仪表上的指针均失灵

故障现象 一辆2017款凯迪拉克XT5车&#xff0c;搭载LTG 发动机&#xff0c;累计行驶里程约为17.2万km。车主反映&#xff0c;组合仪表上的发动机转速表、车速表、燃油表及发动机冷却液温度表的指针均不指示&#xff0c;但发动机起动及运转正常&#xff0c;且车辆行驶正常。 故…

docker镜像文件导出导入

1. 导出容器&#xff08;包含内部服务&#xff09;为镜像文件&#xff08;docker commit方法&#xff09; 原理&#xff1a;docker commit命令允许你将一个容器的当前状态保存为一个新的镜像。这个新镜像将包含容器内所有的文件系统更改&#xff0c;包括安装的软件、配置文件等…

数据结构:顺序表(动态顺序表)

专栏说明&#xff1a;本专栏用于数据结构复习&#xff0c;文章中出现的代码由C语言实现&#xff0c;在专栏中会涉及到部分OJ题目&#xff0c;如对你学习有所帮助&#xff0c;可以点赞鼓励一下博主喔&#x1f493; 博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;数…

Golang--网络编程

1、概念 网络编程&#xff1a;把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络系统&#xff0c;从而使众多的计算机可以方便地互相传递信息、共享数据、软件、数据信息等资源。 客户端&#xff08;Client&#xff09; 客户端是请求服务…

软件设计师中级 第9章 数据库技术基础

9.1 基本概念 9.1.1 数据库的三级模式结构 数据库系统有三级模式结构&#xff0c;一个数据库可以由多个外模式&#xff0c;只能有一个内模式。 视图对应外模式、基本表对应模式&#xff08;概念模式&#xff09;、存储文件对应内模式。 外模式 也称子模式&#xff08;Subsch…

Rust项目结构

文章目录 一、module模块1.二进制文件的cargo项目2.库的cargo项目模块中使用crate关键字模块中使用super模块中结构体的访问规则模块中枚举的访问规则模块中use关键字不同模块定义了相同类型冲突解决办法使用pub use导出本模块的函数给外面模块引入外部依赖模块与子模块 小结3.…

Java-字符串常量池

在Java程序中&#xff0c;类似于&#xff1a;1&#xff0c; 2&#xff0c; 3&#xff0c;3.14&#xff0c;“hello”等字面类型的常量经常频繁使用&#xff0c;为了使程序的运行速度更快、 更节省内存&#xff0c;Java为8种基本数据类型和String类都提供了常量池。 1.为什么要…

【Python爬虫实战】深入解锁 DrissionPage:ChromiumPage 自动化网页操作指南

&#x1f308;个人主页&#xff1a;易辰君-CSDN博客 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、ChromiumPage基础操作 &#xff08;一&#xff09;初始化Drission 和 ChromiumPage 对象 &#xff0…

无人机之姿态融合算法篇

无人机的姿态融合算法是无人机飞行控制中的核心技术之一&#xff0c;它通过将来自不同传感器的数据进行融合&#xff0c;以实现更加精确、可靠的姿态检测。 一、传感器选择与数据预处理 无人机姿态融合算法通常依赖于多种传感器&#xff0c;包括加速度计、陀螺仪、磁力计等。这…

基于SSM的图书馆座位预约系统+lw示例参考

#1.项目介绍 系统角色&#xff1a;管理员、普通用户功能模块&#xff1a;管理员&#xff08;用户管理、座位管理、座位分类管理、图书馆管理、预约信息管理、退座管理、系统管理等&#xff09;、普通用户&#xff08;信息查看、图书馆管理、个人中心、座位预约等&#xff09;技…

企业IT架构转型之道:阿里巴巴中台战略思想与架构实战感想

文章目录 第一章&#xff1a;数据库水平扩展第二章&#xff1a;中台战略第三章&#xff1a;阿里分布式服务架构HSF&#xff08;high speed Framework&#xff09;、早期Dubbo第四章&#xff1a;共享服务中心建设原则第五章&#xff1a;数据拆分实现数据库能力线性扩展第六章&am…

鸿蒙的进击之路

1. 题记&#xff1a; 为什么要写鸿蒙&#xff0c;因为她是华为的&#xff0c;为什么是华为就要写&#xff0c;因为华为背负了国人太多太多的包袱&#xff0c;或点赞或抨击。 我是强烈支持华为的&#xff0c;但我会客观公正地去评价华为的产品&#xff0c;就比如这篇博文&#…

【CTFN】基于耦合翻译融合网络的多模态情感分析的层次学习

同样用了翻译模块的论文->MTMSA 代码地址->github地址 abstract 多模态情感分析是一个具有挑战性的研究领域&#xff0c;涉及多个异构模态的融合。主要的挑战是在多模式融合过程中出现一些缺失的模式。然而&#xff0c;现有的技术需要所有的模态作为输入&#xff0c;因…

Go的环境搭建以及GoLand安装教程

目录 一、开发环境Golang安装 二、配置环境变量 三、GoLand安装 四、Go 语言的 Hello World 一、开发环境Golang安装 官方网址&#xff1a; The Go Programming Language 1. 首先进入官网&#xff0c;点击Download&#xff0c;选择版本并进行下载&#xff1a; ​ ​ 2. …