当前位置: 首页 > news >正文

Web Worker的使用

Web Worker

  • 前言
  • 一、Web Worker是什么?
  • 二、使用步骤
    • 2.1 创建 Web Worker
    • 2.2 监听消息
    • 2.3 发送消息
  • 三、优点与缺点
    • 3.1 优点
    • 3.2 缺点
  • 四、Vue中使用Web Worker


前言

JavaScript采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。每个任务将按顺序运行;必须先完成一项任务,然后才能开始下一项任务。

Web Worker的出现,就是给js创建多线程的环境。这样,一些高延时的任务,就可以交给webworker去执行,主线程负责UI交互,这样主线程就不会被阻塞。


一、Web Worker是什么?

Web Worker 是一种在后台运行的 JavaScript 脚本,它可以在独立的线程中执行任务,而不会阻塞主线程的执行。这使得 Web Worker 特别适用于处理一些耗时的计算、数据处理或其他需要长时间运行的任务。

兼容性:ie11测过了,可以支持。

二、使用步骤

2.1 创建 Web Worker

通过创建一个新的 Worker 对象,可以将脚本文件加载到后台线程中运行。

var worker = new Worker('./worker.js');
var worker1 = new Worker('./worker1.js');

2.2 监听消息

Web Worker 可以通过 onmessage 事件监听主线程发送过来的消息。

第一步和这一步都是在html文件中

worker.onmessage = e => {console.log(e.data)
}
worker1.onmessage = e => {console.log(e.data)
}

2.3 发送消息

Web Worker 可以使用 postMessage 方法向主线程发送消息。

单独创建的一个js文件处理数据

self.postMessage(res)

文件目录

html文件
在这里插入图片描述
js文件
在这里插入图片描述
看运行结果

可以看出来这个是个异步的,哪个js先执行完,就先打印出来。两个js文件互不影响。
在这里插入图片描述

三、优点与缺点

3.1 优点

  • 提高页面性能:Web Worker 可以在后台线程中执行一些计算密集型或者耗时的操作,如数据处理、图像处理等,而不会占用主线程,从而避免了页面卡顿或者卡死的情况,提高了页面的性能和响应速度。

  • 可以处理大规模数据:Web Worker 可以处理大规模的数据,因为它们在单独的线程中运行,不会影响主线程的运行,可以更高效地处理大规模的数据,提高了代码的效率和可扩展性。

  • 可以使代码更加模块化:使用 Web Worker,可以将代码分割成多个模块,分别运行在不同的线程中,从而使得代码更加模块化,可维护性和可读性更强。

  • 支持多线程:Web Worker 支持多线程,因此可以利用多核处理器的优势,提高代码的运行效率。

3.2 缺点

  • 无法直接访问 DOM:由于 Web Worker 运行在独立的线程中,不能直接访问主线程中的 DOM,因此需要使用特殊的方式进行通信,如 postMessage() 方法。

  • 无法访问主线程中的 JavaScript 对象:Web Worker 独立运行在一个线程中,无法直接访问主线程中的 JavaScript 对象,需要使用序列化和反序列化等技术进行数据传递。

  • 无法加载本地文件:Web Worker 只能通过网络加载 JavaScript 文件,无法直接加载本地文件。

  • 无法执行同步操作:Web Worker 无法执行同步操作,如读取文件或等待用户的输入等,因为同步操作会阻塞 Web Worker 的线程。

  • 不支持所有浏览器:Web Worker 不是所有浏览器都支持,尤其是一些旧版的浏览器可能不支持 Web Worker。

四、Vue中使用Web Worker

1. 我的是vue-cli3,在vue.config.js中配置

chainWebpack: (config) => {config.module.rule('worker-loader').test(/\.worker\.js$/).use({loader: 'worker-loader',options: {inline: true,},}).loader('worker-loader').end()
}

在这里插入图片描述

2.创建worker.js文件

在src文件下创建worker文件夹,里面创建worker.js文件
在这里插入图片描述
worker.js文件内容

