Web Woeker和Shared Worker的使用以及案例

文章目录

  • 1、前言
  • 2、介绍 Web Worker
  • 3、使用须知及兼容性
    • 3.1、使用须知
    • 3.2、兼容性
  • 4、使用 Web Worker
    • 4.1、创建 Web Worker
    • 4.2、与主线程通信
    • 4.3、终止 Web Worker
    • 4.4、监听错误信息
  • 5、使用 Shared Worker
    • 4.5、调试 Shared Worker
  • 6、使用中的一些坑
    • 6.1、Web Woeker 中引入了其余文件
    • 6.2、在 WebPack 或 Vite 中使用
      • 6.2.1、webpack中使用
      • 5.2.2、vite中使用
    • 5.3、sharedWorker的引入问题
  • 7、后语

1、前言

最近做的项目出现了界面卡顿的问题,经过一番排查,发现是因为有个数据做了一些格式化和生成转换,本来只有 1000 条数据,处理完之后变成了 N 万条数据(业务需求),导致页面渲染很慢,甚至会崩溃。于是就想着优化一下。初始化的时候不加载,等需要的时候,再使用 Web Worker 来处理数据,避免主线程卡顿。

2、介绍 Web Worker

在介绍之前,先说一下Web Worker是为什么而诞生的。

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

Web Worker 的作用,就是为 JavaScript 创造多线程环境。它是 HTML5 标准的一部分,它赋予了开发者利用 JavaScript 操作多线程的能力。允许主线程创建 Worker 线程,将一些任务分配给 Worker 线程运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。

3、使用须知及兼容性

在使用 Worker 前,需要先了解一些规则和浏览器的兼容性,避免出现一些问题。

3.1、使用须知

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

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

  3. DOM 限制:Worker 线程所在的全局对象是 self,它与主线程不一样,无法读取主线程所在网页的 window,DOM,document,parent 等全局对象,但可以读取主线程的:navigator 和 location 对象。

  4. 脚本限制:Web Worker 中可以使用 XMLHttpRequest 和 Axios 发送请求。

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

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

3.2、兼容性

浏览器兼容性最低兼容版本
Chrome完全兼容4.0 (2008 年)
Firefox完全兼容3.5 (2009 年)
Safari完全兼容3.1 (2007 年)
Edge完全兼容79 (2020 年)
IE部分兼容10 (2012 年)
Opera完全兼容10.5 (2010 年)

4、使用 Web Worker

直接使用 JavaScript 原生的 Worker()构造函数,它的参数如下:

参数说明
path有效的 js 脚本的地址,必须遵守同源策略
options.type可选。用以指定 worker 类型。该值可以是 classic 或 module,默认 classic
options.credentials可选。指定 worker 凭证。该值可以是 omit, same-origin,或 include。如果未指定,或者 type 是 classic,将使用默认值 omit (不要求凭证)
options.name可选。在 DedicatedWorkerGlobalScope 的情况下,用来表示 worker 的 scope 的一个 DOMString 值,主要用于调试目的。

4.1、创建 Web Worker

主线程:

const myWorker = new Worker('/worker.js')// 接收消息
myWorker.addEventListener('message', (e) => {console.log(e.data)
})// 向 worker 线程发送消息
myWorker.postMessage('Greeting from Main.js')

4.2、与主线程通信

worker 线程:

// 接收到消息
self.addEventListener('message', (e) => {console.log(e.data)
})// 一顿计算后 发送消息
const calculateDataFn = () => {self.postMessage('ok')
}

4.3、终止 Web Worker

两个线程里都可以操作,自由选择。

  • 在主线程中操作:
// 创建worker
const myWorker = new Worker('/worker.js')
// 关闭worker
myWorker.terminate()
  • 在 worker 线程中操作:
self.close()

4.4、监听错误信息

Web Worker 提供了两个事件监听错误回调,error 和 messageerror。

事件描述
error当 worker 内部出现错误时触发
messageerror当 message 事件接收到无法被反序列化的参数时触发
  • 在主线程中操作:
// 创建worker
const myWorker = new Worker('/worker.js')myWorker.addEventListener('error', (err) => {console.log(err.message)
})myWorker.addEventListener('messageerror', (err) => {console.log(err.message)
})
  • 在 worker 线程:
self.addEventListener('error', (err) => {console.log(err.message)
})
self.addEventListener('messageerror', (err) => {console.log(err.message)
})

5、使用 Shared Worker

