Web Worker 学习及使用

了解什么是 Web Worker

提供了可以在后台线程中运行 js 的方法。可以不占用主线程，不干扰用户界面，可以用来执行复杂、耗时的任务。

在worker中运行的是另一个全局上下文，不能直接获取 Window 全局对象。不同的 worker 可以分为专用和共享，专用 worker 仅在单一脚本中被使用，它的上下文对象是DedicatedWorkerGlobalScope；共享 worker 可以同时被多个脚本占用，它的上下文对象是SharedWorkerGlobalScope

在Worker中可以使用什么，不可以使用什么，只要不影响主线程，就可以使用。

  • 不能直接操作 DOM
  • 不能访问 Window 对象的默认方法和属性
  • 可以访问并使用 Window 下的其他 API 对象，比如：websocket、indexDB、Navigator、XMLHttpRequest 等

worker和主线程之间通过postMessage发送消息，使用onmessage事件来监听收到的消息。交互过程中的数据是被复制传输的。

检测当前浏览器环境中是否支持worker。

if (window.Worker) {
  // ...
}

测试生成大量的数据并排序,模拟耗时的任务。

console.log("执行任务1");
let start = performance.now();

let arr = [];
for (let i = 0; i < 1000000; i++) {
  let num = Math.random() * 10000;
  arr.push(num);
}
arr.sort();

let end = performance.now();

console.log("耗时-----", end - start);

console.log("执行任务2");

在这里插入图片描述

任务 2 被中间的耗时任务占用了主线程，等待耗时任务执行完才去执行。这样就造成了任务 2 的延后，得不到任务 2 的及时响应反馈。我们使用 worker 来解决，将这种任务放到其他线程去执行，最后只需要拿到结果就行。

专用Worker

创建一个work.js，将耗时任务放到这个 js 中。并通过postMessage向主线程发送消息。

// ...耗时任务

postMessage(arr);

在主线程中调用 work.js,并接收来自 work 的数据。

console.log("执行任务1");

let work = new Worker("./work.js");
work.onmessage = (e) => {
  // ...
  console.log("来自worker的数据：", e.data.length);
};

console.log("执行任务2");

在这里插入图片描述

放入Worker的耗时任务不会影响主线程其他任务执行，可以看到任务 1/2 很快执行完。主线程接收来自 worker 的数据，本质意义是让这些任务不要在主线程中执行，那么前端采用worker增加线程去执行,也可以直接将任务甩给后台去执行，在通过接口拿到结果。

worker 执行完毕后，如不使用则可以主动关闭。通过worker.terminate()调用方法终止线程，方法调用不会等待 worker 完成它剩余的任务。

错误处理，通过监听onerror监听 worker 运行中的错误.

错误事件参数包含：

  • message 错误消息
  • filename 发生错误的脚本文件
  • lineno 发生错误所在脚本文件的代码位置

如果 worker 接收到一条无法被反序列化的消息时，将在对象上触发messageerror事件。

所有的事件也可以通过对象方法addEventListener去监听。

嵌套Worker

在一个 worker 中仍然可以调用另一个 worker。子 worker 解析的 URI 是相对父 worker 的地址而不是自身地址；它们必须托管在同源的父页面内。

创建一个subWorker.js，加入同样的代码，在worker.js中调用

// sub worker
let worker = new Worker("./subWork.js");

let start = performance.now();
// ... 耗时任务
let end = performance.now();

console.log("耗时-----", end - start);
worker.onmessage = (e) => {
  console.log("sub worker数据：", e.data.length);
};

postMessage(arr);

在父 worker 中的耗时任务则会堵塞后续代码的执行，导致实际上子 worker 可能已经执行完了，但由于worker.onmessage在后面执行，导致迟迟拿不到结果，这就需要对于复杂并行的任务需要有一个很好的调度，以便更快拿到不受其他任务影响的当前任务的执行结果。

加载脚本

在 worker 中通过importScripts来加载第三方脚本，它可以接受多个参数来引入多个资源。

浏览器会并行列加载每一个脚本，每个脚本中的全局对象可以被 worker 使用。如果脚本加载失败，则抛出异常，停止后面代码的执行。importScripts 会等待所有脚本加载执行完毕才会继续执行，

可以利用 worker 加载前端的一些资源然后利用浏览器的缓存，主线程再去请求加载时则可以直接使用缓存。从而加快主线程的页面渲染；

我们提供一个utils.js函数，在work.js中加载后调用里面的方法

importScripts("./utils.js");

// ...

postMessage(add(2, 3));

