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

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 应用程序主执行线程的后台线程中运行脚本操作成为可能。这样做的好处是可以在独立线程中执行费时的处理任务&#xff0c;使主线程&#xff08;通常是 UI 线程&#xff09;的运行不会被阻塞/放慢。 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+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…...

Android系统APP之SettingsProvider

前言 SettingsProvider顾名思义是一个提供设置数据共享的Provider&#xff0c;SettingsProvider和Android系统其它Provider有很多不一样的地方&#xff0c;如&#xff1a; SettingsProvider只接受int、float、string等基本类型的数据&#xff1b;SettingsProvider由Android系…...

go入门实践二-tcp服务端

文章目录 前言接口与方法并发-协程项目管理bufio包使用其他代码 前言 上一篇&#xff0c;我们通过go语言的hello-world入门&#xff0c;搭建了go的编程环境&#xff0c;并对go语法有了简单的了解。本文实现一个go的tcp服务端。借用这个示例&#xff0c;展示接口、协程、bufio的…...

SprinMVC获取请求参数

SprinMVC获取请求参数 Spring MVC 提供的获取请求参数的方式 通过 HttpServletRequest 获取请求参数通过控制器方法的形参获取请求参数使用 RequestParam 注解获取请求参数通过实体类对象获取请求参数&#xff08;推荐&#xff09; 通过ServlstAPI获取 将HttpServletRequest…...

orangepi 4lts ubuntu安装RabbitMQ

4lts的emmc 系统安装选文件系统格式 ext4 需先安装erlang&#xff1a; sudo apt install erlang 安装RabbitMQ: sudo apt install rabbitmq-server - 添加用户以便远程访问&#xff1a; - 账号密码都是admin: sudo rabbitmqctl add_user admin admin -sudo rabbitmqct…...

SolidWorks 3D Interconnect介绍

目前市面上有的三维设计软件有很多&#xff0c;如UG、Pro/E、CATIA等&#xff0c;而且每个三维设计软件都会生成自己文件格式。由于产品设计的原因&#xff0c;我们避免不了的会需要去使用不同三维设计软件的文件&#xff0c;这对于工程师来说其实是一件比较麻烦的事。 为什么…...

MBG中update语句的区别

int updateByPrimaryKey(User record) thorws SQLException 按主键更新 int updateByPrimaryKeySelective(User record) thorws SQLException 按主键更新值不为null的字段 使用以上的方式更新数据时必须提供主键&#xff0c;MyBatis根据主键进行数据记录的更新。 int updateBy…...

论文阅读 - Few-shot Network Anomaly Detection via Cross-network Meta-learning

论文链接&#xff1a;https://arxiv.org/pdf/2102.11165.pdf 目录 摘要&#xff1a; 引言 问题定义 方法 Graph Deviation Networks Cross-network Meta-learning 摘要&#xff1a; 网络异常检测旨在找到与绝大多数行为显着不同的网络元素&#xff08;例如节点、边、子图…...

秋招算法备战第37天 | 738.单调递增的数字、968.监控二叉树、贪心算法总结

738. 单调递增的数字 - 力扣&#xff08;LeetCode&#xff09; 这个问题是关于找到一个小于或等于给定数字n的最大单调递增数字。 我们可以将数字n转换为字符数组&#xff0c;然后从左到右扫描&#xff0c;寻找第一个违反单调递增条件的位置。一旦找到这样的位置&#xff0c;…...

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感知图像合成的快速进展&#xff0c;利用了生成视觉模型和神经渲染的最新进展。然而&#xff0c;现有的方法在两方面存在不足&#xff1a;首先&#xff0c;它们…...

【FAQ】EasyGBS平台通道显示在线,视频无法播放并报错400的排查

EasyGBS是基于国标GB28181协议的视频云服务平台&#xff0c;它可以支持国标协议的设备接入&#xff0c;在视频能力上能实现直播、录像存储、检索与回放、云台控制、告警上报、语音对讲、平台级联等功能&#xff0c;既能作为业务平台使用&#xff0c;也能作为能力层平台调用。 我…...

G1和CMS

G1垃圾回收器要点&#xff1a; 1.什么是G1垃圾回收器&#xff1a; G1是一款专门针对于拥有多核处理器和大内存的机器的收集器&#xff0c;在满足了GC响应时间的延迟可控的情况下&#xff0c;也会尽可能提高的程序的吞吐量 2.G1垃圾回收器的优点&#xff1a; ①与CMS收集器一…...

详解Linux中的socket函数

2023年8月3日&#xff0c;周四下午 目录 函数原型参数domain参数type参数protocol举例说明参数type和参数protocol之间的关系 函数原型 #include <sys/socket.h>int socket(int domain, int type, int protocol);参数domain domain是“域”的意思&#xff0c;其值为AF…...

React Antd 实现表格合计功能

思路&#xff1a;首先拿到 表格数组对象&#xff0c;然后写一个工具类&#xff0c;然后向数组对象最后插入一条数据&#xff0c;这条数据的字段时根据表格数组里合计算出来的。 代码如下&#xff0c;需根据各自业务稍作改动&#xff1a; <Table dataSource{tableData}column…...

尝试一下Guava带返回值的多线程处理类ListenableFuture

文章目录 ListenableFuture&#xff0c;带返回值的Guava多线程处理工具类举个例子扩展阅读 最近在学习&#xff0c;Java实现异步编程的8种方式这篇博客的时候&#xff0c;没有找到比较好的一个学习demo&#xff0c;故在此整理一下。 ListenableFuture&#xff0c;带返回值的Gua…...

微信小程序真机调试报ERR_CERT_AUTHORITY_INVALID

微信小程序真机调试报ERR_CERT_AUTHORITY_INVALID 问题解决方法 问题 微信开发者工具中调试微信小程序&#xff0c;在开发工具里面调试没问题&#xff0c;但是真机调试的时候报ERR_CERT_AUTHORITY_INVALID错误 解决方法 到这个站点检查域名的Https证书的安全性 : 传送门(注:…...

JCommander + AutoService打造带子命令的Java命令行应用

文章目录 需求Java命令行工具库依赖库定义各个子命令主类CLI测试一下参考文档 需求 最近想将自己的一个Java应用包装成命令行工具&#xff0c;看了几个库&#xff0c;最后选取了JCommander&#xff0c;结合AutoService库&#xff0c;实现了带子命令的工具&#xff0c;方便扩展…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...