前端性能优化:使用 Web Workers 实现轮询
// pollWorker.js
import { Base64 } from 'js-base64';
import RsaAndAes from '~/composables/RsaAndAes';
import { getRandomNumberFn } from '~/composables/baseRequest';
export function createWorker() {
const blob = new Blob(
[
`
let requestCount = 0;
// 处理收到的消息
self.onmessage = function (event) {
if (event.data.type === "start") {
// 开始轮询
const interval = event.data.interval;
startPolling(interval, event.data.url, event.data.data, event.data.headers);
}
};
// 开始轮询函数
function startPolling(interval, url, data, headers) {
function poll() {
fetch(url, {
method: "POST",
headers: new Headers(headers),
body: JSON.stringify({ ...data }),
})
.then((response) => {
return response.json();
})
.then((res) => {
// 将请求结果发送回主线程
self.postMessage({ res, requestCount: requestCount++ });
})
.catch((error) => {
console.log("Request failed:", error);
});
// 调用自身以实现持续轮询
setTimeout(poll, interval);
}
// 立即执行一次
poll();
}
`
],
{ type: 'application/javascript' }
);
const worker = new Worker(URL.createObjectURL(blob));
// 将post函数传递给WebWorker
const TOKEN = '';
const saveData = JSON.parse(JSON.stringify({} || {}));
const config = {};
const interDomainName = '';
const ENV = '';
const nodeEnv = '';
const Key = ''; //存储公钥
// 发送开始消息给WebWorker,传递轮询间隔
worker.postMessage({
type: 'start',
interval: 5000,
url: 'http://192.168.110.145:18200/gateway/xxxxxxx',
headers: {
'content-type': 'application/json; charset=utf-8',
partnerId: 'MTAy',
time: '',
accountId: '',
countries: '',
authToken: TOKEN,
requestId: ''
},
data: {
secretCode: RsaAndAes.encrypt(Key),
encryptedData: RsaAndAes.encryptAes(saveData)
}
}); // 每5秒轮询一次
return worker;
}
前端性能优化:使用 Web Workers 实现轮询的更多相关文章
- web前端性能优化指南
web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...
- Web前端性能优化进阶——完结篇
前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...
- WEB前端性能优化常见方法
1.https://segmentfault.com/a/1190000008829958 (WEB前端性能优化常见方法) 2..https://blog.csdn.net/mahoking/arti ...
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- Web前端性能优化教程09:图像和Cookie优化
本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看: 一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...
- Web前端性能优化教程06:减少DNS查找、避免重定向
本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看: 一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...
- Web前端性能优化教程08:配置ETag
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...
- Web前端性能优化教程05:网站样式和脚本
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...
- Web前端性能优化教程03:添加Expires头
本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...
- Web前端性能优化教程04:压缩组件
本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...
随机推荐
- 瑞芯微-I2S | ALSA基础-3
针对音频设备,linux内核中包含了两类音频设备驱动框架: OSS:开放声音系统 包含dsp和mixer字符设备接口,应用访问底层硬件是直接通过sound设备节点实现的: ALSA:先进linux声音 ...
- QGroupBox自定义样式(仿DotNetBar)
QSS如下: QGroupBox { border:1px solid gray; border-radius:5px; margin-top:3ex; font-size:10pt; color:# ...
- Win32 API 读取文件
昨天又用Win32来读取文件的时候,又出现了字符编码的问题. 用TCHAR字符来写文件呢,用系统的记事本打开是乱码. 用CHAR字字符来写呢,在读取汉字的时候后面有一串乱码, 用CHAR[]数组读取就 ...
- SpringBoot多环境日志配置
SpringBoot多环境日志配置 SpringBoot 默认使用 LogBack 日志系统 默认情况下,SpringBoot项目的日志只会在控制台输入. 如果想查询历史日志则无法找到,我们需要一个日 ...
- pikachu靶场 越权(水平越权+垂直越权)
水平越权 A用户和B用户属于同一级别用户,但各自不能操作对方个人信息.A用户如果越权操作B用户个人信息的情况称为水行越权操作 三个用户 lucy/lili/kobe 密码都为123456 随便登录其 ...
- .net core 负载均衡取客户端真实IP
一个网关代码(.net core 3.1),部署到负载均衡器有故障,发现获取到的客户端IP都是内网IP了,负载均衡用的是阿里云的SLB . 记录一下修改过程 在Strup.cs 中的 Configur ...
- WiFi基础(三):802.11ac/ax/be 与 WiFi4、WiFi5、WiFi6、WiFi7
liwen01 2024.09.08 前言 经过二十多年的发展,WiFi 在硬件能力.软件和算法.频谱资源.市场需求.电源与能效方面都有了很大的提升.所以我们能看到从最开始只有几 M 速率的 802. ...
- vue 消息订阅与发布
vue 消息订阅与发布 一.场景 vue中非父子组件之间通信时,使用vuex有时间会很麻烦,这时候可以通过bus总线来实现 消息的订阅与发布 二.实现方法 1.main.js //main.js Vu ...
- Go runtime 调度器精讲(二):调度器初始化
原创文章,欢迎转载,转载请注明出处,谢谢. 0. 前言 上一讲 介绍了 Go 程序初始化的过程,这一讲继续往下看,进入调度器的初始化过程. 接着上一讲的执行过程,省略一些不相关的代码,执行到 runt ...
- [JS设计模式]:策略模式及应用-计算奖金、表单验证的实现(5)
介绍 策略模式的意义是定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换.此模式让算法的变化不会影响到使用算法的客户. 实现 举一个例子,比如我们做数据合法性校验,一般是通过swich来实现 ...