避免阻塞主线程 —— Web Worker 示例项目

9a69fede8b2044a79dd834e3e48f20b4.png前期回顾   

迄今为止易用 —— 的 “盲水印“ 实现方案-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/m0_57904695/article/details/136720192?spm=1001.2014.3001.5501

目录

@CSDN 彩色之外

 📝 前言

 🚩 技术栈

 🛠️ 功能

 🤖 如何运行

 ♻️ 示例代码

 ⛑️ 注意事项 

 📝 参考资料


仓库点我👉Huo-zai-feng-lang-li/worker-demo: 本项目演示了如何在 Web 应用中使用 Web Worker 来执行后台任务,以避免阻塞主线程并提高页面的响应性。 (github.com)

@CSDN 彩色之外

 📝 前言

什么是Web Worker ?

Web Worker 允许你在后台线程中运行脚本,而不会影响主线程的性能。这对于执行耗时的计算任务特别有用,因为它可以防止在执行这些任务时界面冻结。

本项目演示了如何在 Web 应用中使用 Web Worker 来执行后台任务,以避免阻塞主线程并提高页面的响应性。 

轮询一个接口,不占用主线程,比如定时调用接口获取用户是否扫码

🚩 技术栈

  • HTML
  • JavaScript
  • Web Worker

🛠️ 功能

  • 使用 Web Worker 处理耗时的数据计算,避免阻塞主线程。
  • 主线程与 Worker 线程之间的消息传递。

 🤖 如何运行

  1. 克隆本仓库到本地。
  2. 在本地服务器上打开项目根目录(可以使用 Python 的 http.server 模块,或者 Node.js 的 http-server 包)或者使用vscode的插件(open lives erver)。
  3. 在浏览器中访问 index.html

♻️ 示例代码

主线程:main.js

  • 使用
    postMessage发送
  • 使用
    onmessage接受
// 创建一个新的 Worker
const myWorker = new Worker("worker.js");
// 向 Worker 发送数据
myWorker.postMessage("Hello, Worker!");
// 接收来自 Worker 的消息
myWorker.onmessage = function (e) {console.log("Message received from worker:", e.data);
};

Worker 线程:worker.js 

// 监听来自主线程的消息
self.onmessage = function (e) {console.log("Worker: Message received from main script");const result = e.data * 2;// 向主线程发送消息postMessage(result);
};

⛑️ 注意事项 

  • Web Worker 无法访问 DOM。
  • 传递给 Worker 的数据是通过结构化克隆算法克隆的,Worker 不能直接操作原始数据。
  • 确保在支持 Web Worker 的环境中运行示例。

📝 参考资料

  • Web Workers MDN 文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/746352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《JAVA与模式》之工厂方法模式

系列文章目录 文章目录 系列文章目录前言一、工厂方法模式二、工厂方法模式的活动序列图三、工厂方法模式和简单工厂模式前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码…

【个人记录】CentOS7安装MySQL 5.7和libmysqlclient.so.20

记录 之前使用MariaDB 发现使用的libmysqlclient.so是18版本的,一些程序需要20版本的库,查了一下需要安装5.7以上版本的才有libmysqlclient.so.20,这里简单记录一下怎么安装。 安装MySQL 5.7 Yum源 yum install -y https://repo.mysql.com…

如何用SMU数字源表测试apd管的暗电流

01 APD工作原理 APD雪崩光电二极管的工作原理是基于光电效应和雪崩效应,当光子被吸收时,会产生电子空穴对,空穴向P区移动,电子向N区移动,由于电场的作用,电子与空穴相遇时会产生二次电子,形成雪…

串行通信——IIC总结

一.什么是IIC? IIC(Inter-Integrated Circuit)也称I2C,中文叫集成电路总线。是一个多主从的串行总线,由飞利浦公司发明的通讯总线,属于半双工同步传输类总线,仅由两条线就能完成多机通讯&#…

【解读】区块链和分布式记账技术标准体系建设指南

大家好,这里是苏泽。一个从业Java后端的区块链技术爱好者。 今天带大家来解读这份三部门印发的行业建设指南《区块链和分布式记账技术标准体系建设指南》 原文件可查看P020240112840724196854.pdf (www.gov.cn) 以下是个人解读,如有纰漏请指正&#xff…

【系统架构师】-第16章-嵌入式系统架构设计理论与实践

1、嵌入式系统发展 第一阶段:单片微型计算机 (SCM) 阶段,即单片机时代,五操作系统 第二阶段:微控制器 (MUC) 阶段,有简单操作系统 第三阶段:片上系统 (SoC),兼容各种微处理器 第四阶段&…

软件测试 —— 测试用例设计报告

写出测试网站的测试用例,测试网站具体内容可看团购网站系统需求说明书1.2.doc 一、流程1:注册→登录 图1:注册->登录流程图 1、 使用场景设计法设计测试用例 1) 找出基本流和备选流 基本流注册用户-成功登录系统备选流1注册…

