WebSocket监控需应用层埋点而非依赖Network面板，应在关键事件中统计收发字节数、延迟及连接耗时，按消息类型打标，5%采样后异步上报精简字段，并结合Chrome DevTools辅助诊断。
WebSocket 流量和性能监控不能依赖浏览器开发者工具的 Network 面板实时抓包（它不完整显示 ws 帧级数据），需在应用层主动埋点、统计与上报。
手动记录连接生命周期与消息吞吐
在 WebSocket 实例创建、open、message、error、close 等关键事件中插入时间戳和字节计数：
- 连接建立时记录
startTime = performance.now()，并在onopen中计算握手耗时 - 每次
send()前用new TextEncoder().encode(data).length（文本）或data.byteLength（Blob/ArrayBuffer）获取发送字节数，累加到sentBytes - 在
onmessage中对event.data同样计算接收字节数，累加到receivedBytes -
onclose触发时汇总：总时长、收发总量、平均消息大小、错误次数，并触发性能上报
按消息类型/业务场景打标统计
避免所有流量混为一谈，应在发送/接收逻辑中注入语义标签：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 给每类消息定义唯一 type ID（如
"chat.msg"、"live.heartbeat"、"sync.state"） - 发送时记录：
trackSend({ type: "chat.msg", size: len, ts: Date.now() }) - 接收时匹配 type 并记录延迟：
const delay = Date.now() - msg.timestamp; trackReceive({ type, delay, size }) - 后续可聚合分析：哪类消息最频繁？平均延迟最高？是否存在单次超大 payload（如未分片的 base64 图片）？
限制采样率并异步上报，避免影响主流程
高频 WebSocket 场景下全量打点会拖慢 JS 主线程，需轻量化处理：
- 使用
Math.random() 实现 5% 采样，仅对抽中消息做精细统计 - 将打点数据暂存内存队列，用
requestIdleCallback或setTimeout(..., 0)异步批量上报 - 上报字段精简：只传
{type, dir:"in/out", size, delay, connId, ts}，不传原始内容 - 服务端聚合后生成连接级视图：每分钟收发 MB、P95 延迟、重连频次、异常帧占比等
结合 Chrome DevTools 的底层诊断能力
虽不能直接看 ws 帧，但可辅助定位网络与渲染瓶颈：
- 开启 Network → Filter → ws 查看连接建立时间、HTTP 升级响应头、关闭码
- 使用 Performance 面板录制，筛选
WebSocketFrame事件（Chrome 110+ 支持），观察帧收发时间线与主线程阻塞关系 - 在 Memory 面板 快照对比，确认未及时释放的 message 事件回调或闭包是否引发内存泄漏
- 配合
chrome://net-internals/#events查看底层 socket 状态（需启用 net-log）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
