BinaryType 并非 HTML5 标准全局属性，而是 XMLHttpRequest 的 responseType、Fetch 的响应方法及 WebSocket 的 binaryType 属性所涉及的二进制数据格式控制机制，分别对应 Blob 与 ArrayBuffer 两种类型。
在 HTML5 中，BinaryType 并不是标准的全局属性或配置项，它常见于 WebSocket 或某些浏览器私有 API（如旧版 Firefox 的 MozWebSocket）中，用于指定二进制数据的接收格式。但需注意：**现代标准 WebSocket 接口本身并不提供 binaryType 属性的设置能力**；真正支持该属性的是 XMLHttpRequest（XHR） 和 Fetch API 的 Response 对象，以及 WebRTC 的 DataChannel 等场景。下面按常用上下文分别说明：
XMLHttpRequest 中设置 binaryType
XMLHttpRequest 支持通过 responseType 控制响应体解析方式，其值可设为 "blob" 或 "arraybuffer"（注意大小写），对应二进制数据的两种封装形式：
-
responseType = "blob"：响应以Blob对象返回，适合下载文件、读取图片、后续用URL.createObjectURL()渲染等场景。 -
responseType = "arraybuffer"：响应以原始字节缓冲区ArrayBuffer返回，适合需要逐字节操作、解码协议（如 WebSocket 帧、自定义二进制格式）、配合TypedArray或DataView解析的场景。
示例：
const xhr = new XMLHttpRequest();
xhr.open('GET', '/data.bin');
xhr.responseType = 'arraybuffer'; // 或 'blob'
xhr.onload = function() {
if (xhr.status === 200) {
const data = xhr.response; // ArrayBuffer 或 Blob
// 后续处理...
}
};
xhr.send();
Fetch API 中获取二进制数据
Fetch 不提供类似 binaryType 的设置项，而是通过调用响应对象的不同方法来获取不同类型的二进制数据：
立即学习“前端免费学习笔记（深入）”；
-
response.arrayBuffer()→ 返回Promise<ArrayBuffer> -
response.blob()→ 返回Promise<Blob> - 也可用
response.text()或response.json()，但不适用于纯二进制流
示例：
fetch('/data.bin')
.then(res => res.arrayBuffer()) // 或 res.blob()
.then(buffer => {
// buffer 是 ArrayBuffer 实例
const view = new Uint8Array(buffer);
console.log(view[0]); // 第一个字节
});
WebSocket 中的二进制接收（注意兼容性）
标准 WebSocket 规范中，binaryType 是 WebSocket 实例的一个可写属性（仅部分浏览器支持，Chrome/Firefox/Edge 均已支持），用于指定 onmessage 事件中 event.data 的类型：
-
ws.binaryType = 'blob'→event.data是Blob -
ws.binaryType = 'arraybuffer'→event.data是ArrayBuffer - 默认值通常是
'blob'，但规范未强制，建议显式设置
示例：
const ws = new WebSocket('wss://example.com');
ws.binaryType = 'arraybuffer'; // 关键设置
ws.onmessage = function(event) {
if (event.data instanceof ArrayBuffer) {
const view = new DataView(event.data);
// 解析二进制帧...
}
};
选择 Blob 还是 ArrayBuffer？关键看用途
二者本质都是二进制容器，但适用场景不同：
- Blob：不可直接读写，适合大文件、流式处理、与文件系统/URL API 交互（如上传、下载、播放视频）；内存占用低（底层可能延迟加载）。
-
ArrayBuffer：可直接访问字节（配合
Uint8Array、DataView），适合解析协议、图像处理、加密计算等需要精细控制的场景；会立即分配并持有全部内存。 - 二者可相互转换：
new Blob([arrayBuffer])，或用FileReader.readAsArrayBuffer(blob)反向转换。
不复杂但容易忽略：设置前确认浏览器支持，并在接收后及时释放资源（如不再需要时调用 URL.revokeObjectURL() 或避免长期持有大 ArrayBuffer）。
