当前位置： 首页 > news >正文

通过async方式在浏览器中调用web worker

news 文章来源：https://blog.csdn.net/qq_42880714/article/details/133555649 2025/1/11 23:36:31

通过async方式在浏览器中调用web worker

近年来，网络应用程序变得越来越复杂，增加了越来越多的功能。因此，性能和响应性已成为 Web 开发人员关注的重点。解决这个问题的一个办法是使用web worker。

web worker简介

web worker是一个 javascript api，这使得开发人员可以在浏览器后台中运行脚本而不会阻塞用户界面。

这也意味着一些类似执行复杂的计算等耗时长的任务能在后台中运行，而不会影响web的性能。

web worker通过创建一个单独的执行线程来工作，该线程在后台运行脚本。这个线程与主线程完全分离，主线程负责绘制网页和响应用户输入。这意味着后台脚本可以独立于主线程运行,而不会阻塞它。

使用web worker的好处

在Web应用程序中使用 web worker 可以有以下好处：

  • 改进性能
    通过在后台运行长期运行的任务，web worker 可以提高Web应用程序的性能。这是因为主线程不会被长时间运行的任务阻塞，这使它能够继续呈现网页并响应用户输入。
  • 提高反应能力
    web worker 还可以提高Web应用程序的响应能力。通过在后台运行任务，用户界面保持响应性，即使应用程序正在执行长时间运行的任务。
  • 更好的用户体验
    通过改进性能和响应能力，web worker 可以为Web应用程序提供更好的用户体验。用户更有可能继续使用快速和响应的应用程序，而不是缓慢和不响应的应用程序。

实现一个异步调用方式

让我们以下面例子来介绍：

创建一个web worker

要创建一个web worker， 我们需要创建一个新的 javascript 文件，该文件将包含我们希望在后台运行的代码。

在这个例子中，我们将创建一个 worker.js 文件。 .


self.onmessage = function(event) {// 从事件中检索数据const requestData = event.data;//执行异步API调用performAPICall(requestData).then(responseData => {// 将响应数据送回主线程self.postMessage(responseData);}).catch(error => {// 处理在API调用期间发生的任何错误console.error('Error:', error);});
};

在这个文件中,我们定义一个叫做onmessage的方法，当web worker从主线程收到消息时将调用。

创建API调用

接下来，我们需要创建将进行API调用的代码。

在这个例子中，我们将使用performAPICall() 方法去调用fetch方法调用api。

function performAPICall() {// 创建一个封装异步API调用的promisereturn new Promise((resolve, reject) => {// 使用fetch或任何其他合适的方法执行API调用fetch('http://example.com', {method: 'GET',headers: {'Content-Type': 'application/json',},}).then(response => {if (response.ok) {resolve(response.json());} else {reject('API call failed with status: ' + response.status);}}).catch(error => {reject(error);});});
}

创建主线程

现在我们已经创建了 web worker 和 API 调用，我们需要创建将与 web worker 进行通信的主线程。

在这个例子中，让我们创建一个 app.js 文件。

// 创建一个worker
const worker = new Worker('worker.js');// 发送数据
worker.postMessage('API Call');// 监听webworker传递过来的数据
worker.onmessage = function (event) {// 从事件中检索响应数据const responseData = event.data;// 处理答复数据processResponse(responseData);console.log("Response Arrived", responseData);
};function processResponse(responseData) {// 处理和处理来自API调用的响应数据let ulElem = document.getElementById("listing");ulElem.innerHTML = '';for (let i = 0; i < 10; i++) {let elem = `<li>${responseData[i].title}</li>`ulElem.innerHTML += elem;}
}

我们使用 postMessage() 向 web worker 发送消息，而后web worker将启动API调用功能。

在上面的代码中，我们创建了一个Worker 的新实例并定义了一个叫做onmessage的方法，用于将消息发送回主线程。

processResponse(responseData) 是一个处理响应数据并帮助以列表格式显示的函数。

运行代码

要运行代码,我们需要创建一个HTML文件，其中需要引入 app.js 文件。

