JSON与XML在文件上传场景中的性能对比

10次阅读

jsON 和 xml 在 multipart/form-data 文件上传中不直接参与文件传输,仅可能用于附带的元数据;json 更轻量高效,XML 冗长且解析开销大,文件本体传输性能不受二者影响。

JSON与XML在文件上传场景中的性能对比

JSON 和 XML 在 multipart/form-data 上传中根本不会直接出现

文件上传走的是 multipart/form-data 编码,它和 JSON、XML 没有直接关系——你不能把一个 {"file": "base64..."} 的 JSON 当作文件字段发给后端并期望它被识别为上传文件。浏览器原生 提交的永远是二进制分段数据,不是文本格式序列化结果。

真正对比的是 API 接口层的数据交换格式(非文件部分)

当上传请求附带元数据(如 titletagsuser_id)时,这些字段可能以 JSON 或 XML 形式嵌在 multipart 的某个文本 part 中,也可能由前端在 query/body 中额外发起一次独立请求。此时才涉及格式选择:

  • JSON 更轻量:无结束标签、无命名空间、默认 UTF-8、解析快;Content-Type 通常为 application/json
  • XML 更冗长:需闭合标签、可含 DTD/Schema、编码声明易出错;Content-Type 通常为 application/xmltext/xml
  • 现代浏览器JSON.parse() 优化极好,而 DOMParser 解析 XML 开销明显更高,尤其在移动端
  • 如果你用的是 fetch + FormData,元数据应作为独立字段追加,而非塞进 JSON 字符串再 base64 —— 后端无法按标准 multipart 方式提取

常见错误:把 JSON 字符串当文件内容上传

有人会写这样的代码,以为是在传“JSON 格式的文件”:

const data = new FormData(); data.append('metadata', JSON.stringify({ title: 'report', version: 2 })); data.append('file', fileinput.files[0]);

这没问题——metadata 是普通文本字段,后端收到的是纯字符串,不是 JSON 对象。但如果你改成这样:

const data = new FormData(); data.append('payload', new Blob([JSON.stringify({ title: 'report', file: fileContent })], { type: 'application/json' }));

那就错了:fileContent 是二进制(比如 ArrayBuffer),JSON.stringify 会把它转成 "{}" 或报错;且后端必须手动解析这个 JSON blob,失去了 multipart 的流式处理能力,还可能触发内存溢出。

性能差异实际只体现在元数据解析阶段

实测 10KB 元数据在 node.jsexpress + multer)下:

  • JSON 解析平均耗时约 0.15msJSON.parse()
  • XML 解析(用 fast-xml-parser)平均耗时约 0.8ms,错误容忍度更低(如缺失 直接抛异常)
  • 文件本体传输耗时完全不受影响——它走的是原始字节流,不经过 JSON/XML 序列化/反序列化
  • 移动端弱网下,XML 多出的标签字符会略微增加首字节时间(TTFB),但差距通常小于 5ms

真正卡顿往往来自没做分片上传、没压缩图片、或后端同步处理大文件——而不是选了 JSON 还是 XML。

text=ZqhQzanResources