在成功加载utils.js后，worker 就可以使用add()方法了。importScripts 加载的脚本是同步执行的，因此可以放心使用。

共享Worker

可以被多个脚本使用，即使这些脚本是被不同的 window、iframe 或者作为子 worker 访问。共享的 worker 必须是同源的，不能跨域。

共享 worker 一个最大的区别就是与脚本之间的通信必须通过port属性，它是一个确切打开的端口供脚本与 worker 通信，这在专用 worker 是隐形的。

通过SharedWorker来创建共享 worker,我们在创建一个 htmltest.html,和之前的index.html一样，让它们共享work.js

在页面中，重新创建共享 worker 加载 share-worker.js

console.log("执行任务1");

let work = new SharedWorker("./share-worker.js");
work.port.onmessage = (e) => {
  // ...
  console.log("来自worker的数据：", e.data.length);
};

console.log("执行任务2");

然后在share-worker.js中发送数据

// ...

onconnect = (e) => {
  const port = e.ports[0];

  port.postMessage(e);
};

结构化克隆算法

worker 在于脚本通信的时候，数据值复制的，而不是共享的。这里是用到了结构化克隆算法，有几个注意的地方：

  1. Function 不能被克隆，会抛出DATA_CLONE_ERR异常
  2. DOM 节点不被允许克隆，抛出异常
  3. 对象的某些参数不被保留，比如：RegExp 对象的 lastIndex 字段不会被保留；属性描述符；原型链上的属性

全局的structuredClone()使用了结构化算法克隆对象，它是一种深拷贝，而且它还支持把可转移对象转移到新对象。就是将可转移对象与原对象分离，然后附加到新对象上。

可转移对象：ArrayBuffer \ MessagePort \ ReadableStream \ WritableStream \ TransformStream \ AudioData \ ImageBitmap \ VideoFrame \ OffscreenCanvas \ RTCDataChannel

里面就ArrayBuffer使用过，其他都没用过，做一个测试

let buffer = new ArrayBuffer(8);
console.log("buffer:", buffer.byteLength);

// 普通克隆
let newBuffer = structuredClone(buffer);
console.log("buffer:", buffer.byteLength, "newBuffer:", newBuffer.byteLength);

这时仅是数据的复制，原对象buffer的长度还在。使用对象转移拷贝：

let newBuffer = structuredClone(buffer, { transfer: [buffer] });

原对象还可以访问，只是分配占用的内存没有了，它已经转移给新对象了。structuredClone还可以处理循环引用

在这里插入图片描述

所以在 worker 之间传输可转移对象，效率是非常快的。当然这样就导致在主线程中不能再使用原始对象访问数据。

需要在脚本和 worker 之间转移对象，需要增加postMessage第二个参数：数组列出需要转移的对象

// ... 脚本其他任务
work.postMessage(buffer, [buffer]);

Worker API

创建Worker时，除了第一个参数为脚本的 URL，还接受第二个参数options，包含：

  • type worker 类型，默认classic,可指定module
  • credentials 凭证，可以是omit \ same-origin \ include,未制定默认是omit(不要求凭证)
  • name worker 名称，用于调试。

在Worker中有自己的全局作用域，通过self访问，专用 worker 为DedicatedWorkerGlobalScope,包含了全局函数、命名空间以及构造器。除了name属性其余都继承于WorkerGlobalScope

  • name 创建 worker 时设置的名称。
  • console 返回与当前 worker 相关联的 Console
  • location 返回与当前 worker 相关联的WorkerLocation(是浏览器 Location 的子级，适配了 worker)
  • navigator返回与当前 worker 相关联的WorkerNavigator(是浏览器 Navigator 的子级，适配了 worker)
  • performance 返回与当前 worker 相关联的 performance

实现了来自WindowTimers \ WindowBase64的方法，可以使用atob \ btoa \ setInterval \ setTimeout方法等。

共享 worker 的全局对象为SharedWorkerGlobalScope,它也是继承自WorkerGlobalScope

其他类型的Worker

除了Worker，还有其他的一些 workder。

Service Worker可作为代理服务器，目的是创建有效的离线体验，可以拦截网络请求、缓存网路资源，并根据网络采取合适的行动，比如导航到不同的服务器。结合Push API可以实现离线消息推送,即使用户没有打开当前应用，也能及时收到消息。

Audio Worklet 用于处理音频数据，它允许开发者在音频工作线程中运行 JavaScript 代码。实时音频效果处理，合成器等

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

FreeCAD中事务机制实现原理分析

FreeCAD中事务机制实现原理分析