<!DOCTYPE html>
<html><head><title>Web Worker Example</title>
</head><body><script src="app.js"></script>
</body></html>

当我们在浏览器中打开这个HTML文件时，web worker 将开始在后台进行·API·调用。一旦·API·调用完成，web worker 将响应发送回主线程，在那里我们可以根据需要处理数据。

常见需求

web worker可用于各种应用程序，包括：

  • 游戏
    web worker可以在基于网络的游戏中进行复杂的计算，例如物理模拟或人工智能算法。通过在后台运行这些计算，游戏可以保持响应性，即使在执行复杂任务时也是如此。
  • 视频和音频处理
    web worker可以用于处理视频或音频数据的应用程序，如视频编辑软件或音频处理工具。通过在后台运行这些任务,即使在处理大量数据时，应用程序也可以保持响应性。
  • 数据可视化
    web worker可以用于执行数据可视化的应用程序，如图表或图表。通过在后台运行这些任务，即使在处理大量数据时，应用程序也可以保持响应性。

相关文章：

通过async方式在浏览器中调用web worker

通过async方式在浏览器中调用web worker 近年来&#xff0c;网络应用程序变得越来越复杂&#xff0c;增加了越来越多的功能。因此&#xff0c;性能和响应性已成为 Web 开发人员关注的重点。解决这个问题的一个办法是使用web worker。 web worker简介 web worker是一个 javas…...

编程日记 2023/10/4 19:39:56

FPGA project : TFT_LCD

实验目标&#xff1a; 驱动TFT_LCD显示十色彩条。 重点掌握的知识&#xff1a; 1&#xff0c;液晶显示器&#xff0c;简称LCD(Liquid Crystal Display)&#xff0c;相对于上一代CRT显示器(阴极射线管显示器)&#xff0c;LCD显示器具有功耗低、体积小、承载的信息量大及不伤眼…...

编程日记 2023/10/4 19:37:53

2023年-华为机试题库B卷(Python)【满分】

华为机试题库B卷 已于5月10号 更新为2023 B卷 &#xff08;2023-10-04 更新本文&#xff09; 华为机试有三道题目&#xff0c;前两道属于简单或中等题&#xff0c;分值为100分&#xff0c;第三道为中等或困难题&#xff0c;分值为200分。总分为 400 分&#xff0c;150分钟考试…...

编程日记 2023/10/4 19:36:50

创建GCP service账号并管理权限

列出当前GCP项目的所有service account 我们可以用gcloud 命令 gcloud iam service-accounts list gcloud iam service-accounts list DISPLAY NAME EMAIL DISABLED terraform …...

编程日记 2023/10/4 19:32:46

想要精通算法和SQL的成长之路 - 验证二叉树

想要精通算法和SQL的成长之路 - 验证二叉树 前言一. 验证二叉树1.1 并查集1.2 入度以及边数检查 前言 想要精通算法和SQL的成长之路 - 系列导航 并查集的运用 一. 验证二叉树 原题链接 思路如下&#xff1a; 对于一颗二叉树&#xff0c;我们需要做哪些校验&#xff1f; 首先…...

编程日记 2023/10/4 19:30:43

ERROR 6400 --- [ main] com.zaxxer.hikari.pool.HikariPool : root - Exception

在引用的日志中&#xff0c;报告了Hikari连接池初始化期间的异常。具体异常信息是"Exception during pool initialization"。这个异常可能是由于与MySQL数据库的通信链接失败导致的。在引用中也提到了与SSL连接相关的错误。 根据引用中提供的代码&#xff0c;可以看到…...

编程日记 2023/10/4 19:29:42

CART算法解密：从原理到Python实现

目录 一、简介CART算法的背景例子&#xff1a;医疗诊断 应用场景例子&#xff1a;金融风控 定义与组成例子&#xff1a;电子邮件分类 二、决策树基础什么是决策树例子&#xff1a;天气预测 如何构建简单的决策树例子&#xff1a;动物分类 决策树算法的类型例子&#xff1a;垃圾…...

编程日记 2023/10/4 19:24:38

