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

关于sse、websocket与流式渲染

一、SSE是什么?

网络中的 SSE (Server-Sent Events) 是一种服务器向浏览器单向推送数据的机制,常用于需要实时更新的数据传输,如新闻推送、股票行情、聊天应用等。


SSE 的特点

  1. 单向通信:服务器向客户端推送数据,但客户端无法直接通过 SSE 发消息给服务器(客户端可通过其他方式如 HTTP 请求与服务器通信)。
  2. 基于 HTTP/1.1:SSE 使用 HTTP 协议传输,和普通 HTTP 请求兼容,不需要 WebSocket 的复杂握手过程。
  3. 自动重连:如果连接中断,SSE 会自动尝试重新连接。
  4. 文本传输:SSE 主要用于传输文本数据,传输的数据格式通常为 UTF-8。

SSE 的实现示例

1. 服务器端 (Node.js 示例)
const http = require('http');http.createServer((req, res) => {if (req.url === '/events') {res.writeHead(200, {'Content-Type': 'text/event-stream','Cache-Control': 'no-cache','Connection': 'keep-alive',});setInterval(() => {res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);}, 1000);}
}).listen(3000, () => console.log('SSE server running on http://localhost:3000'));
2. 客户端 (HTML + JavaScript 示例)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SSE Demo</title>
</head>
<body><h1>Server-Sent Events Demo</h1><div id="messages"></div><script>const eventSource = new EventSource('/events');eventSource.onmessage = (event) => {const messages = document.getElementById('messages');messages.innerHTML += `<p>${event.data}</p>`;};eventSource.onerror = () => {console.error('Connection lost, retrying...');};</script>
</body>
</html>

SSE 与 WebSocket 的对比

特点SSEWebSocket
通信方向单向(服务器 → 客户端)双向(服务器 ↔ 客户端)
协议HTTP/1.1自定义 WebSocket 协议
数据格式文本(UTF-8)文本和二进制
适用场景实时推送但不需要双向通信的数据实时交互、需要双向通信的场景
连接复杂度简单,基于 HTTP 请求复杂,需要握手过程

SSE 的适用场景

  • 新闻推送:如订阅新闻源的实时更新。
  • 股票市场数据:实时行情推送。
  • 实时通知系统:如 Web 上的通知或警报系统。
  • 在线聊天(简单版):单向消息传递,如聊天消息广播。

SSE 提供了一种轻量级解决方案,用于在某些应用场景下替代 WebSocket,特别是当仅需单向数据流时。

二、服务端推送的数据格式是什么样的?

Server-Sent Events (SSE) 中,服务器推送的数据格式是基于 文本格式 的特殊结构,每条消息由若干字段组成,每个字段通过换行符(\n)分隔。服务器将这些数据连续传输给客户端,以下是常用的 SSE 数据格式结构


SSE 消息格式

SSE 消息的格式遵循以下结构:

data: <消息数据>
id: <消息ID>
event: <事件类型>
retry: <自动重连时间>
  • 每条消息之间需要使用 两个换行符\n\n)分隔。
  • id 字段用于标记消息的 ID,便于客户端追踪和在重连时获取丢失的消息。
  • data 是消息的主要内容,支持多行数据。
  • event 用于标记事件类型(可选),客户端可基于不同事件类型处理消息。
  • retry 指定客户端断开连接后的重连间隔(以毫秒为单位),可选。

示例消息

data: Hello, World!
id: 1
event: message
retry: 3000data: {"temperature": 25, "humidity": 60}
id: 2data: 这是第二条消息
id: 3

上述消息发送了三次推送:

  1. 第一条为事件类型 message,数据为 “Hello, World!”。
  2. 第二条为 JSON 格式的天气数据。
  3. 第三条是中文文本。

服务端响应完整示例

服务器端的响应头必须设置正确的 MIME 类型,以确保客户端能够正确解析 SSE 流。

示例响应头
HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
示例数据流
data: Server time: 2024-10-24 14:00:00
id: 101data: New stock price: AAPL 180.55
id: 102event: customEvent
data: Custom event message
id: 103retry: 5000
  • 第一条推送显示服务器的时间。
  • 第二条推送为股票价格更新。
  • 第三条定义了一个自定义事件 customEvent
  • retry: 5000 指定客户端在断开连接时应每 5 秒尝试重连。

客户端接收数据的示例

event.data 是每个数据流的数据,而非完整的
每次服务端发送一条消息时,EventSource 会触发 onmessage 事件,其中包含一条新的数据。

