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

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

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

相关推荐
秃头佛爷31 分钟前
Python学习大纲总结及注意事项
开发语言·python·学习
待磨的钝刨32 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
XiaoLeisj2 小时前
【JavaEE初阶 — 多线程】单例模式 & 指令重排序问题
java·开发语言·java-ee
励志成为嵌入式工程师3 小时前
c语言简单编程练习9
c语言·开发语言·算法·vim
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
捕鲸叉4 小时前
创建线程时传递参数给线程
开发语言·c++·算法
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
A charmer4 小时前
【C++】vector 类深度解析:探索动态数组的奥秘
开发语言·c++·算法
Peter_chq4 小时前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app