1.基本实现思路 实现一个文件的撤销重做最简单的思想就是&#xff0c;在每个撤销重做节点处保存一份文件的内容&#xff0c;撤销重做时&#xff0c;分别替换对应节点处的文件内容即可。这种做法开销太大&#xff0c;每个节点处都需要保存一份完整的文档内容&#xff0c;每次撤…
阅读更多...
fastapi+vue3+primeflex前后端分离开发项目第一个程序

fastapi+vue3+primeflex前后端分离开发项目第一个程序

安装axios axios是用来请求后端接口的。 https://www.axios-http.cn/docs/intro pnpm 是一个前端的包管理工具&#xff0c;当我们需要给前端项目添加新的依赖的时候&#xff0c;就可以使用pnpm install 命令进行安装。 pnpm install axios安装 primeflex primeflex是一个cs…
阅读更多...
十大经典排序算法——插入排序与希尔排序(超详解)

十大经典排序算法——插入排序与希尔排序(超详解)

一、插入排序 1.基本思想 直接插入排序是一种简单的插入排序法&#xff0c;基本思想是&#xff1a;把待排序的记录按其数值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到一个新的有序序列。 2.直接插入排序 当插入第 e…
阅读更多...
（八）ReactHooks使用规则

（八）ReactHooks使用规则

ReactHooks使用规则 只能在组件中或者其他自定义Hook函数中使用只能在组件的顶层调用&#xff0c;不能嵌套在if、for、其他函数中
阅读更多...
模拟原神圣遗物系统-小森设计项目，设计圣遗物词条基类

模拟原神圣遗物系统-小森设计项目，设计圣遗物词条基类

项目分析 首先需要理解圣遗物的方方面面 比如说圣遗物主词条部分和副词条部分都有那些特点 稍等一会&#xff1a;原神&#xff0c;启动&#xff01; 在此说明了什么&#xff1f; 这是完全体 &#xff1a;主副 词条都有 如果 升级直接暴击率 那么就留点 或者是另外的元素充能 …
阅读更多...
如何自制一个Spring Boot Starter并推送到远端公服

如何自制一个Spring Boot Starter并推送到远端公服

在现代Java开发中&#xff0c;Spring Boot无疑是一个强大且便捷的框架&#xff0c;它通过提供大量的Starter来简化依赖管理和项目配置。有时&#xff0c;我们可能需要为特定功能或团队定制Starter。本文将指导你如何创建自己的Spring Boot Starter并将其推送到远程公共服务器上…
阅读更多...
[SAP ABAP] 运算符与操作符

[SAP ABAP] 运算符与操作符

1.算数运算符 算术运算符描述加法-减法*乘法/除法MOD取余 示例1 输出结果: 输出结果: 2.比较运算符 比较运算符描述示例 等于 A B A EQ B <> 不等于 A <> B A NE B >大于 A > B A GT B <小于 A < B A LT B >大于或等于 A > B A GE B <小…
阅读更多...
33 - 连续出现的数字（高频 SQL 50 题基础版)

33 - 连续出现的数字（高频 SQL 50 题基础版)

33 - 连续出现的数字 -- 开窗函数lead(col,n) 统计窗口内往下第n行值 -- over(partition by xxx) 按照xxx所有行进行分组 -- over(partition by xxx order by aaa) 按照xxx分组&#xff0c;按照aaa排序select distinct num as ConsecutiveNums from(select num,# 从当前记录获…
阅读更多...
Mac M3 Pro 安装 Zookeeper-3.4.6

Mac M3 Pro 安装 Zookeeper-3.4.6

1、下载安装包 官方下载地址&#xff1a;https://archive.apache.org/dist/zookeeper/ 网盘下载地址&#xff1a;https://pan.baidu.com/s/1j6iy5bZkrY-GKGItenRB2w?pwdirrx 提取码: irrx 2、解压并添加环境变量 # 将安装包移动到目标目录 mv ~/Download/zookeeper-3.4.6.…
阅读更多...
回归预测 | Matlab实现NGO-HKELM北方苍鹰算法优化混合核极限学习机多变量回归预测

回归预测 | Matlab实现NGO-HKELM北方苍鹰算法优化混合核极限学习机多变量回归预测

回归预测 | Matlab实现NGO-HKELM北方苍鹰算法优化混合核极限学习机多变量回归预测 目录 回归预测 | Matlab实现NGO-HKELM北方苍鹰算法优化混合核极限学习机多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现NGO-HKELM北方苍鹰算法优化混合核极限…
阅读更多...
elementui表格el-table最右侧操作列展示不完全