let date = []addEventListener('message', function () {fib()
}, false)function fib() {setInterval(() => {var res = Math.random() * 10date.push(res.toFixed(3))self.postMessage(date)}, 1000)
}

3.在vue中使用worker.js文件

<script>
import Worker from 'worker-loader!@/workers/worker'
export default {mounted() {let worker = new Worker()worker.postMessage(10)worker.onmessage = (event) => {console.log('res', event.data) }},
}
</script>

最后看控制台
在这里插入图片描述


相关文章:

Web Worker的使用

Web Worker 前言一、Web Worker是什么&#xff1f;二、使用步骤2.1 创建 Web Worker2.2 监听消息2.3 发送消息 三、优点与缺点3.1 优点3.2 缺点 四、Vue中使用Web Worker 前言 JavaScript采用的是单线程模型&#xff0c;也就是说&#xff0c;所有任务只能在一个线程上完成&…...

STM32 Cubemx配置串口收发

文章目录 前言注意事项Cubemx配置printf重定向修改工程属性修改源码 测试函数 前言 最近学到了串口收发&#xff0c;简单记录一下注意事项。 注意事项 Cubemx配置 以使用USART1为例。 USART1需配置成异步工作模式Asynchronous。 并且需要使能NVIC。 printf重定向 我偏向…...

ndoe+mysql+express基础应用

介绍 1.express 为不同 URL 路径中使用不同 HTTP 动词的请求&#xff08;路由&#xff09;编写处理程序。集成了“视图”渲染引擎&#xff0c;以便通过将数据插入模板来生成响应。设置常见 web 应用设置&#xff0c;比如用于连接的端口&#xff0c;以及渲染响应模板的位置。在…...

后端项目开发:集成日志

SpringBoot 默认选择的是slf4j做日志门面&#xff0c;logback做日志实现。由于log4j有性能问题&#xff0c;不建议使用。 由于log4j2的表现性能更好&#xff0c;我们需要集成log4j2&#xff0c;同时排除旧的日志实现包。 <!-- Spring Boot 启动器 --> <dependency>…...

20-GIT版本控制

GIT 一 简介 场景 团队协作的时候,我们项目开发会遇到代码需要进行管理的场景。 多个开发者之间,每天写的代码可能需要合并,共享。 例子:我写的用户模块、小王写的订单模块,用户模块最终需要跟订单模块合并。 每天写完代码,qq、u盘拷贝,代码合并一个项目中。 希望…...

解决前后端交互Long类型精度丢失的问题

1、全局注解 package com.jiawa.train.common.config;import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.databind.module.SimpleModule; import com.fasterxml.jackson.databind.ser.std.ToStringSerializer; import org.springframework.c…...

回归预测 | MATLAB实现GA-ELM遗传算法优化极限学习机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现GA-ELM遗传算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现GA-ELM遗传算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程序…...

SpringCloud学习笔记(九)_使用Java类加载SpringBoot、SpringCloud配置文件

我们都知道平常在使用SpringBoot和SpringCloud的时候&#xff0c;如果需要加载一两个配置文件的话我们通常使用Value(“${属性名称}”)注解去加载。但是如果配置文件属性特别多的时候使用这种方式就显得特别的不友好了。 比如说&#xff0c;我们要加载下方这个名为application.…...

三次握手四次挥手之全连接半连接队列

什么是全连接半连接 在 TCP 三次握手的时候&#xff0c;Linux 内核会维护两个队列&#xff0c;分别是&#xff1a; 半连接队列&#xff0c;也称 Listen 队列&#xff1b;全连接队列&#xff0c;也称 accept 队列&#xff1b; 工作原理 每一个socket执行listen时&#xff0c…...

Racknerd便宜高性价比服务器汇总

介绍 Racknerd是近年来比较良心的高性价比主机商了 我制作了Racknerd服务器看板&#xff0c;统计所有在售的VPS和独立服务器 支持多栏目筛选以及排序&#xff0c;帮助你挑选目前在售的主机 也支持筛选最近上架、补货的机器 注意 1.爬虫数据可能有延迟性、不准确性&#xff…...

