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

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

news 2026/2/9 13:37:28

通过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

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2026/1/15 4:39:38

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/11/30 16:55:32

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/12/12 4:55:21

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/2/9 6:43:47

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2026/1/20 17:16:46