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

web worker的基本使用案例

news 2026/3/31 2:33:56
  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

用MQTT协议玩转OneNet物联网：STM32F103+ESP8266实现温湿度监控（附心跳包优化技巧）

STM32F103与ESP8266的物联网实战&#xff1a;MQTT协议深度优化与温湿度监控系统设计 1. 资源受限环境下的物联网通信架构设计 在嵌入式物联网设备开发中&#xff0c;资源优化始终是核心挑战。STM32F103C8T6作为经典的Cortex-M3内核微控制器&#xff0c;仅有64KB Flash和20KB RA…...

编程新知 2026/3/31 2:15:27

永磁同步电机的 MTPA + 弱磁控制算法 Simulink 模型探索

永磁同步电机的MTPA弱磁控制算法simulink模型。 转速从4000变到16000转&#xff0c;效果较好&#xff0c;附赠核心模型对应公式文档。在电机控制领域&#xff0c;永磁同步电机&#xff08;PMSM&#xff09;因其高效、高功率密度等优点&#xff0c;被广泛应用于各种工业和民用场…...

编程新知 2026/3/31 2:07:23

图像处理算法资料（FPGA Verilog）: RGB2GRAY、阈值分割、滤波、边缘检测等算...

图像处理算法资料( FPGA Verilog) 分别有RGB2GRAY、阈值分割&#xff08;二值化&#xff09;、均值滤波、中值滤波、sobel边缘检测、膨胀、腐蚀、开闭运算。 各个模块的结构与上图的顶层模块结构一致&#xff0c;通过模块之间的组合串联组成 ISP 顶层模块。 使用vivado软件&…...

编程新知 2026/3/31 2:05:22

onnx之优化器

之前的OpenPPL有个章节讲到过优化器&#xff0c;onnx里面也有个优化器&#xff0c;相关介绍如下一、优化器的本质ONNX Core Optimizer 是在图级别工作的&#xff0c;与EP&#xff08;Execution Provider&#xff09;无关。textONNX模型&#xff08;计算图&#xff09;→ Optimi…...

编程新知 2026/3/31 1:37:14

5个宝可梦ROM定制技巧：pk3DS开源工具打造个性化游戏体验

5个宝可梦ROM定制技巧&#xff1a;pk3DS开源工具打造个性化游戏体验 【免费下载链接】pk3DS Pokmon (3DS) ROM Editor & Randomizer 项目地址: https://gitcode.com/gh_mirrors/pk/pk3DS 宝可梦游戏的重复游玩体验一直是玩家面临的核心挑战&#xff0c;如何通过技术…...

编程新知 2026/3/31 1:27:11

终极指南：3个维度解锁Cyber Engine Tweaks，重塑赛博朋克2077游戏体验

终极指南&#xff1a;3个维度解锁Cyber Engine Tweaks&#xff0c;重塑赛博朋克2077游戏体验 【免费下载链接】CyberEngineTweaks Cyberpunk 2077 tweaks, hacks and scripting framework 项目地址: https://gitcode.com/gh_mirrors/cy/CyberEngineTweaks Cyber Engine …...

编程新知 2026/3/31 0:46:47

Linux 内核中的内存管理：从物理内存到虚拟内存

Linux 内核中的内存管理&#xff1a;从物理内存到虚拟内存 引言 作为一名深耕操作系统和嵌入式开发的工程师&#xff0c;我深知资源管理的重要性。在系统开发中&#xff0c;合理的资源管理可以提高系统的性能和可靠性。在 Linux 内核中&#xff0c;内存管理是一个核心组件&…...

编程新知 2026/3/30 23:10:22

全平台广告拦截神器：AdGuard扩展零门槛部署与优化指南

全平台广告拦截神器&#xff1a;AdGuard扩展零门槛部署与优化指南 【免费下载链接】AdguardBrowserExtension AdGuard browser extension 项目地址: https://gitcode.com/gh_mirrors/ad/AdguardBrowserExtension 广告拦截技术已成为现代浏览器的必备能力&#xff0c;AdG…...

编程新知 2026/3/30 22:56:10

别再混淆了！JavaScript与Java的10个本质区别（附常见面试题解析）

别再混淆了&#xff01;JavaScript与Java的10个本质区别&#xff08;附常见面试题解析&#xff09; 当面试官问"Java和JavaScript有什么区别"时&#xff0c;超过60%的初级开发者会给出"它们就像汽车和地毯的关系"这类玩笑式回答。但真正理解这两种语言的核…...

编程新知 2026/3/30 22:46:02

Scrapy-Redis队列实现原理深度解析：优先级队列、列表与集合操作的终极指南

Scrapy-Redis队列实现原理深度解析&#xff1a;优先级队列、列表与集合操作的终极指南 【免费下载链接】scrapy-redis Redis-based components for Scrapy. 项目地址: https://gitcode.com/gh_mirrors/sc/scrapy-redis Scrapy-Redis 是一个基于 Redis 的 Scrapy 组件库&…...

编程新知 2026/3/30 22:34:01