Web Worker API
Web Worker API
Web Worker 使得在一个独立于 Web 应用程序主执行线程的后台线程中运行脚本操作成为可能。这样做的好处是可以在独立线程中执行费时的处理任务,使主线程(通常是 UI 线程)的运行不会被阻塞/放慢。
Web Worker概念与用法
Worker 是一个使用构造函数创建的对象(例如 Worker),它运行一个具名 JavaScript 文件——该文件包含将在 worker 线程中运行的代码。
除了标准的 JavaScript 函数集(如 String、Array、Object、JSON 等),你可以在 worker 线程中运行任何你喜欢的代码,有一些例外:你不能直接在 worker 线程中操作 DOM 元素,或使用 window对象中的某些方法和属性。
数据通过消息系统在 worker 和主线程之间发送——双方都使用 postMessage() 方法发送消息,并通过 onmessage 事件处理程序响应消息(消息包含在 message 事件的 data 属性中)。数据是复制的,而不是共享的。
Worker类型
有许多不同类型的 worker:
- 专用 worker 是由单个脚本使用的 worker。该上下文由 DedicatedWorkerGlobalScope
对象表示。 - Shared worker 是可以由在不同窗口、IFrame 等中运行的多个脚本使用的 worker ,只要它们与 worker 在同一域中。它们比专用的 worker 稍微复杂一点——脚本必须通过活动端口进行通信。
- Service Worker 基本上是作为代理服务器,位于 web 应用程序、浏览器和网络(如果可用)之间。它们的目的是(除开其他方面)创建有效的离线体验、拦截网络请求,以及根据网络是否可用采取合适的行动并更新驻留在服务器上的资源。它们还将允许访问推送通知和后台同步 API。
备注: 根据 web worker 规范,worker 错误事件不应该冒泡(参见 Firefox bug 1188141)。该规范已在 Firefox 42 中实现。
Worker全局上下文和函数
worker 在一个与当前 window不同的全局上下文中运行!虽然 Window 不能直接用于 worker,但许多相同的方法被定义在一个共享的混入(WindowOrWorkerGlobalScope)中,并通过 worker 自己的 WorkerGlobalScope 衍生的上下文提供给它们:
- DedicatedWorker GlobalScope用于专用 worker
- SharedWorker GlobalScope (en-US) 用于共享 worker
- ServiceWorkerGlobalScope 用于 service worker
支持的WebAPI
备注: 如果列出的 API 被某一平台的特定版本所支持,那么一般可以认为它在 web worker 中是可用的。你也可以使用网站来测试对某个特定对象/函数的支持:Worker Playground
以下 Web API 对 worker 是可用的:
- Barcode Detection API (en-US)
- Broadcast Channel API
- Cache API
- Channel Messaging API
- Console API
- Web Crypto API (例如 Crypto)
- CSS Font Loading API
- CustomEvent
- Encoding API(例如TextEncoder、TextDecoder)
- Fetch API
- FileReader
- FileReaderSync(仅在worker中有效!)
- FormData
- ImageBitmap
- ImageData
- IndexedDB
- Media Source Extensions API (仅限专用 worker)
- Network Information API
- Notifications API
- OffscreenCanvas
- (和所有的canvascontextAPI)
...
worker 也可以派生其他 worker,所以这些 API 也是可用的:
- Worker
- WorkerGlobalScope
- WorkerLocation (en-US)
- WorkerNavigator (en-US)
Web Worker接口
Worker
表示正在运行的worker线程,允许你将信息传递到正在运行的worker程序代码。
WorkerLocation (en-US)
定义由Worker执行的脚本的绝对位置。
SharedWorker
表示一种特定的worker,可以从多个浏览上下文(即窗口、标签或iframe)甚至其他worker访
问。
WorkerGlobalScope
表示任意worker的通用作用域(对于正常的网页类容来说与Winddow有相同的作用)。不同类型
的worker都有从接口继承作用域对象,并且可以添加更多特定特定特性生。
DedicatedWorker GlobalScope
表示一个专用worker的作用域,继承自WorkerGlobalScope,且可添加一些特有的特性。
SharedWorker GlobalScope (en-US)
表示一个共享worker的作用域,继承自WorkerGlobalScope,且可添加一些特有的特性。
WorkerNavigator (en-US)
表示用户代理(客户端)的身份和状态。
示例
本次先讲一下 Worker的使用
代码结构

