Web Worker 和 WebSocket的区别
Web Worker(消息传递机制)
- 定义:是为了在浏览器中提供多线程支持,允许 JavaScript 在后台线程运行,而不阻塞主线程。它非常适合执行耗时的计算任务或处理大量数据,避免主线程(通常是 UI 线程)被阻塞,从而保证用户界面的流畅性。
- 应用:运行后台任务,执行长时间运行的计算或操作,诸如图像处理、文件处理、大数据分析等。它并不直接与网络通信或实时消息传递相关。
- 原理:创建Web Worker分配一个新的线程(即后台线程),它一个独立的执行上下文,和主线程相互隔离,且不能直接操作 DOM 或访问主线程中的变量,它和主线程之间的通信是异步的,通常是通过
postMessage和onmessage方法进行数据传输。// 创建一个 Worker const worker = new Worker('worker.js');// 发送消息到 Worker worker.postMessage({ type: 'start', data: 1000 }); // 1000ms 的间隔// 接收 Worker 返回的消息 worker.onmessage = (event) => {console.log(event.data); // 输出 Worker 返回的数据 };// 停止 Worker worker.postMessage({ type: 'stop' });
应用计时器:

// worker.js
let setIntervaler = null
let count = 0// 启动定时器
function start(timeout) {setIntervaler = setInterval(() => {postMessage({type: 'next',data: ++count})}, timeout)
}// 停止定时器并关闭 Worker
function stop() {clearInterval(setIntervaler)count = 0 // 重置计数self.close() // 关闭 Worker
}// 监听来自主线程的消息
self.addEventListener('message', (e) => {let { type, data } = e.data // 解构消息数据switch (type) {case 'start':start(data) // 启动定时器breakcase 'stop':stop() // 停止定时器breakdefault:break}
})
<template><div><h1>Web Worker 定时器</h1><p>计数: {{ count }}</p><button @click="startTimer" :disabled="isRunning">启动定时器</button><button @click="stopTimer" :disabled="!isRunning">停止定时器</button></div>
</template><script setup>
import { ref, onUnmounted } from 'vue';// 定义 Vue 组件的状态
const count = ref(0);
const isRunning = ref(false);// 创建 Worker 实例
// src\utils\worker.js
const worker = new Worker(new URL('../utils/worker.js', import.meta.url));// 监听 Worker 返回的数据
worker.onmessage = (e) => {const { type, data } = e.data;switch (type) {case 'ready':console.log(data); // Worker 已准备好break;case 'next':count.value = data; // 更新计数器break;default:break;}
};// 启动定时器
const startTimer = () => {worker.postMessage({ type: 'start', data: 1000 }); // 1000 毫秒(1秒)为定时器间隔isRunning.value = true; // 更新状态为运行中
};// 停止定时器
const stopTimer = () => {worker.postMessage({ type: 'stop' });isRunning.value = false; // 更新状态为停止
};// 清理 Worker 实例
onUnmounted(() => {worker.terminate(); // 组件销毁时终止 Worker
});
</script><style scoped>
button {margin: 10px;padding: 10px;font-size: 16px;
}
</style>
WebSocket(握手连接通信)
- 定义:是一种在客户端和服务器之间建立持久连接的协议,它允许双方在连接建立后进行双向实时通信。WebSocket 主要用于需要实时数据更新的应用场景,如实时聊天、在线游戏、股票行情、推送通知等
- 应用:客户端和服务器之间可以保持一个长连接,允许实时交换数据,适合实时应用程序的场景。
- 原理:用 HTTP 协议进行握手建立连接,通信将转为基于 TCP 的实时双向通信(全双工通信),可以随时从客户端或服务器端通过
send方法发送数据,通过onmessage监听接收到的消息。// 创建 WebSocket 连接 const socket = new WebSocket('ws://example.com/socket');// 连接成功后发送消息 socket.onopen = () => {socket.send('Hello, server!'); };// 接收来自服务器的消息 socket.onmessage = (event) => {console.log('Message from server:', event.data); };// 发送消息给服务器 socket.send('Another message');// 关闭连接 socket.close();
总结:
| 特性 | Web Worker | WebSocket |
| 主要目的 | 后台线程处理计算任务,避免阻塞主线程 | 双向实时通信,实时数据交换 |
| 通信方式 | 主线程与 Worker 通过消息传递 | 客户端与服务器之间的持久连接,双向通信 |
| 适用场景 | 长时间运行的计算任务,数据处理 | 实时应用程序,如聊天、推送通知、在线游戏 |
| 通信延迟 | 主要用于计算任务,没有即时通信需求 | 适合低延迟、高实时性的双向通信 |
| 关闭方式 | worker.terminate() 或 self.close() | socket.close() |
追更:
Web Worker 是一个独立的线程,当你调用 self.close() 时,Worker 被终止,所有的状态(如定时器)也会丢失。
因此,想要再次启动定时器则不关闭Worker直到组件被销毁!!!

// worker.js
let setIntervaler = null;
let count = 0;
let isRunning = false; // 标志定时器是否正在运行// 启动定时器
function start(timeout) {if (!isRunning) {isRunning = true; // 标记定时器已启动setIntervaler = setInterval(() => {postMessage({type: 'next',data: ++count});}, timeout);}
}// 停止定时器
function stop() {if (isRunning) {clearInterval(setIntervaler);isRunning = false; // 标记定时器已停止}
}// 监听来自主线程的消息
self.addEventListener('message', (e) => {const { type, data } = e.data;switch (type) {case 'start':start(data); // 启动定时器break;case 'stop':stop(); // 停止定时器break;default:break;}
});
<template><div><h1>Web Worker 定时器</h1><p>计数: {{ count }}</p><button @click="startTimer" :disabled="isRunning">启动定时器</button><button @click="stopTimer" :disabled="!isRunning">停止定时器</button></div>
</template><script setup>
import { ref, onUnmounted } from 'vue';// 定义 Vue 组件的状态
const count = ref(0);
const isRunning = ref(false);// 创建 Worker 实例,保持 Worker 持续存在
const worker = new Worker(new URL('../utils/worker.js', import.meta.url));// 监听 Worker 返回的数据
worker.onmessage = (e) => {const { type, data } = e.data;switch (type) {case 'ready':console.log(data); // Worker 已准备好break;case 'next':count.value = data; // 更新计数器break;default:break;}
};// 启动定时器
const startTimer = () => {if (!isRunning.value) {worker.postMessage({ type: 'start', data: 1000 }); // 1000 毫秒(1秒)为定时器间隔isRunning.value = true; // 更新状态为运行中}
};// 停止定时器
const stopTimer = () => {if (isRunning.value) {worker.postMessage({ type: 'stop' });isRunning.value = false; // 更新状态为停止}
};// 清理 Worker 实例
onUnmounted(() => {worker.terminate(); // 组件销毁时终止 Worker
});
</script><style scoped>
button {margin: 10px;padding: 10px;font-size: 16px;
}
</style>
相关文章:
Web Worker 和 WebSocket的区别
Web Worker(消息传递机制) 定义:是为了在浏览器中提供多线程支持,允许 JavaScript 在后台线程运行,而不阻塞主线程。它非常适合执行耗时的计算任务或处理大量数据,避免主线程(通常是 UI 线程&a…...
JMeter实时性能压测可视化系统整合
一、相关工具简介: JMeter、Grafana 和 InfluxDB 结合实时地收集、分析和展示性能测试数据,进行更好地理解系统的性能表现,及时发现潜在问题并进行优化。 1,JMeter 实时生成性能数据,并将其发送到 InfluxDB 进行存储。2,InfluxDB 存储的数据。3,通过Grafana的仪表板,用…...
无限加载和懒加载及路由滚动及路由滚动不生效
这里写目录标题 列表无限加载懒加载定制路由滚动使用scrollBehavior不起效不管用的原因使用scrollTo来实现路由滚动elMain && elMain.scrollTo(...) 的作用是: 无限加载和懒加载的区别 列表无限加载 无限加载功能在现代网页和移动应用中广泛应用࿰…...
CSS底层基础:小白速来
1. CSS简介 CSS (Cascading Style Sheets) 是一种用来描述HTML或XML文档样式的语言。它使得开发者能够控制网页的布局和外观,包括字体、颜色、间距等。CSS通过选择器来指定要应用样式的元素,并定义这些元素的具体样式属性。 基本结构示例: …...
【MySQL 进阶之路】索引概述
第06章_索引 1.什么是索引 索引是存储引擎用于快速找到数据记录的一种数据结构,就好比一本教科书的目录部分,通过目录中找到对应文章的页码,便可快速定位到需要的文章。MySQL中也是一样的道理,进行数据查找时,首先查…...
【C++boost::asio网络编程】有关异步读写api的笔记
异步读写api 异步写操作async_write_someasync_send 异步读操作async_read_someasync_receive 定义一个Session类,主要是为了服务端专门为客户端服务创建的管理类 class Session { public:Session(std::shared_ptr<asio::ip::tcp::socket> socket);void Conn…...
Elasticsearch 的存储与查询
Elasticsearch 的存储与查询 在搜索系统领域,数据的存储与查询是两个最基础且至关重要的环节。Elasticsearch(ES) 在这两方面进行了深度优化,使其在关系型数据库或非关系型数据库中脱颖而出,成为搜索系统的首选。 映射 (Mapping) 映射 (Ma…...
008静态路由-特定主机路由
按照如上配置,用192.168.0.1 电脑ping 192.168.1.1 发现能够ping通 用192.168.0.1 电脑ping 192.168.2.1 发现不能ping通 这是因为192.168.0.1 和 192.168.1.1 使用的是同一个路由器R1。 192.168.0.1 和 192.168.2.1 通信需要先经过R1,再经过R2 …...
SystemUI 下拉框 Build 版本信息去掉
需求及场景 去掉SystemUI 下拉框 Build 版本信息 如下图所示:去掉 12 (SP1A.201812.016) 了解 去掉之前我们先了解它是个什么东西:其实就是一个Build RTM 信息显示 Android_12_build_SP1A.210812.016 修改文件 /frameworks/base/packages/Syste…...
【JS】栈内存、堆内存、事件机制区别、深拷贝、浅拷贝
js中,内存主要分为两种类型:栈内存(stack)、堆内存(heap),两种内存区域在存储和管理数据时有各自的特点和用途。 栈内存 访问顺序 栈是先进后出、后进先出的数据结构,栈内存是内存用…...
如何确保Java爬虫获得1688商品详情数据的准确性
在数字化商业时代,数据的价值日益凸显,尤其是对于电商平台而言。1688作为中国领先的B2B电子商务平台,提供了海量的商品数据接口,这些数据对于市场分析、库存管理、价格策略制定等商业活动至关重要。本文将详细介绍如何使用Java编写…...
【蓝牙通讯】iOS蓝牙开发基础介绍
1. iOS 蓝牙开发基础 在 iOS 中,蓝牙的操作主要是通过 Core Bluetooth 框架来实现。理解 Core Bluetooth 的基本组件和工作原理是学习 iOS 蓝牙开发的第一步。 核心知识点: Core Bluetooth 框架:这是 iOS 系统提供的专门用于蓝牙低功耗&am…...
Vue 90 ,Element 13 ,Vue + Element UI 中 el-switch 使用小细节解析,避免入坑(获取后端的数据类型自动转变)
目录 前言 在开发过程中,我们经常遇到一些看似简单的问题,但有时正是这些细节问题让我们头疼不已。今天,我就来和大家分享一个我在开发过程中遇到的 el-switch 使用的小坑,希望大家在使用时能够避免。 一. 问题背景 二. 问题分…...
echarts的双X轴,父级居中的相关配置
前言:折腾了一个星期,在最后一天中午,都快要放弃了,后来坚持下来,才有下面结果。 这个效果就相当是复合表头,第一行是子级,第二行是父级。 子级是奇数个时,父级label居中很简单&…...
RuoYi-Vue部署到Linux服务器(Jar+Nginx)
一、本地环境准备 源码下载、本地Jdk及Node.js环境安装,参考以下文章。 附:RuoYi-Vue下载与运行 二、服务器环境准备 1.安装Jdk 附:JDK8下载安装与配置环境变量(linux) 2.安装MySQL 附:MySQL8免安装版下载安装与配置(linux) 3.安装Redis 附:Redis下载安装与配置(…...
Linux firewalld常用命令
启动防火墙 systemctl start firewalld 停止防火墙 systemctl stop firewalld 防火墙开机自启动 systemctl enable firewalld 禁止防火墙开机自启动 systemctl disable firewalld 检查防火墙的状态 systemctl status firewalld 重新加载防火墙的配置 firewall-cmd -…...
Vue 组件之间的通信方式
Vue.js 中组件之间的通信是构建复杂应用的关键部分。以下是一些常见的Vue组件通信方式: 1. Props 和 Emit(父子组件通信) Props:父组件通过props向子组件传递数据。Emit:子组件通过emit触发事件,向父组件…...
el-select 修改样式
这样漂亮的页面,搭配的却是一个白色风格的下拉框 ,这也过于刺眼。。。 调整后样式为: 灯红酒绿总有人看着眼杂,但将风格统一终究是上上选择。下面来处理这个问题。 分为两部分。 第一部分:是修改触发框的样式 第二部…...
Java项目实战II基于微信小程序的亿家旺生鲜云订单零售系统的设计与实现(开发文档+数据库+源码)
目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着移动互联网技术的不断…...
算法训练营day27(回溯算法03:组合总和,组合总和2,分割回文串)
第七章 回溯算法part03● 39. 组合总和 ● 40.组合总和II ● 131.分割回文串详细布置 39. 组合总和 本题是 集合里元素可以用无数次,那么和组合问题的差别 其实仅在于 startIndex上的控制题目链接/文章讲解:https://programmercarl.com/0039.%E7%BB%84%E…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