C++项目：【高并发内存池】

文章目录 一、项目介绍 二、什么是内存池 1.池化技术 2.内存池 3.内存池主要解决的问题 4.malloc 三、定长的内存池 四、高并发内存池整体框架设计 1.高并发内存池--thread cache 1.1申请内存&#xff1a; 1.2释放内存&#xff1a; 1.3用TLS实现thread cache无锁访…...

编程日记 2023/10/4 19:21:34

[论文笔记]BitFit

引言 今天带来一篇参数高效微调的论文笔记，论文题目为 基于Transformer掩码语言模型简单高效的参数微调。 BitFit，一种稀疏的微调方法，仅修改模型的偏置项(或它们的子集)。对于小到中等规模数据，应用BitFit去微调预训练的BERT模型能达到(有时超过)微调整个模型。对于大规…...

编程日记 2023/10/4 19:20:32

浅谈yolov5中的anchor

默认锚框 YOLOv5的锚框设定是针对COCO数据集中大部分物体来拟定的&#xff0c;其中图像尺寸都是640640的情况。 anchors参数共3行&#xff1a; 第一行是在最大的特征图上的锚框 第二行是在中间的特征图上的锚框 第三行是在最小的特征图上的锚框 在目标检测中&#xff0c;一…...

编程日记 2023/10/4 19:19:31

RabbitMQ-工作队列

接上文 RabbitMQ-死信队列 1 工作队列模式 xx模式只是一种设计思路&#xff0c;并不是指具体的某种实现&#xff0c;可理解为实现XX模式需要怎么去写业务代码。 之前的是简单的一个消费者一个生产者模式&#xff0c;下边是一个生产者多个消费者的情况&#xff1a; 这里先定义两…...

编程日记 2023/10/4 19:18:30

网站安全防护措施

网络安全的重要性在网站和app的发展下已经被带到了全新的高度&#xff0c;已然成为各大运维人员工作里不可或缺的环节&#xff0c;重视网络安全能给我们的网站带来更好的口碑&#xff0c;也能为企业生产创造更稳定的环境。下面我们一起来看看有哪些是我们运维人员能够做的。 1、…...

编程日记 2023/10/4 19:17:29

C++的继承基础和虚继承原理

1.继承概念 “继承”是面向对象语言的三大特性之一&#xff08;封装、继承、多态&#xff09;。 继承&#xff08;inheritance&#xff09;机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性基础上进行扩展&#xff0c;增加功能&…...

编程日记 2023/10/4 19:16:28

第三章：最新版零基础学习 PYTHON 教程（第十三节 - Python 运算符—Python 中的运算符函数 - 套装2）

Python 中的运算符函数 - 套装1 本文将讨论更多功能。 1. setitem(ob, pos, val)：- 该函数用于在容器中的 特定位置分配值。操作 – ob[pos] = val 2. delitem(ob, pos)：- 该函数用于删除容器中 特定位置的值。 操作 – del ob[pos] 3. getitem(ob, pos)&#x...

编程日记 2023/10/4 19:15:27

Linux网络编程：详解https协议

目录 一. https协议概述 二. 中间人截获 三. 常见的加密方法 3.1 对称加密 3.2 非对称加密 四. 数据摘要和数据签名的概念 五. https不同加密方式的安全性的探究 5.1 使用对称加密 5.2 使用非对称加密 5.3 非对称加密和对称加密配合使用 六. CA认证 七. 总结 一.…...

编程日记 2023/10/4 19:12:23

LLVM IR 文档 专门解释 LLVM IR

https://llvm.org/docs/LangRef.html#phi-instruction...

编程日记 2023/10/4 19:11:22

免费服务器搭建网盘教程，给电脑挂载500G磁盘

免费服务器搭建网盘教程&#xff0c;给电脑挂载500G磁盘 请勿注册下载&#xff0c;注册下载是空白文件&#xff0c;使用免登录下载 免费搭建网盘教程&#xff0c;给电脑挂载500G磁盘 其他按照下载教程操作教程代码: 下载下来的文件pancn 文件拖到您创建的容器 手机的话点击…...