index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><title>Web Workers basic example</title><link rel="stylesheet" href="style.css"><!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body><h1>Web<br>Workers<br>basic<br>example</h1><div class="controls" tabindex="0"><form><div><label for="number1">Multiply number 1: </label><input type="text" id="number1" value="0"></div><div><label for="number2">Multiply number 2: </label><input type="text" id="number2" value="0"></div></form><p class="result">Result: 0</p></div><script src="main.js"></script></body>
</html>
main.js
const first = document.querySelector('#number1');
const second = document.querySelector('#number2');const result = document.querySelector('.result');if (window.Worker) {const myWorker = new Worker("worker.js");first.onchange = function() {myWorker.postMessage([first.value, second.value]);console.log('Message posted to worker');}second.onchange = function() {myWorker.postMessage([first.value, second.value]);console.log('Message posted to worker');}myWorker.onmessage = function(e) {result.textContent = e.data;console.log('Message received from worker');}
} else {console.log('Your browser doesn\'t support web workers.');
}
worker.js
onmessage = function(e) {console.log('Worker: Message received from main script');const result = e.data[0] * e.data[1];if (isNaN(result)) {postMessage('Please write two numbers');} else {const workerResult = 'Result: ' + result;console.log('Worker: Posting message back to main script');postMessage(workerResult);}}
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: 0.3;transition: 1s all;
}.controls:hover, .controls:focus {opacity: 1;
}.controls label, .controls p, .controls input {font-size: 3vw;
}.controls div {padding-bottom: 1rem;
}
结果