Jenkins cron定时构建触发器

from: https://www.jenkins.io/doc/book/pipeline/syntax/#cron-syntax 以下内容为根据Jenkins官方文档cron表达式部分翻译过来,使用机翻加个人理解补充内容,包括举例。 目录 介绍举例:设置方法方法一:方法二&#xf…

3.2_1 虚拟内存的基本概念

3.2_1 虚拟内存的基本概念 虚拟存储技术也是存储空间扩充的一种技术,它比交换、覆盖技术要更先进一些。 (一)传统存储管理方式的特征、缺点 对于这种传统的存储管理方案,很多暂时用不到的数据也会长期占用内存,导致内存…

【数据结构和算法初阶(C语言)】栈的概念和实现(后进先出---后来者居上的神奇线性结构带来的惊喜体验)

目录 1.栈 1.1栈的概念及结构 2.栈的实现 3.栈结构对数据的处理方式 3.1对栈进行初始化 3.2 从栈顶添加元素 3.3 打印栈元素 3.4移除栈顶元素 3.5获取栈顶元素 3.6获取栈中的有效个数 3.7 判断链表是否为空 3.9 销毁栈空间 4.结语及整个源码 1.栈 1.1栈的概念及结构 栈&am…

高压辊磨机(辊压机)在矿物加工领域应用广泛 目前本土企业处于向高端转型阶段

高压辊磨机(辊压机)在矿物加工领域应用广泛 目前本土企业处于向高端转型阶段 高压辊磨机又称为辊压机、挤压磨,是基于料层粉碎原理设计的一种干式辊磨设备。高压辊磨机结构形式多样,但原理基本相似,主要由机架、高压工…

浅谈C++绑定器bind1st、bind2nd和函数对象function

今天我们先来谈谈C 标准库里面的绑定器bind1st,bind2nd 和函数对象function C 绑定器和函数对象 一、绑定器二、函数对象 一、绑定器 虽然在C11标准中这两个绑定函数已经被弃用,但仍然值得我们深入思考其底层原理。从字面上理解,“绑定” 这…

Explain

Explain EXPLAIN是MySQL提供的一种用于分析SQL查询执行计划的工具,通过它我们可以深入了解数据库如何执行一条SQL语句,以及优化器在选择索引、访问表和排序数据等方面的决策。 我整理了一份思维导图方便更好查看各个参数的意义,红色表示比较…

RabbitMq踩坑记录

1、连接报错:Broker not available; cannot force queue declarations during start: java.io.IOException 2.1、原因:端口不对 2.2、解决方案: 检查你的连接配置,很可能是你的yml里面的端口配置的是15672,更改为5672即…

css超出部分显示省略号

目录 前言 一、CSS单行实现 二、CSS多行实现(CSS3出的,兼容性需要注意) 三、微信小程序超过2行出现省略号实现 四、JavaScript脚本实现 前言 CSS文本溢出就显示省略号,就是在样式中指定了盒子的宽度与高度,有可能出现某些内…

LLM - 大语言模型(LLM) 概述

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/136617643 大语言模型(LLM, Large Language Model)的发展和应用是一个非常广泛的领域,涉及从早期的统计模型到现代基于深度学…

【AI+CAD】(二)LLM和VLM生成结构化数据结构(PPT/CAD/DXF)

当前LLM和VLM在PPT生成任务上已经小有成效,如ChatPPT。 @TOC 1. PPT-LLM LLM根据用户的instruction生成规范的绘制ppt的API语句:即使是最强的GPT-4 + CoT也只能达到20-30%的内容准确度。 LLM输入:User_instruction(当前+过去)、PPT_content、PPT_reader_API。其中 PPT_rea…

面试经典150题——随机链表的复制

​前两天断更了两天有点事情🤗 1. 题目描述 2. 题目分析与解析 2.1 思路一 开始还是没什么思路,没思路那就先把题目解决不管方法的好坏。如果不考虑复杂度,该怎么解决? 可以有这样的一种思路: 首先复制链表的所有节…

【python绘图】turle 绘图基本案例

文章目录 0. 基础知识1. 蟒蛇绘制2. 正方形绘制3. 六边形绘制4. 叠边形绘制5. 风轮绘制 0. 基础知识 资料来自中国mooc北京理工大学python课程 1. 蟒蛇绘制 import turtle turtle.setup(650, 350, 200, 200) turtle.penup() turtle.fd(-250) turtle.pendown() turtle.pen…

jeesite列表jqGrid表格底部汇总,基于onSelectRow和onSelectAll实现选中行汇总合计

一、最终效果图 二、表格启用复选框并初始化赋值 onSelectAll: function() { calc_sum(); }, onSelectRow: function() { calc_sum(); },// 加载成功后执行事件 ajaxSuccess: function(data){var dy = 0;var glbzqmrsdtyg = 0;var glbzqmrsschyg = 0;var glbzqmrsqtcy …