JavaScript读取二进制结构化数据的最优实现方案咨询

实现说明 #

针对你的需求，直接使用原生JS的DataView接口即可完成所有解析操作，无需引入第三方依赖，且原生支持16位浮点数读取，完全匹配你的要求：

• 主流浏览器从2022年开始已全面支持DataView.getFloat16()方法，刚好可以对应你Python struct里的e格式字符
• 无需服务端参与，所有解析逻辑都在前端完成，适配纯静态站点的要求
• 1MB的二进制文件解析耗时基本在毫秒级，不会有性能问题

完整代码实现 #

我对你的原有代码做了补充，同时封装为Promise方便后续调用，你可以根据自己实际的字段结构调整字节偏移量和读取逻辑：

function loadBinaryFloatArray(url) {
  return new Promise((resolve, reject) => {
    const mRequest = new XMLHttpRequest();
    mRequest.open('GET', url);
    mRequest.responseType = 'arraybuffer';

    mRequest.onreadystatechange = function () {
      if (this.readyState !== 4) return;
      if (this.status !== 200) {
        reject(new Error(`加载失败，状态码：${this.status}`));
        return;
      }

      const buffer = this.response;
      const view = new DataView(buffer);
      const result = [];
      // 字节偏移量，从0开始
      let offset = 0;
      // 小端模式，和Python struct打包时的字节序保持一致，如果你的Python用了大端这里改为false
      const littleEndian = true;

      // 这里假设每条数据的结构是：字符串1长度(1字节) + 字符串1内容 + 字符串2长度(1字节) + 字符串2内容 + 数字字段(ehifeefff)
      // 如果你是固定长度的字符串，直接替换下面的字符串读取逻辑即可
      while (offset < buffer.byteLength) {
        const item = {};
        // 读取两个字符串
        const str1Len = view.getUint8(offset);
        offset += 1;
        item.str1 = new TextDecoder().decode(new Uint8Array(buffer, offset, str1Len));
        offset += str1Len;

        const str2Len = view.getUint8(offset);
        offset += 1;
        item.str2 = new TextDecoder().decode(new Uint8Array(buffer, offset, str2Len));
        offset += str2Len;

        // 读取对应数字字段，对应Python struct的 'ehifeefff' 格式
        item.diameter = view.getFloat16(offset, littleEndian);
        offset += 2;
        item.type = view.getInt16(offset, littleEndian);
        offset += 2;
        item.epoch = view.getInt32(offset, littleEndian);
        offset += 4;
        item.a = view.getFloat32(offset, littleEndian);
        offset += 4;
        item.e = view.getFloat16(offset, littleEndian);
        offset += 2;
        item.i = view.getFloat16(offset, littleEndian);
        offset += 2;
        item.om = view.getFloat32(offset, littleEndian);
        offset += 4;
        item.w = view.getFloat32(offset, littleEndian);
        offset += 4;
        item.ma = view.getFloat32(offset, littleEndian);
        offset += 4;

        result.push(item);
      }

      resolve(result);
    };

    mRequest.onerror = () => reject(new Error('网络请求失败'));
    mRequest.send();
  })
}

// 调用示例
loadBinaryFloatArray("/data/sbdb_important.bin")
  .then(data => {
    console.log('解析完成，共%d条数据', data.length);
    // 后续处理逻辑
  })
  .catch(err => console.error(err));

console.log("Test")

Python打包端适配建议 #

• 打包时显式指定字节序，比如把格式字符改为<ehifeefff，明确使用小端模式，避免不同系统下字节序不匹配导致解析错乱
• 如果需要兼容非常老的浏览器（比如2022年之前的Chrome、Firefox版本），可以把Python里的e替换为f使用32位浮点数，或者前端补充16位浮点数转32位的转换逻辑，目前96%以上的用户设备都原生支持16位浮点数读取，不需要额外兼容
• 如果你的两个字符串是固定长度的，可以省略长度位直接写入固定字节，前端读取时直接取对应长度即可，解析速度更快

可选优化 #

你可以在二进制文件的最开头加入几个字节的头信息，比如存储总条目数、字段版本号，后续调整字段结构时不需要修改太多前端解析逻辑，兼容性更好。

内容的提问来源于stack exchange，提问作者PearsonArtPhoto