JavaScript 了解专用工作者线程

目录

  • 一、何为专用工作者线程
  • 二、专用工作者线程的全局对象
  • 三、创建专用工作者线程的方法
  • 四、专用工作者线程特点
  • END

一、何为专用工作者线程

最简单的WEB工作者线程,执行在页面加载外的其他任意如网络请求,繁杂计算操作并可以与页面通信.


二、专用工作者线程的全局对象

专用工作者线程内部,全局作用域是类DedicatedWorkerGlobalScope的实例, 其为WorkerGlobalScope的后代,所以也包含其父类工作者线程共有的属性和方法.

专用工作者线程的全局增加了其特有的属性:

复制代码
name: 提供给Worker构造函数一个可选字符串标识符

postMessage(): 此用于从专用工作者线程向父上下文通信与父上下文worker对象向专用工作者线程通信. 

close(): 与terminate()对应的方法, 立即终止工作者线程且不提供清理机会. 

importScripts(): 向工作者线程导入任意数量的脚本.

三、创建专用工作者线程的方法

worker构造函数接收两个参数,第一个为专用工作者线程所在的文件路径,第二个参数为可选的配置对象, 配置对象内支持下列属性:

复制代码
name: 可在工作者线程中通过 self.name访问的字符串标识符.

type: 加载脚体的运行方式,可用值"classic"或"Module",分别对应常规执行/视作module执行.

credentials: type为"module"时指定用于获取&传输凭证数据相关的工作者线程模块脚本.可用值:"omit","same-origin","include",type为"classic"时,值默认"omit".

工作者线程并非只能在另一个js文件中创建,在行内创建工作者线程也可行,核心是利用Blob和URL生成对象URL作为Worker的参数.

这种方法下,工作者线程能够更快地初始化,因为节省了网络延迟:

javascript 复制代码
const workerScript=` self.onmessage = ({data}) =>{ 
console.log(data); 
}`;
const workerScriptBlob = new Blob([workerScript]);
const workerScriptBlobURL= URL.creatObjectURL(workerScript Blob); 
const worker = new Worker(worker ScriptBlobURL);
worker.postMessage('blobWorkerScript');

在此基础上改进,利用函数序列化来初始化行内脚本:用函数的toString()方法返回函数代码的字符串:

javascript 复制代码
function fibonacci(n){
  return < 1 ? 0 : n <= 2 ? 1 : fibonacci(n - 1) + fibonacci(n - 2);
}
const workerScript = `self.postMessage(${fibonacci.toString ( )})(9));`;
const worker = new Worker(URL.createObjectURL(newworkerScript Blob([workerScript])));
worker.onmessage = ({data}) => {
  console.log(data);  //34
}

函数序列化后传给专用工作者线程调用,执行结果发回主线程.

所有计算函数体内在工作线完成,不影响父上下文性能.但发送到工作者线程执行的函数体内不能存在在工作者线程内获取不到的值如window, 这是一个作用域问题.


四、专用工作者线程特点

虽然下载脚本不按次序进行,但专用工作者线程中有选择性有顺序的执行脚本,类似于用<script>引入.

工作者线程中通过importScripts()方法可请求来自任何源的脚本,参数接受任意数量脚本路径, 其仅能在工作者线程中使用,以下说明以上两点:

javascript 复制代码
// main.js:
const worker = new Worker('./worker.js'); 
// worker.js. 
console.log('worker.js');
importScripts ('./scriptA.js'); importScripts('./scriptB.js');
// worker.js
// scriptA.js
// scriptB.js

观察顺序.

且importScripts()引入同一线程的所有脚本会在同一作用域,以下说明这点:

javascript 复制代码
// main.js
const worker = new Worker('./ worker.js', { name : 'foo' });
// worker.js
const globalToken = 'bar'; 
importScrpts('./scriptA.js');
// scriptA.js
console.log(self.name);

END

下篇会是专用工作者线程使用相关.

如有疏漏,请为我指正,谢谢.

相关推荐
翔云 OCR API14 分钟前
人脸识别API开发者对接代码示例
开发语言·人工智能·python·计算机视觉·ocr
V***u45335 分钟前
MS SQL Server partition by 函数实战二 编排考场人员
java·服务器·开发语言
ttod_qzstudio1 小时前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
这是程序猿1 小时前
基于java的ssm框架旅游在线平台
java·开发语言·spring boot·spring·旅游·旅游在线平台
芳草萋萋鹦鹉洲哦1 小时前
【elemen/js】阻塞UI线程导致的开关卡顿如何优化
开发语言·javascript·ui
爱学习的小邓同学1 小时前
C++ --- 多态
开发语言·c++
颜*鸣&空1 小时前
QT实现串口通信+VSPD+串口调试工具
开发语言·qt
_大龄1 小时前
前端解析excel
前端·excel
1***s6321 小时前
Vue图像处理开发
javascript·vue.js·ecmascript
槁***耿2 小时前
JavaScript在Node.js中的事件发射器
开发语言·javascript·node.js