【JavaScript 漫游】【044】Web Worker

夏日街道

文章简介

本篇文章为【JavaScript 漫游】专栏的第 044 篇文章,对浏览器模型的 Web Worker 相关知识点进行了总结。

概述

JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。

Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务可以交由 Worker 线程执行,主线程(通常负责 UI 交互)能够保持流畅,不会被阻塞或拖慢。

Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。但是,这也造成了 Worker 比较耗费资源,不应该过度使用,而且一旦使用完毕,就应该关闭。

Web Worker 有以下几个使用注意点。

同源限制

分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

DOM 限制

Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用 documentwindowparent 这些对象。但是,Worker 线程可以使用 navigator 对象和 location 对象。

全局对象限制

Worker 的全局对象 WorkerGlobalScope,不同于网页的全局对象 Window,很多接口拿不到。比如,理论上 Worker 线程不能使用 console.log,因为标准里面没有提到 Worker 的全局对象存在 console 接口,只定义了 Navigator 接口和 Location 接口。不过,浏览器实际上支持 Worker 线程使用 console.log,保险的做法还是不使用这个方法。

通信联系

Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。

脚本限制

Worker 线程不能执行 alert() 方法和 confirm() 方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

文件限制

Worker 线程无法读取本地文件,即不能打开本机的文件系统( file://),它所加载的脚本,必须来自网络。

基本用法

主线程

主线程采用 new 命令,调用 Worker() 构造函数,新建一个 Worker 线程。

var worker = new Worker('work.js');

Worker() 构造函数的参数是一个脚本文件,该文件就是 Worker 线程所要执行的任务。由于 Worker 不能读取本地文件,所以这个脚本必须来自网络。如果下载没有成功(比如404错误),Worker 就会默默地失败。

然后,主线程调用 worker.postMessage() 方法,向 Worker 发消息。

worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});

worker.postMessage() 的参数,就是主线程传给 Worker 的数据。它可以是各种数据类型,包括二进制数据。

接着,主线程通过 worker.onmessage 指定监听函数,接收子线程发回来的消息。

worker.onmessage = function (event) {doSomething(event.data);
}function doSomething() {// 执行任务worker.postMessage('Work done!');
}

上面代码中,事件对象的 data 属性可以获取 Worker 发来的数据。

Worker 完成任务以后,主线程就可以把它关掉。

worker.terminate();

Worker 线程

Worker 线程内部需要有一个监听函数,监听message事件。

self.addEventListener('message', function (e) {self.postMessage('You said: ' + e.data);
}, false);

上面代码中,self 代表子线程自身,即子线程的全局对象。因此,等同于下面两种写法。

// 写法一
this.addEventListener('message', function (e) {this.postMessage('You said: ' + e.data);
}, false);// 写法二
addEventListener('message', function (e) {postMessage('You said: ' + e.data);
}, false);

除了使用 self.addEventListener() 指定监听函数,也可以使用 self.onmessage 指定。监听函数的参数是一个事件对象,它的data 属性包含主线程发来的数据。self.postMessage() 方法用来向主线程发送消息。

根据主线程发来的数据,Worker 线程可以调用不同的方法。