elementui表格el-table最右侧操作列展示不完全

解决方法 .el-table__fixed,.el-table__fixed-right{height:100% !important;}
阅读更多...
C++继承与多态—多重继承的那些坑该怎么填

C++继承与多态—多重继承的那些坑该怎么填

课程总目录 文章目录 一、虚基类和虚继承二、菱形继承的问题 一、虚基类和虚继承 虚基类&#xff1a;被虚继承的类&#xff0c;就称为虚基类 virtual作用&#xff1a; virtual修饰成员方法是虚函数可以修饰继承方式&#xff0c;是虚继承&#xff0c;被虚继承的类就称为虚基类…
阅读更多...
MySQL学习笔记-进阶篇-视图和存储过程

MySQL学习笔记-进阶篇-视图和存储过程

四、视图和存储过程 视图 存储过程 基本语法 创建 CREATE PROCEDURE ([参数列表]) BEGIN --SQL END; 调用 CALL 存储过程名&#xff08;[参数列表]&#xff09; 查看 --查看指定数据库的存储过程及状态信息 SELECT * FROM INFORMATION_SCHEMA.ROUTINES WHERE ROUTINE_SHCEMA…
阅读更多...
【网络安全的神秘世界】关于Linux中一些好玩的字符游戏

【网络安全的神秘世界】关于Linux中一些好玩的字符游戏

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 佛祖保佑 把 motd 通过xtp拖到Linux中 liyangUbuntu2204:~$ cp motd /etc/motd #一定要放在etc下 liyangUbuntu2204:~$ exi…
阅读更多...
90 Realistic Arctic Environment Textures snow（90+种逼真的北极环境纹理--雪、冰及更多）

90 Realistic Arctic Environment Textures snow（90+种逼真的北极环境纹理--雪、冰及更多）

一组90多个逼真的雪、冰、雪地岩石和其他被雪覆盖的地面纹理，供在雪地环境中使用。每个纹理都是可贴的/无缝的，并且完全兼容各种不同的场景--标准的Unity地形、Unity标准着色器、URP、HDRP等等都兼容。 所有的纹理都是4096x4096，并包括一个HDRP掩码，以完全支持HDRP。 特点。…
阅读更多...
Web项目部署后浏览器刷新返回Nginx的404错误对应解决方案

Web项目部署后浏览器刷新返回Nginx的404错误对应解决方案

data: 2024/6/22 16:05:34 周六 limou3434 叠甲&#xff1a;以下文章主要是依靠我的实际编码学习中总结出来的经验之谈&#xff0c;求逻辑自洽&#xff0c;不能百分百保证正确&#xff0c;有错误、未定义、不合适的内容请尽情指出&#xff01; 文章目录 1.源头2.排错3.原因4.解…
阅读更多...
MSPM0G3507——特殊的串口0

MSPM0G3507——特殊的串口0

在烧录器中有串口0&#xff0c;默认也是串口0通过烧录线给电脑发数据。 如果要改变&#xff0c;需要变一下LP上的跳线帽。 需要更改如下位置的跳线帽
阅读更多...
fastapi+vue3+primeflex前后端分离开发项目环境搭建

fastapi+vue3+primeflex前后端分离开发项目环境搭建

创建后端项目 创建文件夹&#xff1a; mkdir backend创建python虚拟环境&#xff1a; python -m venv venv使用Pycharm打开文件夹&#xff0c;然后配置python解释器为venv虚拟环境。 安装fastapi&#xff1a; pip install "fastapi[all]"编写第一个程序&#xf…
阅读更多...
Vue56-组件的自定义事件

Vue56-组件的自定义事件

一、什么是自定义事件 二、子组件—【传值】—>父组件 2-1、prop属性 2-2、自定义事件 v-on在谁身上&#xff0c;就给谁绑定事件&#xff01; 给谁绑定的事件&#xff0c;想触发就找谁&#xff01; 2-3、prop属性VS自定义属性 2-4、简写形式 2-5、ref属性实现 加了ref属性…
阅读更多...
华为---- RIP路由协议基本配置

华为---- RIP路由协议基本配置

08、RIP 8.1 RIP路由协议基本配置 8.1.1 原理概述 RIP(Routing Information Protocol,路由协议)作为最早的距离矢量IP路由协议&#xff0c;也是最先得到广泛使用的一种路由协议&#xff0c;采用了Bellman-Ford算法&#xff0c;其最大的特点就是配置简单。 RIP协议要求网络中…
阅读更多...
最新文章

Copyright @ 2022~2023