编程日记 2023/10/4 19:10:21

【Java】微服务——Nacos配置管理（统一配置管理热更新配置共享Nacos集群搭建）

目录 1.统一配置管理1.1.在nacos中添加配置文件1.2.从微服务拉取配置1.3总结 2.配置热更新2.1.方式一2.2.方式二2.3总结 3.配置共享1&#xff09;添加一个环境共享配置2&#xff09;在user-service中读取共享配置3&#xff09;运行两个UserApplication&#xff0c;使用不同的pr…...

编程日记 2023/10/4 19:09:20

QT基础入门——信号和槽机制（二）

前言&#xff1a; 在Qt中&#xff0c;有一种回调技术的替代方法&#xff1a;那就是信号和槽机制。当特定事件发生时&#xff0c;会发出一个信号。Qt的小部件中有许多预定义的信号&#xff0c;但我们可以将小部件子类化&#xff0c;向它们添加自定义的信号。槽是响应特定信号的…...

编程日记 2023/10/4 19:08:18

黑豹程序员-架构师学习路线图-百科：JavaScript-网页三剑客

文章目录 1、为什么需要JavaScript2、发展历史3、什么是JavaScript3.1、JavaScript介绍3.2、JavaScript内部结构3.3、主要功能 4、TypeScript 1、为什么需要JavaScript 前面我们已经了解了网页三剑客的HTML和CSS&#xff0c;已经明确了它们的职责。 HTML负责页面的展现&#x…...

编程日记 2023/10/4 19:06:15

三、互联网技术——IP子网划分

文章目录 一、IP地址基础1.1 IP地址分类1.2 网络掩码/子网掩码 二、子网划分VLSM2.1 为什么要进行子网划分2.2 怎么进行子网划分2.3 子网划分原理2.4 例题一2.5 例题二2.6 例题三2.6 例题四2.7 例题五2.8 例题六2.9 例题七2.10 例题八 三、无类域间路由CIDR3.1 例题一3.2 例题二…...

编程日记 2023/10/4 19:05:13

TinyWebServer学习笔记-log

为什么服务器要有一个日志系统&#xff1f; 故障排查和调试&#xff1a; 在服务器运行期间&#xff0c;可能会发生各种问题和故障&#xff0c;例如程序崩溃、性能下降、异常请求等。日志记录了服务器的运行状态、错误信息和各种操作&#xff0c;这些日志可以用来快速定位和排查…...

编程日记 2023/10/4 19:04:11

【kubernetes】CRI OCI

1 OCI OCI(Open Container Initiative)&#xff1a;由Linux基金会主导&#xff0c;主要包含容器镜像规范和容器运行时规范&#xff1a; Image Specification(image-spec)Runtime Specification(runtime-spec)runC image-spec定义了镜像的格式&#xff0c;镜像的格式有以下几…...

编程日记 2023/10/4 18:56:00

竞赛 机器视觉opencv答题卡识别系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 答题卡识别系统 - opencv python 图像识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分…...

编程日记 2023/10/4 18:54:58

Youtube视频下载工具分享-油管视频，音乐，字幕下载方法汇总

YouTube视频下载方法简介 互联网上存在很多 YouTube 下载工具&#xff0c;但我们经常会发现自己收藏的工具没过多久就会失效&#xff0c;我们为大家整理的这几种方法&#xff0c;是存在时间较久并且亲测可用的。后续如果这些工具失效或者有更好的工具&#xff0c;我们也会分享…...

编程日记 2023/10/4 18:53:57

【算法练习Day11】滑动窗口最大值前 K 个高频元素

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 滑动窗口最大值前 K 个高频…...

编程日记 2023/10/4 18:51:54

华为云HECS云服务器docker环境下安装nginx

前提&#xff1a;有一台华为云服务器。 华为云HECS云服务器&#xff0c;安装docker环境&#xff0c;查看如下文章。 华为云HECS安装docker-CSDN博客 一、拉取镜像 下载最新版Nginx镜像 (其实此命令就等同于 : docker pull nginx:latest ) docker pull nginx查看镜像 dock…...