self.addEventListener('message', function (e) {var data = e.data;switch (data.cmd) {case 'start':self.postMessage('WORKER STARTED: ' + data.msg);break;case 'stop':self.postMessage('WORKER STOPPED: ' + data.msg);self.close(); // Terminates the worker.break;default:self.postMessage('Unknown command: ' + data.msg);};
}, false);

Worker 加载脚本

Worker 内部如果要加载其他脚本,有一个专门的方法 importScripts()

importScripts('script1.js');

该方法可以同时加载多个脚本。

importScripts('script1.js', 'script2.js');

错误处理

主线程可以监听 Worker 是否发生错误。如果发生错误,Worker 会触发主线程的 error 事件。

worker.onerror(function (event) {console.log(['ERROR: Line ', event.lineno, ' in ', event.filename, ': ', event.message].join(''));
});// 或者
worker.addEventListener('error', function (event) {// ...
});

Worker 内部也可以监听 error 事件。

关闭 Worker

使用完毕,为了节省系统资源,必须关闭 Worker。

// 主线程
worker.terminate();// Worker 线程
self.close();

数据通信

主线程与 Worker 之间的通信内容,可以是文本,也可以是对象。需要注意的是,这种通信时拷贝关系,即是传值而不是传址,Worker 对通信内容的修改,不会影响到主线程。事实上,浏览器内部的运行机制是,先将通信内容串行化,然后把串行化后的字符串发给 Worker,后者再将它还原。

主线程与 Worker 之间也可以交换二进制数据,比如 File、Blob、ArrayBuffer 等类型,也可以在线程之间发送。

// 主线程
var uInt8Array = new Uint8Array(new ArrayBuffer(10));
for (var i = 0; i < uInt8Array.length; ++i) {uInt8Array[i] = i * 2; // [0, 2, 4, 6, 8,...]
}
worker.postMessage(uInt8Array);// Worker 线程
self.onmessage = function (e) {var uInt8Array = e.data;postMessage('Inside worker.js: uInt8Array.toString() = ' + uInt8Array.toString());postMessage('Inside worker.js: uInt8Array.byteLength = ' + uInt8Array.byteLength);
};

但是,拷贝方式发送二进制数据,会造成性能问题。比如,主线程向 Worker 发送一个 500MB 文件,默认情况下浏览器会生成一个原文件的拷贝。为了解决这个问题,JavaScript 允许主线程把二进制数据直接转移给子线程,但是一旦转移,主线程就无法再使用这些二进制数据了,这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法,叫做Transferable Objects。这使得主线程可以快速把数据交给 Worker,对于影像处理、声音处理、3D 运算等就非常方便了,不会产生性能负担。

如果要直接转移数据的控制权,就要使用下面的写法。

// Transferable Objects 格式
worker.postMessage(arrayBuffer, [arrayBuffer]);// 例子
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);

同页面的 Web Worker

通常情况下,Worker 载入的是一个单独的 JavaScript 脚本文件,但是也可以载入与主线程在同一个网页的代表。

<!DOCTYPE html><body><script id="worker" type="app/worker">addEventListener('message', function () {postMessage('some message');}, false);</script></body>
</html>

注意必须指定 <script> 标签的 type 属性是一个浏览器不认识的值。

然后,读取这一段嵌入页面的脚本,用 Worker 来处理。

var blob = new Blob([document.querySelector('#worker').textContent]);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);worker.onmessage = function (e) {// e.data === 'some message'
}

API

主线程

浏览器原生提供 Worker() 构造函数,用来供主线程生成 Worker 线程。

var myWorker = new Worker(jsUrl, options);

Worker() 构造函数,可以接受两个参数。第一个参数是脚本的网址(必须遵守同源政策),该参数是必需的,且只能加载 JS 脚本,否则会报错。第二个参数是配置对象,该对象可选。它的一个作用就是指定 Worker 的名称,用来区分多个 Worker 线程。

// 主线程
var myWorker = new Worker('worker.js', { name : 'myWorker' });// Worker 线程
self.name // myWorker

Worker() 构造函数返回一个 Worker 线程对象,用来供主线程操作 Worker。Worker 线程对象的属性和方法如下。

  • Worker.onerror:指定 error 事件的监听函数
  • Worker.onmessage:指定 message 事件的监听函数,发送过来的数据在 Event.data 属性中
  • Worker.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件
  • Worker.postMessage():向 Worker 线程发送消息
  • Worker.terminate():立即终止 Worker 线程

Worker 线程

Web Worker 有自己的全局对象,不是主线程的 window,而是一个专门为 Worker 定制的全局对象。因此定义在 window 上面的对象和方法不是全部都可以使用。

Worker 线程有一些自己的全局属性和方法。

  • self.name: Worker 的名字。该属性只读,由构造函数指定
  • self.onmessage:指定 message 事件的监听函数
  • self.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件
  • self.close():关闭 Worker 线程
  • self.postMessage():向产生这个 Worker 线程发送消息
  • self.importScripts():加载 JS 脚本

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

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