SharedWorker 允许多个页面共享同一个后台线程,从而实现更高效的资源利用和协同计算。如下,是一个例子,page1page2 共享一个后台线程:

  • sharedWorker.js
/*** @description 所有连接这个worker的集合*/
const portsList = []/*** @description 连接成功回调*/
self.onconnect = (event) => {// 当前触发连接的端口const port = event.ports[0]// 添加进去portsList.push(port)// 接收到消息的回调port.onmessage = (event) => {// 获取传递的消息const { message, value } = event.data// 计算let result = 0switch (message) {case 'add':result = value * 2breakcase 'multiply':result = value * valuebreakdefault:result = value}// 给所有连接的目标发送消息portsList.forEach((port) => port.postMessage(`${message}结果是:${result}`))}
}
  • sharedWorkerHook.js
const sharedWorker = new SharedWorker(new URL('../../utils/webworker.js', import.meta.url), 'test')export default sharedWorker
  • page1
<template><div @click="sendMessage">点击1</div>
</template><script>
import sharedWorkerHook from './sharedWorkerHook'export default {name: '',data() {return {}},computed: {},created() {},mounted() {sharedWorkerHook.port.start()// 接收SharedWorker返回的结果sharedWorkerHook.port.onmessage = event => {console.log(event.data)}},methods: {sendMessage() {sharedWorkerHook.port.postMessage({ message: 'add', value: 1 })}}
}
</script>
  • page2
<template><div @click="sendMessage">点击2</div>
</template><script>
import sharedWorkerHook from './sharedWorkerHook'export default {name: '',data() {return {}},computed: {},created() {},mounted() {sharedWorkerHook.port.start()// 接收SharedWorker返回的结果sharedWorkerHook.port.onmessage = event => {console.log(event.data)}},methods: {sendMessage() {sharedWorkerHook.port.postMessage({ message: 'multiply', value: 1 })}}
}
</script>

4.5、调试 Shared Worker

sharedWorker 中调试,使用 console 打印信息,不会出现在主线程的的控制台中,需要在 Chrome 浏览器地址栏输入 chrome://inspect/,进入调试面板才能看到,步骤如下:

  1. 在 Chrome 浏览器地址栏输入 chrome://inspect,并回车进入
  2. 左边菜单栏,点击 sharedWorker
  3. 右边菜单栏,点击 inspect,即可打开调试面板

调试 Shared Worker

6、使用中的一些坑

在使用中,虽然查阅了一些文档和博客,但是还是出现了以下问题,记录一下。

6.1、Web Woeker 中引入了其余文件

有一些场景,需要放到 worker 进程去处理的任务很复杂,就会引入其余文件,这时候,可以在worker线程中利用importScripts()方法加载我们需要的js文件

importScripts('./utils.js')

如果引入的是ESModule模式,需要在初始化的时候,指定type的模式。

const worker = new Worker('/worker.js', { type: 'module' })

6.2、在 WebPack 或 Vite 中使用

在webpack和vite中使用,步骤如下:

6.2.1、webpack中使用

第一步:安装插件:worker-plugin

npm install worker-plugin -D

第二步:在vue.config.js的configureWebpack.plugins中配置

const WorkerPlugin = require('worker-plugin')module.exports = {outputDir: 'dist',// 其余配置......configureWebpack: {devServer: {open: false,host: 'localhost',// 其余配置......},plugins: [// 其余配置......new WorkerPlugin()]}
}

第三步:使用

const webWorker = new Worker(new URL('../utils/worker.js', import.meta.url), {type: 'module'
})

5.2.2、vite中使用

第一步:安装插件:worker-plugin

npm install worker-plugin -D

第二步:在vite.config.js的plugins中配置

import worker from 'worker-plugin'const viteConfig = defineConfig((mode: ConfigEnv) => {return {plugins: [vue(), worker()],server: {host: '0.0.0.0',port: 7001,open: true}}
})export default viteConfig

第三步:使用

const webWorker = new Worker(new URL('../utils/worker.ts', import.meta.url), {type: 'module'
})

5.3、sharedWorker的引入问题

在使用sharedWorker的过程中,发现sharedWorker进程里,始终只有一个实例,但是我确实在几个页面都初始化了同一个sharedWorker的js文件,最后调试发现,原因是通过插件引入之后名字变了,一个是xxxx0.js,一个是xxxx1.js,所以导致我每次初始化的时候,都不认为是同一个实例,所以消息无法同步。

  • 解决办法:如[使用 Shared Worker](#5-使用 Shared Worker)里的例子一样,专门用一个文件new好这个sharedWorker,然后导出,在需要的页面导入后再执行即可。

7、后语

在本文中,我们学习了Web Worker的作用和使用方法,以及如何在Vue中使用Web Worker,最后,我们还学习了Shared Worker的使用方法。

其实webworker家族里还有一位更加强大的成员,那就是Service Worker。它可以做的东西很多,比如拦截全局的fetch事件、缓存静态资源/离线缓存用于首屏加载、后台同步,消息推送等等,奈何篇幅有限,下回再做讲解。


本次分享就到这儿啦,我是鹏多多,如果您看了觉得有帮助,欢迎评论,关注,点赞,转发,我们下次见~

往期文章

  • Vue2全家桶+Element搭建的PC端在线音乐网站
  • vue3+element-plus配置cdn
  • 助你上手Vue3全家桶之Vue3教程
  • 助你上手Vue3全家桶之VueX4教程
  • 助你上手Vue3全家桶之Vue-Router4教程
  • 超详细!Vue的九种通信方式
  • 超详细!Vuex手把手教程
  • 使用nvm管理node.js版本以及更换npm淘宝镜像源
  • vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
  • 超详细!Vue-Router手把手教程

个人主页

  • CSDN
  • GitHub
  • 简书
  • 博客园
  • 掘金

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

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

相关文章

古老的五子棋

午休忽然想起我奶奶喜欢下的一种古老的五子棋游戏&#xff0c;于是花了半小时开发出来了&#xff5e; 源代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" …

怎么监控钉钉聊天记录内容(监控钉钉聊天记录的3种形式)

企业沟通工具的普及&#xff0c;越来越多的企业开始使用钉钉作为内部沟通工具。然而&#xff0c;对于企业管理者来说&#xff0c;如何监控钉钉聊天记录内容成为了一个重要的问题。本文将介绍几种方法&#xff0c;帮助企业管理者实现监控钉钉聊天记录内容的目的。 一、钉钉自带功…

电商api数据采集分析(淘宝价格监控)

一、什么是淘宝商品数据采集&#xff1f; 淘宝商品数据采集&#xff0c;顾名思义&#xff0c;就是通过技术手段对全网电商平台上的商品价格信息进行抓取并保存。通过将收集到的这些价格信息进行分析处理后得到该商品的成交价、折扣率等关键属性指标&#xff0c;从而为卖家提供参…

系列十五、idea全局配置

一、全局Maven配置 IDEA启动页面>Customize>All settings>Build,Execution,Deployment>Build Tools>Maven 二、全局编码配置 IDEA启动页面>Customize>All settings>Editor>File Encodings 三、全局激活DevTools配置 IDEA启动页面>Customize>A…

[迁移学习]DA-DETR基于信息融合的自适应检测模型

原文标题为&#xff1a;DA-DETR: Domain Adaptive Detection Transformer with Information Fusion&#xff1b;发表于CVPR2023 一、概述 本文所描述的模型基于DETR&#xff0c;DETR网络是一种基于Transformer的目标检测网络&#xff0c;详细原理可以参见往期文章&#xff1a;…

如何用PHP获取各大电商平台的数据

PHP获取API数据是指使用PHP语言从web服务中提取数据。API是指应用程序接口&#xff0c;它允许应用程序之间进行交互和通信&#xff0c;并且允许一个应用程序从另一个应用程序获取数据。PHP是一种网站开发语言&#xff0c;它可以使用多种方式来获取API数据。 在PHP中&#xff0…

前端基础之BOM和DOM

目录 一、前戏 window对象 window的子对象 navigator对象&#xff08;了解即可&#xff09; screen对象&#xff08;了解即可&#xff09; history对象&#xff08;了解即可&#xff09; location对象 弹出框 计时相关 二、DOM HTML DOM 树 查找标签 直接查找 间…

Python安装教程

1 安装python环境 1.1 下载python 首先打开http://www.python.org &#xff08;这个是python官网&#xff09;下载配置环境。点击上方 downloads,选择对应的系统的版本就行&#xff0c;这里以windows64系统为例。 点击之后&#xff0c;可以看到很多版本&#xff0c;这里我选择…

创建超过1G内存大小的程序

正常情况一个进程最大占用内存为1G一下&#xff0c;如果程序有需求要使用超过1G大小的程序&#xff0c;可进行如下操作 VS修改设置&#xff1a;属性--->链接器--->系统--->启用大地址 【选择是】 测试申请堆内存代码 #include <stdlib.h> #include <stdio…

在NISQ小型计算机上执行大型并行量子计算的可能性

简介 Steve White提出了密度矩阵重整化群&#xff08;DMRG&#xff09;的基本思想&#xff0c;即纠缠是一种有价值的资源&#xff0c;可以用来精确或近似地描述大量子系统。后来&#xff0c;这一思想被理解为优化矩阵积状态&#xff08;MPS&#xff09;的算法&#xff0c;支持…

【测试工具合集1】

&#x1f33f; 一、TestAppForlOS TestAppForlOS是一款运行在iOS系统上的测试应用程序。它可以用来测试iOS设备的硬件和软件性能&#xff0c;以及验证应用程序的兼容性和稳定性。该应用程序提供了多种测试工具&#xff0c;包括CPU、内存、存储器、网络等性能测试&#xff0c;同…

uniApp开发注意要点提炼-xyphf

我们在使用uniApp开发的时候&#xff0c;很多朋友由于对多端兼容性的不了解&#xff0c;结果在多端编译的时候经常出这样或者那样的问题&#xff0c;而不断的说uniApp这坑那坑的&#xff0c;下面我基于自身经验和官网说明提炼一些常见的注意要点。 因为很多公司时常初衷是开发一…

面试--并发多线程基础

1、线程池的理解 线程池就是要达到线程复用的目的&#xff0c;对线程的创建和消耗会涉及到cpu上下文切换、内存分配等&#xff0c;会带来性能的消耗&#xff1b;提高响应速度&#xff0c;任务到达时&#xff0c;任务可以不需要等到线程创建就能立即执行&#xff1b;提高线程的…

“ Mac ” PK “ window ” 系统,谁才是赢家

一、快速了解 Mac 系统和 window 系统 Mac 系统和 window 系统是由两家不同的互联网公司开发。Mac 系统是 1984 年苹果公司主持开发的系统软件主要服务于苹果公司旗下的电子产品&#xff0c;适用的设备类型有&#xff1a;Macintosh、Power Macintosh、 Power Mac G3 、Power …

【Java】Java中的引用类型

强引用&#xff08;StrongReference&#xff09; 通过new直接创建的对象&#xff0c;只要该对象还可以被其它对象使用或访问到&#xff0c;就不会被回收 软引用&#xff08;SoftReference&#xff09; 引用一个对象&#xff0c;该对象在系统内存溢出不足时&#xff0c;会自动…

有了 GPT,还需要付费咨询吗?

之前写过一篇文章《在创业公司&#xff0c;我靠它续命 …》&#xff0c;提到现在写代码基本靠 GPT。现在这种状况不仅没有改变&#xff0c;反而依赖更深。公司立项开发产品的 Linux 版本&#xff0c;全靠我一个人。我之前虽然一直使用 Linux 开发环境&#xff0c;对 Linux 系统…

21.13 Python 实现端口流量转发

端口流量转发&#xff08;Port Forwarding&#xff09;是一种网络通信技术&#xff0c;用于将特定的网络流量从一个端口或网络地址转发到另一个端口或地址。它在网络中扮演着一个非常重要的角色&#xff0c;在Python语言中实现端口转发非常容易。 如下这段代码实现了一个基本的…

Linux -------------------设置防火墙和SELinux

&#xff08;一&#xff09;防火墙概述 防火墙的概念&#xff1a;防火墙是一种非常重要的网络安全工具&#xff0c;它是网络安全的重要组成部分&#xff0c;用于保护计算机网络免受未经授权的访问、恶意攻击和数据泄漏等威胁等。 防火墙的特点 防火墙通常具备以下几个特点。 …

【C语言】备战校赛Day1

日期:11.1 星期二 L1-001 Hello World 题目描述 这道超级简单的题目没有任何输入。 你只需要在一行中输出著名短句“Hello World!”就可以了。 输入样例: 无 输出样例: Hello World! 解题代码 int main() {printf("Hello World!");return 0; } 该题较为简单,但要注…

基于Tensorflow卷积神经网络玉米病害识别系统(UI界面)

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 Tensorflow是一个流行的机器学习框架&#xff0c;可用于训练和部署各种人工智能模型。玉米病害识别系统基于Tensorf…