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

web worker的基本使用案例

news 2026/2/7 14:17:14
  1. 文件目录如下

在这里插入图片描述

  1. 代码按照顺序分别如下

    • 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);
};

  2. 大致的使用方法如上,如果想更详细的了解的话,请转至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

机器看世界

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

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

18、指数移动平均——EMA

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

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

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

WebSocket的目标是在一个单独的持久连接上提供全双工、双向通信。在Javascript创建了Web Socket之后&#xff0c;会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后&#xff0c;建立的连接会将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 是一个免费的、开源的关系型数据库管理系统&#xff0c;由 MariaDB 的创始人 Michael Widenius 于 2010 年创建。它基于 MariaDB&#xff0c;但在对数据存储的处理中加入了一些自己的特性。MariaDB 相对于 MariaDB 而言&#xff0c;具有更好的性能和更好的兼容性&#…...

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

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

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

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

1229. 日期问题

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

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

Java 中的浅拷贝和深拷贝

无论是浅拷贝还是深拷贝&#xff0c;都可以通过 Object 类的 clone() 方法来完成&#xff1a; /*** 拷贝** 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依赖冲突问题&#xff08;jar包版本冲突问题&#xff09;sql in条件查询时 将结果按照传入顺序排序作为一个开发人员 总会遇到各种难题 本文列举博主 遇见/想到 的例子 &#xff0c;也希望同学们可以…...

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

ViewBinding 和 DataBinding的使用

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

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

HTML+CSS入门

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

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

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

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、安装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. 其他教程前言 项目地址&#xff1a;https://github.com/Fafa-DL/Awesome-Backbones 操作教程&#xff1a;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∞控制&#xff0c;接下来会继续介绍滑模、反步法、MPC、…...

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

媒体邀约的形式和步骤

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

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

Unity合批处理

一.静态合批标记为Batching Static的物体&#xff08;标记后物体运行不能移动、旋转、缩放&#xff09;在使用相同材质球的条件下在项目打包的时候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

企业官网怎么做？

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

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

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

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

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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2026/2/5 4:33:58

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/1/22 8:41:31

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2026/1/31 5:06:34

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2026/2/7 9:27:22

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/11/6 1:34:07

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/2/5 4:33:51