相关文章

MySQL 8.0.35 企业版开启审计audit log功能

一、系统环境和要求 在MySQL中&#xff0c;开启日志审计可以记录数据库的操作日志&#xff0c;包括修改、删除、插入等操作。这对于追踪和分析数据库的使用情况以及排查潜在的安全问题非常有帮助。本文将详细介绍如何开启MySQL的日志审计功能。 操作系统&#xff1a;Ubuntu 20…

人工智能 框架 paddlepaddle 飞桨 使用指南 使用例子 线性回归模型demo 1

安装过程&使用指南&线性回归模型 使用例子 本来预想 是安装 到 conda 版本的 11.7的 但是电脑没有gpu 所以 安装过程稍有变动,下面简单讲下 conda create -n paddle_env117 python=3.9 由于想安装11.7版本 py 是3.9 所以虚拟环境名称也是 paddle_env117 activa…

6 Spring-AOP

文章目录 1&#xff0c;AOP简介1.1 什么是AOP?1.2 AOP作用1.3 AOP核心概念 2&#xff0c;AOP入门案例2.1 需求分析2.2 思路分析2.3 环境准备2.4 AOP实现步骤步骤1:添加依赖步骤2:定义接口与实现类步骤3:定义通知类和通知步骤4:定义切入点步骤5:制作切面步骤6:将通知类配给容器…

常用设计模式介绍

前言 简说设计模式。 文章目录 前言一、设计模式的要素1、设计模式解决的问题2、设计模式分类1&#xff09;创建型设计模式2&#xff09;结构型设计模式3&#xff09;行为型设计模式 二、详细介绍1、创建型设计模式1&#xff09;工厂方法模式2&#xff09;抽象工厂模式3&#x…

基于FPGA的光纤通信系统设计

文章目录 光纤通信系统的组成发送端FPGA端口定义状态机设计代码示例 接收端功能模块端口定义状态机设计 光纤通信系统的组成 发送端FPGA 发送控制逻辑、数据编码、校验码生成、缓存控制、时钟控制 端口定义 状态机设计 代码示例 接收端功能模块 接收端控制逻辑、数据解码、…

谈谈伦敦银投资的价值吗?

白银作为贵金属家族中的一员&#xff0c;当然有着其自身的经济价值和投资价值&#xff0c;尤其是在通货膨胀或货币贬值的时候&#xff0c;伦敦银的价格往往会上涨&#xff0c;投资者参与其中就能起到保值增值的作用。 此外&#xff0c;白银还是一种很好的避险资产&#xff0c;…

港大新工作 HiGPT:一个模型,任意关系类型 !

论文标题&#xff1a; HiGPT: Heterogeneous Graph Language Model 论文链接&#xff1a; https://arxiv.org/abs/2402.16024 代码链接&#xff1a; https://github.com/HKUDS/HiGPT 项目网站&#xff1a; https://higpt-hku.github.io/ 1. 导读 异质图在各种领域&#xf…

Linux系统下安装部署Linux管理面板1panel

目录 一 1panel介绍 1、1Panel简介 2、1Panel特点 二、本地环境规划 1、本此实验目的 2、本地环境部署 三、部署1Panel&#xff08;在线安装&#xff09; 1.创建安装目录 2.一键部署1Panel 3.检查1Panel服务运行状态 4.检查1Panel监听端口 四、关闭防火墙和selinux…

zabbix进阶

知识点补充 zabbix server在主机上运行服务&#xff0c;端口号为10050&#xff0c;zabbix agent 在被监控机器上运行&#xff08;源码下载&#xff09;主要完成对cpu&#xff0c;磁盘的信息采集&#xff0c;端口号为10051 zabbix 软件结构组成&#xff1a; 1.Zabbix Web GUI …

leetcode 107.二叉树的层序遍历II