编程日记 2023/10/4 18:48:51

GET 和 POST的区别

GET 和 POST 是 HTTP 请求的两种基本方法&#xff0c;要说它们的区别&#xff0c;接触过 WEB 开发的人都能说出一二。 最直观的区别就是 GET 把参数包含在 URL 中&#xff0c;POST 通过 request body 传递参数。 你可能自己写过无数个 GET 和 POST 请求&#xff0c;或者已经看…...

编程日记 2023/10/4 18:46:46

机器学习（监督学习）笔记

目录 总览笔记内容线性回归梯度下降特征缩放多输出线性回归 逻辑回归二分类与逻辑回归分类任务的性能指标&#xff08;召回率&#xff0c;精度&#xff0c;F1分数等&#xff09;支持向量机SVMK近邻朴素贝叶斯分类器朴素贝叶斯分类器进阶多分类逻辑回归二分类神经网络多分类神经…...

编程日记 2023/10/4 18:45:45

科普rabbitmq，rocketmq，kafka三者的架构比较

对比 架构对比 从架构可以看出三者有些类似&#xff0c;但是在细节上有很多不同。下面我们就从它们的各个组件&#xff0c;介绍它们&#xff1a; RabbitMQ&#xff0c;是一种开源的消息队列中间件。下面是RabbitMQ中与其相关的几个概念&#xff1a; 1.生产者&#xff08;P…...

编程日记 2023/10/4 18:41:39

宁波网站设计推荐荣盛网络/seo属于什么

传送门 这题是多重背包的二进制分解01背包处理。 给个图&#xff1a; 我就不多说了&#xff0c;自己看吧。 代码&#xff1a; #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #include<cstdlib> #include<c…...

编程日记 2025/1/11 23:08:44

网站服务器租金/seo排名优化怎样

关于赫夫曼编码和赫夫曼树的相关知识可參考之前两篇文章&#xff08;由二叉树构造赫夫曼树、赫夫曼编码&#xff09;。本文介绍还有一种构建赫夫曼树的方式&#xff0c;採用优先队列.步骤&#xff1a; 1.首先我们须要统计不同字符出现的次数。一个字符出现的次数越多&#xff0…...

编程日记 2025/1/11 22:34:13

江苏州 网站制作/网站维护一般怎么做

一图胜千言&#xff0c;使用Python的matplotlib库&#xff0c;可以快速创建高质量的图形。 用matplotlib生成基本图形非常简单&#xff0c;只需要几行代码&#xff0c;但要创建复杂的图表&#xff0c;需要调用更多的命令和反复试验&#xff0c;这要求用户对matplotlib有深入的认…...

编程日记 2025/1/11 22:29:11

的网站建设/在线的crm系统软件

文章目录0、打包配置&#xff08;Artifacts&#xff09;1、tomcat 的使用2、配置注释模板3、配置快捷键模板0、打包配置&#xff08;Artifacts&#xff09; Project -> Structure -> Artifacts 1、tomcat 的使用 1.在下拉列表中&#xff0c;点击Edit Configuration […...

编程日记 2025/1/11 16:07:08

旅游网站系统建设方案/线上营销课程

其实很早就知道 Request.QueryString["参数"]来得到URL中传递的参数&#xff0c;或者说是得到Get请求方式得到的数据&#xff1b;而Request.Form得到Form表单的提交的数据(这种理解是错误的)&#xff0c;今天在使用Jquery的Ajax&#xff0c;当使用Post方式时候&#…...

编程日记 2025/1/11 15:07:31

郴州seo排名/自助建站seo

linux服务器关机、重启、注销命令linux服务器关机、重启、注销命令管理员root用户下执行命令。1关机命令 shutdown好像ubuntu的终端中默认的是当前用户的命令&#xff0c;只是普通用户&#xff0c;因此在终端器中可以使用sudo -sh 转换到管理员root用户下执行命令。1)shutdown …...

编程日记 2025/1/11 13:31:13