相关文章:
Web Worker API
Web Worker API Web Worker 使得在一个独立于 Web 应用程序主执行线程的后台线程中运行脚本操作成为可能。这样做的好处是可以在独立线程中执行费时的处理任务,使主线程(通常是 UI 线程)的运行不会被阻塞/放慢。 Web Worker概念与用法 Wor…...
1.4 MA多头/空头排列是真的吗?
MA策略验证——金叉和死叉 文章目录 MA策略验证——金叉和死叉公共代码论证步骤论证代码论证结果写在最后公共代码 code = 注意,这里改成股票代码 pro = ts.pro_api(tushare的token)df = pro.daily(ts_code=code)[...
基于SpringBoot+Vue的CSGO赛事管理系统设计与实现(源码+LW+部署文档等)
博主介绍: 大家好,我是一名在Java圈混迹十余年的程序员,精通Java编程语言,同时也熟练掌握微信小程序、Python和Android等技术,能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…...
Android系统APP之SettingsProvider
前言 SettingsProvider顾名思义是一个提供设置数据共享的Provider,SettingsProvider和Android系统其它Provider有很多不一样的地方,如: SettingsProvider只接受int、float、string等基本类型的数据;SettingsProvider由Android系…...
go入门实践二-tcp服务端
文章目录 前言接口与方法并发-协程项目管理bufio包使用其他代码 前言 上一篇,我们通过go语言的hello-world入门,搭建了go的编程环境,并对go语法有了简单的了解。本文实现一个go的tcp服务端。借用这个示例,展示接口、协程、bufio的…...
SprinMVC获取请求参数
SprinMVC获取请求参数 Spring MVC 提供的获取请求参数的方式 通过 HttpServletRequest 获取请求参数通过控制器方法的形参获取请求参数使用 RequestParam 注解获取请求参数通过实体类对象获取请求参数(推荐) 通过ServlstAPI获取 将HttpServletRequest…...
orangepi 4lts ubuntu安装RabbitMQ
4lts的emmc 系统安装选文件系统格式 ext4 需先安装erlang: sudo apt install erlang 安装RabbitMQ: sudo apt install rabbitmq-server - 添加用户以便远程访问: - 账号密码都是admin: sudo rabbitmqctl add_user admin admin -sudo rabbitmqct…...
SolidWorks 3D Interconnect介绍
目前市面上有的三维设计软件有很多,如UG、Pro/E、CATIA等,而且每个三维设计软件都会生成自己文件格式。由于产品设计的原因,我们避免不了的会需要去使用不同三维设计软件的文件,这对于工程师来说其实是一件比较麻烦的事。 为什么…...
MBG中update语句的区别
int updateByPrimaryKey(User record) thorws SQLException 按主键更新 int updateByPrimaryKeySelective(User record) thorws SQLException 按主键更新值不为null的字段 使用以上的方式更新数据时必须提供主键,MyBatis根据主键进行数据记录的更新。 int updateBy…...
论文阅读 - Few-shot Network Anomaly Detection via Cross-network Meta-learning
论文链接:https://arxiv.org/pdf/2102.11165.pdf 目录 摘要: 引言 问题定义 方法 Graph Deviation Networks Cross-network Meta-learning 摘要: 网络异常检测旨在找到与绝大多数行为显着不同的网络元素(例如节点、边、子图…...
秋招算法备战第37天 | 738.单调递增的数字、968.监控二叉树、贪心算法总结
738. 单调递增的数字 - 力扣(LeetCode) 这个问题是关于找到一个小于或等于给定数字n的最大单调递增数字。 我们可以将数字n转换为字符数组,然后从左到右扫描,寻找第一个违反单调递增条件的位置。一旦找到这样的位置,…...
Windows server上用nginx部署vue3项目
Windows server上用nginx部署vue3项目 一、Node中node_modules文件夹及package.json文件的作用说明二、VUE3项目打包三、Windows Server上的Nginx部署 一、Node中node_modules文件夹及package.json文件的作用说明 node_modules是安装node后用来存放用包管理工具下载安装的包的…...
计算机视觉与图形学-神经渲染专题-pi-GAN and CIPS-3D
《pi-GAN: Periodic Implicit Generative Adversarial Networks for 3D-Aware Image Synthesis》 摘要 我们见证了3D感知图像合成的快速进展,利用了生成视觉模型和神经渲染的最新进展。然而,现有的方法在两方面存在不足:首先,它们…...
【FAQ】EasyGBS平台通道显示在线,视频无法播放并报错400的排查
EasyGBS是基于国标GB28181协议的视频云服务平台,它可以支持国标协议的设备接入,在视频能力上能实现直播、录像存储、检索与回放、云台控制、告警上报、语音对讲、平台级联等功能,既能作为业务平台使用,也能作为能力层平台调用。 我…...
G1和CMS
G1垃圾回收器要点: 1.什么是G1垃圾回收器: G1是一款专门针对于拥有多核处理器和大内存的机器的收集器,在满足了GC响应时间的延迟可控的情况下,也会尽可能提高的程序的吞吐量 2.G1垃圾回收器的优点: ①与CMS收集器一…...
详解Linux中的socket函数
2023年8月3日,周四下午 目录 函数原型参数domain参数type参数protocol举例说明参数type和参数protocol之间的关系 函数原型 #include <sys/socket.h>int socket(int domain, int type, int protocol);参数domain domain是“域”的意思,其值为AF…...
React Antd 实现表格合计功能
思路:首先拿到 表格数组对象,然后写一个工具类,然后向数组对象最后插入一条数据,这条数据的字段时根据表格数组里合计算出来的。 代码如下,需根据各自业务稍作改动: <Table dataSource{tableData}column…...
尝试一下Guava带返回值的多线程处理类ListenableFuture
文章目录 ListenableFuture,带返回值的Guava多线程处理工具类举个例子扩展阅读 最近在学习,Java实现异步编程的8种方式这篇博客的时候,没有找到比较好的一个学习demo,故在此整理一下。 ListenableFuture,带返回值的Gua…...
微信小程序真机调试报ERR_CERT_AUTHORITY_INVALID
微信小程序真机调试报ERR_CERT_AUTHORITY_INVALID 问题解决方法 问题 微信开发者工具中调试微信小程序,在开发工具里面调试没问题,但是真机调试的时候报ERR_CERT_AUTHORITY_INVALID错误 解决方法 到这个站点检查域名的Https证书的安全性 : 传送门(注:…...
JCommander + AutoService打造带子命令的Java命令行应用
文章目录 需求Java命令行工具库依赖库定义各个子命令主类CLI测试一下参考文档 需求 最近想将自己的一个Java应用包装成命令行工具,看了几个库,最后选取了JCommander,结合AutoService库,实现了带子命令的工具,方便扩展…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)
本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...
MFC 抛体运动模拟:常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...
Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要: 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式(自动驾驶、人工驾驶、远程驾驶、主动安全),并通过实时消息推送更新车…...
(一)单例模式
一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...
给网站添加live2d看板娘
给网站添加live2d看板娘 参考文献: stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下,文章也主…...