JavaScript 基础知识回顾与复习---关于this

在JavaScript中&#xff0c;this是一个关键字&#xff0c;它在不同的上下文中引用不同的对象&#xff0c;其this的绑定是动态的&#xff0c;这主要取决于函数的调用方式。this的绑定是函数运行时才确定的而不是编写是就绑定。在我看来this就像魔法一样让人难以理解掌握&#xf…...

Lua之Lua源文件批量转换为luac字节码文件

准备的工具&#xff1a;luac.exe CSDNhttps://mp.csdn.net/mp_download/manage/download/UpDetailed Unity版: using System; using System.Collections; using System.Collections.Generic; using System.IO; using UnityEditor; using UnityEngine;public static class Bat…...

简历V1.0问题合集 8/25-26

记录完 去看相应的知识点 对应着修改 &#xff08;带着问题总结 效果更好 把这一部分先过完&#xff09; Axois 1.axios.interceptors.request.use 和 response.use主要操作了什么了 你简历说了封装。这个要了解 2.axios get post put delete 请求里payload 、query string …...

P1052 [NOIP2005 提高组] 过河

[P1052 NOIP2005 提高组] 过河 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 问题描述&#xff1a;给定长度L&#xff0c;和一次可以跳动的长度 s 到 t&#xff0c;给定m个石头的位置&#xff0c;求最少经过多少个石头可以超过L。 思路&#xff1a;如果L很小的话&#xff0…...

ArrayList和Vector及LinkedList的区别

1.ArrayList和Vector的区别 第一句话&#xff1a;ArrayList和Vector底层都是数组实现的&#xff0c;初始容量都为10&#xff1b;在ArrayList的底层&#xff0c;是通过定义一个DEFAULT_CAPACITY的常量来指定的&#xff0c;而Vector的底层&#xff0c;是直接在空参构造中&#x…...

HVV爆火漏洞:最新 WPS RCE (远程命令执行) 复现

最近HVV爆出的很火的WPS命令执行漏洞&#xff0c;其实并不是0DAY&#xff0c;早在2019年就出现了&#xff0c;只不过最近EXP才公开。接下来我们来复现一遍。 0x00 影响版本 WPS Office 2023 个人版 < 11.1.0.15120WPS Office 2019 企业版 < 11.8.2.12085 0x01 环境配置…...

我的128天创作纪念日-东离与糖宝

文章目录 机缘收获日常成就憧憬 不知不觉我也迎来了自己的128天创作纪念日&#xff0c;一起来看看我有什么想对大家说的吧 机缘 我的写博客之旅始于参加了代码随想录算法训练营。在训练营期间&#xff0c;代码随想录作者卡尔建议我们坚持每天写博客记录刷题学习的进度和心得体…...

卷积神经网络——下篇【深度学习】【PyTorch】【d2l】

文章目录 5、卷积神经网络5.10、⭐批量归一化5.10.1、理论部分5.10.2、代码部分 5.11、⭐残差网络&#xff08;ResNet&#xff09;5.11.1、理论部分5.11.2、代码部分 话题闲谈 5、卷积神经网络 5.10、⭐批量归一化 5.10.1、理论部分 批量归一化可以解决深层网络中梯度消失和…...

cas md5加密

CAS Authentication Credentials #cas.authn.accept.userscasuser::Mellon 查询账号密码SQL&#xff0c;必须包含密码字段 cas.authn.jdbc.query[0].sqlselect * from ca_user where username? 指定上面的SQL查询字段名&#xff08;必须&#xff09; cas.authn.jdbc.query…...

[管理与领导-51]:IT基层管理者 - 8项核心技能 - 6 - 流程

前言&#xff1a; 管理者存在的价值就是制定目标&#xff0c;即目标管理、通过团队&#xff08;他人&#xff09;拿到结果。 要想通过他人拿到结果&#xff1a; &#xff08;1&#xff09;目标&#xff1a;制定符合SMART原则的符合业务需求的目标&#xff0c;团队跳一跳就可以…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统

Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...