const eventSource = new EventSource('/events');// 默认消息事件处理
eventSource.onmessage = (event) => {console.log('Message:', event.data);
};// 处理自定义事件
eventSource.addEventListener('customEvent', (event) => {console.log('Custom Event:', event.data);
});// 错误处理
eventSource.onerror = () => {console.error('Connection error, trying to reconnect...');
};

总结

在 SSE 中,服务端的数据格式必须是 纯文本流,并且按照规范使用 dataidevent 等字段。每条消息以两个换行符(\n\n)分隔,确保客户端能正确解析与展示。同时,SSE 的格式简单而有效,适合需要实时数据推送但不需要复杂双向通信的场景。

三、前端如何处理一段一段的数据?

SSE(Server-Sent Events) 中,服务端会将数据以一段段的方式持续推送给客户端。前端需要通过事件监听器处理这些消息,将数据进行逐条接收和展示。以下是如何在前端处理 SSE 分段数据 的详细步骤。


前端处理 SSE 分段数据的步骤

  1. 使用 EventSource 创建 SSE 连接
  2. 监听不同类型的事件(默认 message 事件或自定义事件)。
  3. 累积或逐步更新数据(如拼接消息、实时更新 UI)。
  4. 错误处理:保证连接断开时能够重连。

基本代码示例

// 1. 创建 SSE 连接
const eventSource = new EventSource('/events');// 2. 默认消息处理:逐条接收并展示
eventSource.onmessage = (event) => {console.log('Received message:', event.data);appendDataToUI(event.data);  // 自定义逻辑将数据展示到页面
};// 3. 监听自定义事件
eventSource.addEventListener('customEvent', (event) => {console.log('Custom Event:', event.data);
});// 4. 错误处理:如断开连接时自动尝试重连
eventSource.onerror = (error) => {console.error('Connection lost, retrying...', error);
};// 5. 自定义函数:将数据添加到页面
function appendDataToUI(data) {const messagesDiv = document.getElementById('messages');const newMessage = document.createElement('p');newMessage.textContent = data;messagesDiv.appendChild(newMessage);
}

展示逐条消息

HTML 页面结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SSE Example</title>
</head>
<body><h1>SSE Data Stream</h1><div id="messages"></div><script src="sse-handler.js"></script> <!-- 引入前端逻辑 -->
</body>
</html>

如何处理分段数据

方案 1:逐条处理和展示

每当服务器发送一条消息时,客户端就将它添加到页面中。

eventSource.onmessage = (event) => {appendDataToUI(event.data);  // 实时将数据展示
};
方案 2:拼接消息(累积数据流)

如果服务端的消息是分段发送的,需要客户端在完整接收后进行拼接。例如,假设服务端每次发送数据的一部分:

let accumulatedData = '';  // 用于拼接的全局变量eventSource.onmessage = (event) => {accumulatedData += event.data;  // 累积数据if (event.data.endsWith('[END]')) {  // 判断是否为完整数据appendDataToUI(accumulatedData);accumulatedData = '';  // 重置累积数据}
};

处理 JSON 数据

如果服务端推送的是 JSON 数据,需要在前端解析后展示:

eventSource.onmessage = (event) => {try {const jsonData = JSON.parse(event.data);console.log('JSON Data:', jsonData);appendDataToUI(`User: ${jsonData.user}, Message: ${jsonData.message}`);} catch (error) {console.error('Invalid JSON:', event.data);}
};

处理自定义事件的场景

服务端发送不同类型的事件时,可以在前端通过 addEventListener 针对不同事件分别处理:

eventSource.addEventListener('news', (event) => {console.log('News:', event.data);appendDataToUI(`News: ${event.data}`);
});eventSource.addEventListener('alert', (event) => {console.log('Alert:', event.data);alert(`Alert: ${event.data}`);
});

总结

  • SSE 前端处理 中,核心是通过 EventSource 持续接收服务器推送的消息,并根据需要逐条或累积处理数据。
  • 可以监听默认事件(message)和自定义事件。
  • 拼接数据 时要确保能正确判断数据结束标志,避免数据错乱。
  • 通过 JSON 解析 支持复杂数据格式。

SSE 适合实时消息展示和数据推送的场景,例如聊天应用、新闻推送等。这个方案相比 WebSocket 更轻量,适合单向数据流的需求。

四、如何实现实时渲染

要在前端实现实时渲染 SSE 推送的数据,可以将数据一边接收一边更新到页面中。具体实现方式依赖于 HTML 和 JavaScript,通过 DOM 操作 动态将数据插入到页面,并确保界面流畅地显示最新内容。


