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

web worker的基本使用案例

news 2026/2/8 12:38:05

在这里插入图片描述

代码按照顺序分别如下

webworker.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width" /><title>Web Workers basic example</title><link rel="stylesheet" href="./css/style.css" /></head><body><h1>Web<br />Workers<br />basic<br />example</h1><div class="controls" tabindex="0"><form><div><label for="number1">上传: </label><input type="file" id="file-upload" /></div><div><label for="number1">数字1: </label><input type="text" id="number1" value="0" /></div><div><label for="number2">数字2: </label><input type="text" id="number2" value="0" /></div><div><button type="button">计算hash</button></div></form><p class="result">结果: 0</p></div><script src="./js/main.js"></script></body>
</html>

style.css

html {background-color: #7d2663;font-family: sans-serif;
}h1 {margin: 0;font-size: 20vmin;letter-spacing: -0.2rem;position: absolute;top: 0;z-index: -1;
}p {margin: 0;
}.controls {padding: 4vw;width: 75%;margin: 10vw auto;background-color: rgba(255, 255, 255, 0.7);border: 5px solid black;opacity: 1;transition: 1s all;
}.controls:hover,
.controls:focus {opacity: 1;
}.controls label,
.controls p,
.controls input {font-size: 3vw;
}.controls div {padding-bottom: 1rem;
}

main.js

const first = document.querySelector('#number1');
const second = document.querySelector('#number2');
const fileUplaod = document.querySelector('#file-upload');const result = document.querySelector('.result');
const CHUNKS_SIZE = 1 * 1024 * 1024;if (window.Worker) {const myWorker = new Worker('./js/webworker.js', { name: 1 });// 文件分片const filefragment = (file, size = CHUNKS_SIZE) => {let curr = 0;const chunks = [];while (curr < file.size) {chunks.push({ index: curr, file: file.slice(curr, curr + size) });curr += size;}return chunks;};// 计算hashconst calcHash = (chunks) => {return new Promise((resolve, reject) => {myWorker.postMessage({ chunks });myWorker.onmessage = (e) => {const { hash } = e.data;if (hash) {resolve(hash);} else {reject();}};});};first.onchange = function () {myWorker.postMessage([first.value, second.value]);console.log('数字1发生了变化');};second.onchange = function () {myWorker.postMessage([first.value, second.value]);console.log('数字2发生了变化');};fileUplaod.onchange = async function (e) {const file = e.target.files[0];if (!file) return;const chunks = filefragment(file);const hash = await calcHash(chunks);console.log(hash);};myWorker.onmessage = function (e) {result.textContent = e.data;console.log('接收返回结果');};
} else {console.log('您的浏览器不支持webworker');
}

spak-md5.js由于代码太长,这边提供下载链接
```
// https://www.bootcdn.cn/spark-md5/
```

webworker.js

self.importScripts('./spark-md5.js');self.onmessage = function (e) {const { chunks } = e.data;const spark = new self.SparkMD5.ArrayBuffer();let count = 0;const loadNext = (index) => {const reader = new FileReader();reader.readAsArrayBuffer(chunks[index].file);reader.onload = (e) => {count++;spark.append(e.target.result);if (count == chunks.length) {self.postMessage({hash: spark.end(),});} else {loadNext(count);}};};loadNext(0);
};

大致的使用方法如上,如果想更详细的了解的话,请转至MDN

web worker的基本使用案例

文件目录如下代码按照顺序分别如下 webworker.html <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewpo…...

编程日记 2023/3/10 19:28:38

机器看世界

博主简介博主是一名大二学生，主攻人工智能研究。感谢让我们在CSDN相遇，博主致力于在这里分享关于人工智能，c，Python，爬虫等方面知识的分享。如果有需要的小伙伴可以关注博主，博主会继续更新的&#xff0c…...

编程日记 2023/3/10 19:27:34

18、指数移动平均——EMA

简介在深度学习中，经常会使用EMA（指数移动平均）这个方法对模型的参数做平均，以求提高测试指标并增加模型鲁棒。指数移动平均（Exponential Moving Average）也叫权重移动平均（Weighted Moving…...

编程日记 2023/3/10 19:26:30

用Go快速搭建IM即时通讯系统

WebSocket的目标是在一个单独的持久连接上提供全双工、双向通信。在Javascript创建了Web Socket之后，会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会将HTTP升级从HTTP协议交换为WebSocket协议。由于WebSocket使用自定义的协议…...

编程日记 2023/3/10 19:25:22

2023年江苏省职业院校技能大赛中职网络安全赛项试卷-学生组-任务书

2023年江苏省职业院校技能大赛中职网络安全赛项试卷-学生组-任务书 2023年江苏省职业院校技能大赛中职网络安全赛项试卷-学生组-任务书第一阶段 (300分) [手敲的任务书点个赞吧]任务一:主机发现与信息收集 (50分)任务二: 应急响应 (60分)任务三:数字取证与分析（80分）任务四:…...

编程日记 2023/3/10 19:24:19

如何使用码匠连接 MariaDB

MariaDB 是一个免费的、开源的关系型数据库管理系统，由 MariaDB 的创始人 Michael Widenius 于 2010 年创建。它基于 MariaDB，但在对数据存储的处理中加入了一些自己的特性。MariaDB 相对于 MariaDB 而言，具有更好的性能和更好的兼容性&#…...

编程日记 2023/3/10 19:23:13

JavaEE简单示例——Bean的实例化

