HTML5 WebSocket默认支持二进制传输，设binaryType="arraybuffer"后可直接收发ArrayBuffer及视图（如Uint8Array、DataView），避免Blob转换开销和Base64编码；发送需传入缓冲区实例，接收后可用视图解析字节或结构化字段，并注意内存复用与帧大小限制。
在HTML5中，WebSocket默认支持二进制数据传输，结合 ArrayBuffer 可高效发送和接收原始字节流（如图片、音频、协议包等），避免Base64编码开销和字符串解析负担。
启用WebSocket二进制类型
创建WebSocket连接后，需显式设置 binaryType 为 "arraybuffer"，否则接收到的二进制消息会以 Blob 形式返回，需额外读取转换：
ws.binaryType = "arraybuffer";- 该设置应在
open事件之后、发送/接收前完成 - 若未设置，
onmessage中event.data类型为Blob，需用blob.arrayBuffer()转换，增加异步开销
发送ArrayBuffer数据
可直接调用 ws.send() 传入 ArrayBuffer 或其视图（如 Uint8Array、DataView）：
- 例如构造一个4字节整数并发送：
const buf = new ArrayBuffer(4);<br> const view = new DataView(buf);<br> view.setUint32(0, 123456789, true); // 小端序<br> ws.send(buf); - 也可发送已有的 typed array：
ws.send(new Uint8Array([0x01, 0x02, 0x03])); - 注意：不能直接发送普通对象或字符串；若需结构化数据，建议先序列化为
ArrayBuffer（如用TextEncoder编码字符串，或自定义二进制协议）
接收并解析ArrayBuffer
当 binaryType 设为 "arraybuffer" 后，onmessage 的 event.data 即为 ArrayBuffer 实例：
立即学习“前端免费学习笔记（深入）”；
- 使用
Uint8Array快速访问字节：
ws.onmessage = (e) => {<br> if (e.data instanceof ArrayBuffer) {<br> const bytes = new Uint8Array(e.data);<br> console.log("Received", bytes.length, "bytes:", bytes);<br> }<br> }; - 用
DataView解析多字节字段（如头部+负载）：
const dv = new DataView(e.data);<br> const magic = dv.getUint16(0, false); // 大端序读取前2字节<br> const len = dv.getUint32(2, false); // 接着读取4字节长度 - 注意：
ArrayBuffer是只读的，若需修改内容，应基于它创建新的视图或复制
内存与性能注意事项
频繁传输大量二进制数据时，需关注内存复用与拷贝成本：
- 避免每次发送都新建大
ArrayBuffer；可复用缓冲区（如Uint8Array池），但需确保发送完成后再重用（WebSocket发送是异步的） - 接收端无需手动释放
ArrayBuffer，JS垃圾回收自动处理；但若长期持有（如缓存未解析的数据），可能延迟回收 - 对超大帧（如视频帧），考虑分片发送或服务端启用 WebSocket 帧分片（需双方协议支持），浏览器通常对单帧大小无硬限制，但受内存和网络MTU影响