SSE 实时渲染步骤

  1. 接收服务端的推送数据:使用 EventSource 监听不同事件。
  2. 更新 UI:接收数据后,立即更新页面元素(如消息列表)。
  3. 优化性能:对于频繁更新的情况,可以使用节流虚拟列表技术,保证性能不受影响。

基础实现:实时渲染数据

HTML 结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Real-time SSE Rendering</title><style>#messages {max-height: 300px;overflow-y: auto;border: 1px solid #ccc;padding: 10px;}p {margin: 5px 0;}</style>
</head>
<body><h1>Real-time Messages</h1><div id="messages"></div><script src="script.js"></script> <!-- 引入 JavaScript -->
</body>
</html>

JavaScript 实现:实时接收和渲染
// 创建 SSE 连接
const eventSource = new EventSource('/events');// 获取 DOM 元素
const messagesDiv = document.getElementById('messages');// 处理服务端默认推送的 message 事件
eventSource.onmessage = (event) => {renderMessage(event.data);
};// 将消息渲染到页面
function renderMessage(message) {const newMessage = document.createElement('p');newMessage.textContent = message;messagesDiv.appendChild(newMessage);// 保持滚动条在底部(自动滚动)messagesDiv.scrollTop = messagesDiv.scrollHeight;
}// 错误处理:连接丢失时显示提示
eventSource.onerror = () => {renderMessage('Connection lost. Reconnecting...');
};

效果:

  1. 每当服务器推送新消息时,onmessage 会捕获并调用 renderMessage() 方法,将消息插入页面。
  2. 自动滚动到页面底部:当消息增加超出容器高度时,scrollTop 确保用户总是看到最新消息。

性能优化:节流处理

如果数据推送频率较高,直接更新 DOM 可能导致性能问题。可以使用节流(throttling),限制每秒的渲染次数。