简单介绍： 在我们之前使用某个对象，那么就要创建这个类的对象，创建对象的过程就叫做实例化。对于Spring来说，实例化Bean的方式有三种，分别是构造方法实例化，静态方法实例化，实例工厂实例化。我…...

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

1229. 日期问题

目录题目链接一些话流程套路 ac代码题目链接 1229. 日期问题 - AcWing题库一些话切入点 // 小明知道这些日期都在1960年1月1日至2059年12月31日。 // 这些日期采用的格式非常不统一，有采用年/月/日的，有采用月/日/年的，还有采用…...

编程日记 2023/3/10 19:21:07

无论是浅拷贝还是深拷贝，都可以通过 Object 类的 clone() 方法来完成： /*** 拷贝** author qiaohaojie* date 2023/3/5 15:58*/ public class CloneTest {public static void main(String[] args) throws Exception {Person person1 new Person(23, &…...

编程日记 2023/3/10 19:20:03

【java】 java开发中常遇到的各种难点思路方案

文章目录逻辑删除如何建立唯一索引唯一索引失效问题加密字段模糊查询问题maven依赖冲突问题（jar包版本冲突问题）sql in条件查询时将结果按照传入顺序排序作为一个开发人员总会遇到各种难题本文列举博主遇见/想到的例子 ，也希望同学们可以…...

编程日记 2023/3/10 19:19:02

ViewBinding 和 DataBinding的使用

1.ViewBinding:视图绑定通过视图绑定功能，您可以更轻松地编写可与视图交互的代码。在模块中启用视图绑定之后，系统会为该模块中的每个 XML 布局文件生成一个绑定类。绑定类的实例包含对在相应布局中具有 ID 的所有视图的直接引用。在大多数情况下&…...

编程日记 2023/3/10 19:18:00

HTML+CSS入门

CSS概述 CSS指层叠样式表 (Cascading Style Sheets)，用来定义HTML网页中的内容用什么样式来显示。 HTML: 指定网页显示的内容 CSS: 指定内容显示的样式CSS入门案例 <html><head><meta charset"UTF-8"><title>入门案例</tit…...

编程日记 2023/3/10 19:16:57

【Vue】vue2导出页面内容为pdf文件，自定义选中页面内容导出为pdf文件，打印选中页面内容，预览打印内容

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、安装html2canvas和jspdf二、导出pdf使用步骤1.在utils文件夹下创建htmlToPdf.js2.在main.js中引入3.在页面中使用三、打印预览1. 引入print-js2.页面中impor…...

编程日记 2023/3/10 19:15:54

保姆级使用PyTorch训练与评估自己的Replknet网络教程

文章目录前言0. 环境搭建&快速开始1. 数据集制作1.1 标签文件制作1.2 数据集划分1.3 数据集信息文件制作2. 修改参数文件3. 训练4. 评估5. 其他教程前言项目地址：https://github.com/Fafa-DL/Awesome-Backbones 操作教程：https://www.bilibili.co…...

编程日记 2023/3/10 19:14:50

1/4车、1/2车、整车悬架PID控制仿真合集

目录前言 1. 1/4悬架系统 1.1数学模型 1.2仿真分析 2. 1/2悬架系统 2.1数学模型 2.2仿真模型 2.3仿真分析 3. 整车悬架系统 3.1数学模型 3.2仿真分析参考文献前言前面几篇文章介绍了LQR、SkyHook、H2/H∞控制，接下来会继续介绍滑模、反步法、MPC、…...

编程日记 2023/3/10 19:13:44

媒体邀约的形式和步骤

传媒如春雨，润物细无声，大家好，我是51媒体网胡老师。做媒体服务很多年，今天就与大家分享下媒体邀约都有哪些形式： 1，电话邀约：通过电话与媒体记者进行沟通，邀请其参加活动或接受采…...

编程日记 2023/3/10 19:12:41

Unity合批处理

一.静态合批标记为Batching Static的物体（标记后物体运行不能移动、旋转、缩放）在使用相同材质球的条件下在项目打包的时候unity会自动将这些物体合并到一个大Mesh*缺点打包后体积增大运行时内存占用增大二.动态批处理不超过300个顶点不超过900个属性不包…...

编程日记 2023/3/10 19:11:40

Android 进阶——Binder IPC之Native 服务的启动及代理对象的获取详解（六）

文章大纲引言一、Binder线程池的启动1、ProcessState#startThreadPool函数来启动线程池2、IPCThreadState#joinThreadPool 将当前线程进入到线程池中去等待和处理IPC请求二、Service 代理对象的获取1、获取Service Manager 代理对象BpServiceManager2、调用BpServiceManager#ge…...

编程日记 2023/3/10 19:10:38

企业官网怎么做？

企业官网是企业展示形象和吸引潜在客户的重要渠道之一，因此如何打造一款优秀的企业官网显得尤为重要。本文将从策划、设计、开发和上线等方面，为您介绍企业官网的制作步骤。一、策划 1.明确目标企业官网的制作需要明确目标，即确定官网的主…...

编程日记 2023/3/10 19:09:36

FPGA和IC设计怎么选？哪个发展更好？

很多人纠结FPGA和IC设计怎么选，其实往小了说，要看你选择的具体是哪个方向岗位。往大了说，将来你要是走更远，要成为大佬，那基本各个方向的都要有涉及的。不同方向就有不同的发展，目前在薪资上IC设计要比FP…...

编程日记 2023/3/10 19:08:29

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2026/2/8 4:37:34

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

通过Wrangler CLI在worker中创建数据库和表

官方使用文档：Getting started Cloudflare D1 docs 创建数据库在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...

编程新知 2026/1/31 6:18:08

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13