WebSocket数据流式传输实现教程解决超大数据解析卡顿方法【技巧】-js教程-PHP中文网

直接json.parse(event.data)会卡住页面，因为onmessage同步执行且json.parse是计算密集型操作，处理5mb json可阻塞主线程超400ms，导致渲染停滞、交互失灵；须改用二进制分片+textdecoder流式解码+queuemicrotask异步解析。

websocket数据流式传输实现教程解决超大数据解析卡顿方法【技巧】

WebSocket流式传输不是“开了连接就能自动流”，必须手动拆帧、分段消费、异步处理，否则大消息一来，主线程立刻卡死。

为什么直接 `JSON.parse(event.data)` 会卡住页面

浏览器收到 WebSocket 消息后，onmessage 回调在主线程同步执行。如果服务端一次性推送 5MB 的 JSON 数据，JSON.parse() 会阻塞渲染、事件响应长达数百毫秒，用户操作完全失灵。

文本帧越大，解析耗时呈非线性增长（1MB 可能 80ms，5MB 常超 400ms）
若每秒推 10 条，主线程持续满载，requestAnimationFrame 丢帧、滚动卡顿、输入延迟全出现
错误日志里看不到报错，但 Performance 面板里能看到长任务（Long Task）标记为黄色或红色

用 `TextDecoder` + `Uint8Array` 流式解码二进制帧

服务端改发二进制帧（opcode=2），前端不再依赖 event.data 自动转字符串，而是用 TextDecoder 分块解码，避免内存暴涨和单次长解析。

WebSocket 8.18.2

WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。

下载

服务端需按固定 chunk 大小（如 64KB）分片发送，每帧带 sequence ID 和 isLast 标志
前端用 Uint8Array 缓存所有分片，拼接后再解码，而非每次解码整块
TextDecoder 实例可复用，避免重复初始化开销
示例关键逻辑：

let buffer = new Uint8Array(); // 全局缓存
const decoder = new TextDecoder('utf-8');

socket.onmessage = (event) => {
  if (event.data instanceof ArrayBuffer) {
    const chunk = new Uint8Array(event.data);
    buffer = concatUint8Arrays(buffer, chunk); // 自定义拼接函数
    if (isLastChunk(chunk)) { // 依据自定义帧头判断
      try {
        const jsonStr = decoder.decode(buffer);
        const data = JSON.parse(jsonStr); // 此时才真正 parse
        handleData(data);
      } catch (e) {
        console.error('Parse failed:', e);
      }
      buffer = new Uint8Array(); // 清空
    }
  }
};