let lastRenderTime = 0;function throttledRenderMessage(message) {const now = Date.now();if (now - lastRenderTime > 100) { // 限制每100ms渲染一次renderMessage(message);lastRenderTime = now;}
}eventSource.onmessage = (event) => {throttledRenderMessage(event.data);
};

优化方式:虚拟列表(Virtual List)

当消息数据量非常大时,可以使用虚拟列表技术,只渲染可见区域内的数据。可以借助第三方库(如 react-windowvirtual-scroller)或自己实现。


总结

通过上述代码,你可以实现基于 SSE 的实时数据渲染:

  • 使用 EventSource 持续接收服务端推送的数据。
  • 动态更新 DOM,让页面实时显示最新内容。
  • 使用 自动滚动 让用户始终看到最新消息。
  • 针对高频数据,可以使用 节流虚拟列表 优化性能。

这种方式非常适合聊天应用、实时新闻推送或日志监控系统的前端实现。

五、event.data

onmessage 是如何工作的?

  1. 长连接EventSource 使用 HTTP 长连接,服务器在连接建立后不断推送数据给客户端,而无需客户端频繁发起新的请求。
  2. 实时监听onmessage 事件会在服务器推送 每一条新消息 时被触发,将当前这条消息的数据传递给客户端。
  3. 增量推送:每次推送的数据独立存在,并不会覆盖之前的数据,而是逐条接收。

工作机制示例

服务端推送(SSE)数据格式:
data: {"temperature": 25, "unit": "C"}
id: 1data: {"temperature": 26, "unit": "C"}
id: 2data: {"message": "System OK"}
id: 3
前端监听新数据:
// 建立 SSE 连接
const eventSource = new EventSource('/events');// 每当服务器推送一条新数据时,onmessage 就会触发
eventSource.onmessage = (event) => {console.log('Received new data:', event.data);  // 打印当前推送的数据processData(event.data);  // 处理新数据
};// 自定义数据处理逻辑
function processData(data) {const parsedData = JSON.parse(data);console.log('Parsed Data:', parsedData);// 在页面中展示数据或加入队列等操作
}

逐条处理新数据

每当服务器推送一条新数据时:

  • onmessage 会自动触发,并返回当前这条推送的数据
  • 这是一种流式处理,即:每次推送的新数据都是单独处理的,不会覆盖或与之前的数据混合。

EventSource 数据流的特点

  1. 数据流EventSource实时监听数据流变化,服务器每次发送新数据时,客户端会立即捕获。
  2. 自动重连:如果连接中断(如网络波动),EventSource 会尝试自动重连,并从最后的消息 ID 开始接收。
  3. 顺序保证EventSource 保证了数据的顺序性,确保客户端按服务端的发送顺序接收数据。

如何判断每条数据是否完整?

在某些情况下,如果数据分片发送(比如需要多个部分组合成一条完整消息),可以使用结束标识(如 [END])来判断:

示例:拼接分片数据
let accumulatedData = '';eventSource.onmessage = (event) => {accumulatedData += event.data;  // 累积数据片段if (event.data.endsWith('[END]')) {console.log('Complete Data:', accumulatedData);processData(accumulatedData);accumulatedData = '';  // 重置累积数据}
};

总结

  • onmessage 会在每次服务器推送一条新数据时被触发,event.data 包含这条消息的内容。
  • 数据流监听是实时的,客户端可以逐条接收并处理新数据。
  • 数据不会被覆盖,而是按服务端发送的顺序逐条接收。
  • 可以根据需要对高频数据进行拼接、节流或批量处理,保证页面的性能和用户体验。

EventSource 是一种非常适合实时数据推送(如聊天、日志、监控等)的轻量级方案。

相关文章:

关于sse、websocket与流式渲染

一、SSE是什么&#xff1f; 网络中的 SSE (Server-Sent Events) 是一种服务器向浏览器单向推送数据的机制&#xff0c;常用于需要实时更新的数据传输&#xff0c;如新闻推送、股票行情、聊天应用等。 SSE 的特点&#xff1a; 单向通信&#xff1a;服务器向客户端推送数据&…...

Python 语法与数据类型详解

Python 语法与数据类型详解 Python 以其简洁易读的语法和丰富多样的数据类型在编程领域占据重要地位。深入理解 Python 的语法和数据类型是掌握这门语言的关键。 一、Python 语法概述 &#xff08;一&#xff09;缩进规则 Python 独特的缩进规则是其语法的重要特征之一。与…...

LeetCode题练习与总结:扁平化嵌套列表迭代器--341

一、题目描述 给你一个嵌套的整数列表 nestedList 。每个元素要么是一个整数&#xff0c;要么是一个列表&#xff1b;该列表的元素也可能是整数或者是其他列表。请你实现一个迭代器将其扁平化&#xff0c;使之能够遍历这个列表中的所有整数。 实现扁平迭代器类 NestedIterato…...

51单片机快速入门之 AD(模数) DA(数模) 转换 2024/10/25

51单片机快速入门之 AD(模数) DA(数模) 转换 2024/10/25 声明:本文图片来源于网络 A模拟信号特点: 电压或者电流 缓慢上升 随着时间连续缓慢上升或下降 D数字信号特点:电压或者电流 保持一段时间的高/低电平 状态 / 突变 (高电压瞬间低电压) 数字电路中 通常将0-1v电压称…...

Typora 、 Minio and PicGo 图床搭建

流程介绍 本地安装Typora笔记工具拥有一台装有docker的服务器配置minio云图床管理控制页面下载PicGo上传工具服务器Docker环境搭建—Ubuntu系统 删除旧docker的所有依赖(非root用户) # 删除docker及安装时自动安装的所有包 sudo apt-get autoremove docker docker-ce docker…...

【计网】UDP Echo Server与Client实战:从零开始构建简单通信回显程序

目录 前言&#xff1a; 1.实现udpserver类 1.1.创建udp socket 套接字 --- 必须要做的 socket&#xff08;&#xff09;讲解 代码实现&#xff1a;​编辑 代码讲解&#xff1a; 1.2.填充sockaddr_in结构 代码实现&#xff1a; 代码解析&#xff1a; 1.3.bind sockfd和…...

微服务网关Zuul

一、Zuul简介 Zuul是Netflix开源的微服务网关&#xff0c;包含对请求的路由和过滤两个主要功能。 1&#xff09;路由功能&#xff1a;负责将外部请求转发到具体的微服务实例上&#xff0c;是实现外部访问统一入口的基础。 2&#xff09;过滤功能&#xff1a;负责对请求的过程…...

BuildCTF线上赛WP

Build::CTF flag不到啊战队--WP 萌新战队&#xff0c;还请多多指教~ 目录 Build::CTF flag不到啊战队--WP Web ez!http find-the-id Pwn 我要成为沙威玛传奇 Misc what is this? 一念愚即般若绝&#xff0c;一念智即般若生 别真给我开盒了哥 四妹&#xff0c;你听…...

《使用Gin框架构建分布式应用》阅读笔记:p143-p207

《用Gin框架构建分布式应用》学习第10天&#xff0c;p143-p207总结&#xff0c;总计65页。 一、技术总结 1.auth0 本人实际工作中未遇到过&#xff0c;mark一下&#xff0c;参考&#xff1a;https://auth0.com/。 2.使用template (1)c.File() (2)router.Static() (3)rou…...

华为网络管理配置实例

目录 组网需求 数据规划 配置思路 操作步骤 结果验证 配置脚本 管理员可以通过eSight网管系统对FW进行监控和管理&#xff0c;接收FW的告警。 组网需求 如图1所示&#xff0c;某企业在网络边界处部署了FW作为安全网关&#xff0c;并部署了eSight网管系统对网络设备进行集中…...

大语言模型数据处理方法(基于llama模型)

文章目录 前言一、基于huggingface的DataCollatorForSeq2Seq方法解读1、DataCollatorForSeq2Seq方法2、batch最长序列填充3、指定长度填充二、构建大语言模型数据加工模块1、数据读取2、数据加工1、数据格式2、预训练(pretrain)数据加工3、微调(sft)数据加工①、sft数据加工…...

爱奇艺大数据多 AZ 统一调度架构

01# 导语 爱奇艺大数据技术广泛应用于运营决策、用户增长、广告分发、视频推荐、搜索、会员营销等场景&#xff0c;为公司的业务增长和用户体验提供了重要的数据驱动引擎。 多年来&#xff0c;随着公司业务的发展&#xff0c;爱奇艺大数据平台已积累了海量数据&#xff0c;这…...

【C++篇】栈的层叠与队列的流动:在 STL 的韵律中探寻数据结构的优雅之舞

文章目录 C 栈与队列详解&#xff1a;基础与进阶应用前言第一章&#xff1a;栈的介绍与使用1.1 栈的介绍1.2 栈的使用1.2.1 最小栈1.2.2 示例与输出 1.3 栈的模拟实现 第二章&#xff1a;队列的介绍与使用2.1 队列的介绍2.2 队列的使用2.2.1 示例与输出 2.3 队列的模拟实现2.3.…...

使用 Flask 实现简单的登录注册功能

目录 1. 引言 2. 环境准备 3. 数据库设置 4. Flask 应用基本配置 5. 实现用户注册 6. 实现用户登录 7. 路由配置 8. 创建前端页面 9. 结论 1. 引言 在这篇文章中&#xff0c;我们将使用 Flask 框架创建一个简单的登录和注册系统。Flask 是一个轻量级的 Python Web 框架…...

计算机毕业设计Python+大模型微博情感分析 微博舆情预测 微博爬虫 微博大数据 舆情分析系统 大数据毕业设计 NLP文本分类 机器学习 深度学习 AI

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 《Python大模型微博情感分析…...

CTF--Misc题型小结

&#xff08;萌新笔记&#xff0c;多多关照&#xff0c;不足之处请及时提出。&#xff09; 不定时更新~ 目录 密码学相关 文件类型判断 file命令 文件头类型 strings读取 隐写术 尺寸修改 文件头等缺失 EXIF隐写 thumbnail 隐写 文件分离&提取 binwalk foremo…...

深度学习系列——RNN/LSTM/GRU,seq2seq/attention机制

1、RNN/LSTM/GRU可参考&#xff1a; https://zhuanlan.zhihu.com/p/636756912 &#xff08;1&#xff09;对于这里面RNN的表示中&#xff0c;使用了输入x和h的拼接描述&#xff0c;其他公式中也是如此 &#xff08;2&#xff09;各符号图含义如下 2、关于RNN细节&#xff0c;…...

通过call指令来学习指令摘要表的细节

E8 cw cw 表示E8后面跟随2 字节 (什么数不知道) rel16 指在与指令同一代码段内的相对地址偏移 D ,指向Instruction Operand Encoding 表中的D列, 他告诉我们 操作数1 是一个0FFSET N.S. 在64位模式下&#xff0c;某些指令需要使用“地址覆盖前缀”&#xff08;address over…...

10分钟使用Strapi(无头CMS)生成基于Node.js的API接口,告别繁琐开发,保姆级教程,持续更新中。

一、什么是Strapi&#xff1f; Strapi 是一个开源的无头&#xff08;headless&#xff09; CMS&#xff0c;开发者可以自由选择他们喜欢的开发工具和框架&#xff0c;内容编辑人员使用自有的应用程序来管理和分发他们的内容。得益于插件系统&#xff0c;Strapi 是一个灵活的 C…...

创建插件 DLL 项目

Step 1: 创建插件 DLL 项目 在 Visual Studio 中创建一个新的 DLL 项目&#xff0c;并添加以下文件和代码。 头文件&#xff1a;CShapeBase.h cpp 复制代码 #pragma once #include <afxwin.h> // MFC 必需头文件 #include <string> #include <vector> #i…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...