题目 思路 正常层序遍历输出&#xff1a; [[3],[9,20],[15,7]] 这道题要求的输出&#xff1a;[[15,7],[9,20],[3]] 可以观察到&#xff0c;只要我们把原来的结果reverse一下就行了。 代码 //leetcode submit region begin(Prohibit modification and deletion)import java…

HWY-41B无源静态电压继电器 整定范围19-240VAC导轨安装JOSEF约瑟

HWY-31A无辅源静态电压继电器 HWY-32A无辅源静态电压继电器 HWY-33A无辅源静态电压继电器 HWY-34A无辅源静态电压继电器 HWY-35A无辅源静态电压继电器 HWY-31B无辅源静态电压继电器 HWY-32B无辅源静态电压继电器 HWY-33B无辅源静态电压继电器 HWY-34B无辅源静态电压继电器 HW…

激活函数选得好,模型性能差不了!17个方法,让网络训练更高效

激活函数是神经网络中不可或缺的组成部分&#xff0c;它们通过引入非线性特性&#xff0c;增强了网络的表达能力和学习能力。常用的激活函数主要可以分为两大类&#xff1a;饱和激活函数、非饱和激活函数。其中sigmoid和tanh是饱和激活函数&#xff0c;而ReLU及其变体则是非饱和…

程序员35岁会失业吗?【来自主流AI的回答】

程序员35岁会失业吗&#xff1f; 35岁被认为是程序员职业生涯的分水岭&#xff0c;许多程序员开始担忧自己的职业发展是否会受到年龄的限制。有人担心随着年龄的增长&#xff0c;技术更新换代的速度会使得资深程序员难以跟上&#xff1b;而另一些人则认为&#xff0c;丰富的经…

图像变换(python)

前言 这个Python没学过&#xff0c;写的是真的不方便&#xff0c;有很多问题还没解决&#xff0c;暂时不想写了&#xff0c;感兴趣的同学可以完善一下。设计的思路就是摆几个控件然后将对应的函数实现&#xff0c;这个Python的坐标放置以及控件的大小我没弄懂&#xff0c;算出…

如何统计代码量

工具&#xff1a; cloc 下载地址&#xff1a; Releases AlDanial/cloc GitHub 使用方法&#xff1a;

武汉星起航:跨境电商行业的领军者,互帮互助共创佳绩

武汉星起航电子商务有限公司&#xff0c;作为跨境电商行业的领军者&#xff0c;以其出色的业绩和卓越的团队实力&#xff0c;在业内赢得了广泛的赞誉。公司自运营团队在亚马逊平台上成功开设了多家店铺&#xff0c;凭借着深耕跨境电商行业多年所积累的经验&#xff0c;取得了令…

使用mybatis-plus添加数据报错

1、报错问题 2、错误分析 无法配置数据库实体类的属性id&#xff0c;类型不匹配 3、解决分析 &#xff08;1&#xff09;数据库类型不匹配&#xff0c;先查看数据库数据类型是否有错误 数据库类型设计没有出现问题 &#xff08;2&#xff09;数据库没有问题就看实体类&#xf…

Xavier初始化方法

avier初始化方法是一种常用的神经网络参数初始化方法&#xff0c;旨在有效地初始化权重&#xff0c;以促进神经网络的训练。该方法的提出者是Xavier Glorot和Yoshua Bengio&#xff0c;因此得名为“Xavier”。 在深度学习中&#xff0c;参数初始化是至关重要的&#xff0c;因为…

tcp/ip是什么意思,tcp/ip协议包含哪几层

TCP/IP是一种网络通信协议&#xff0c;它是互联网所采用的基本协议。TCP/IP协议是由美国国防部高级研究计划局&#xff08;ARPA&#xff09;在上世纪70年代设计开发的&#xff0c;经过多年发展和完善&#xff0c;已成为全球范围内最重要的网络通信协议之一。 首先&#xff0c;让…

【CKA模拟题】Ingress新手必看,全面了解Ingress的基础操作

题干 For this question, please set this context (In exam, diff cluster name) kubectl config use-context kubernetes-adminkubernetesThere exists a deployment named nginx-deployment exposed through a service called nginx-service . Create an ingress resource…