你能读多大的 JSON 文件？我试了 500MB，发现 JSON.parse 会直接让页面崩溃

你能读多大的 JSON 文件？我试了 500MB，发现 JSON.parse 会直接让页面崩溃

导语

上周同事找我救命，他说线上日志功能挂了。用户上传了一个 500MB 的 JSON 文件，浏览器直接崩溃，监控面板一片红。我一看代码：const data = await response.json()，一句话写完了整个页面。这是前端最常见的性能陷阱之一：拿着 JSON.parse 处理大文件，结果就是内存爆炸、页面卡死。 这篇文章不讲虚的，我直接给你三种解决方案，从浏览器端到 Node 端，全部带可运行代码和实测数据。

问题：JSON.parse 到底能吃多大文件？

先做个实验。我用 Node.js 生成了一个 500MB 的 JSON 文件（一个包含 200 万条用户记录的数组），然后在前端用最传统的方式加载：

// ❌ 最常见但最危险的方式
const response = await fetch('/data/users.json');
const data = await response.json();
// data 现在占用了 500MB+ 内存，浏览器 GC 开始疯狂工作

跑出来的结果：

核心问题：JSON.parse() 是一个”全有或全无”的操作。它必须先完整接收到整段 JSON 字符串，然后在内存中构建整个对象树。这意味着你的内存占用至少是文件大小的 2-3 倍（解析后的 JS 对象比原始 JSON 更占内存）。

更糟的是，如果你的 JSON 是一个数组（大部分场景都是），你即使只需要前几条数据，也得等所有数据全部解析完。

方案一：NDJSON + Fetch Streaming（浏览器端，推荐）

NDJSON（Newline Delimited JSON）是我认为 浏览器端处理大 JSON 最优雅的方案。核心思路：把一个大 JSON 数组拆成一行一个 JSON 对象，配合浏览器原生的 ReadableStream 流式读取。

后端配合：把接口改成 NDJSON 格式

不要返回 [{"name":"Alice"},{"name":"Bob"},...]，改成：

{"name":"Alice"}
{"name":"Bob"}
{"name":"Charlie"}

每行一个独立 JSON 对象，行末以 n 分隔。这比 JSON 数组的好处是：每一行可以独立解析，不需要等待全部数据。

前端流式处理代码

async function fetchNDJSON(url, onItem) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let buffer = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    // 关键：stream: true 处理跨 chunk 的 UTF-8 字符
    buffer += decoder.decode(value, { stream: true });

    // 按行分割
    const lines = buffer.split('n');
    // 保留最后一个不完整的行
    buffer = lines.pop();

    for (const line of lines) {
      if (line.trim()) {
        try {
          const item = JSON.parse(line);
          // 每来一条数据立即处理，不用等全部
          onItem(item);
        } catch (e) {
          console.warn('解析行失败:', line.slice(0, 50));
        }
      }
    }
  }

  // 处理剩余数据
  if (buffer.trim()) {
    try {
      onItem(JSON.parse(buffer));
    } catch (e) {}
  }
}

使用方式：

const users = [];
fetchNDJSON('/api/users.ndjson', (user) => {
  users.push(user);
  // 可以每来 100 条更新一次表格
  if (users.length % 100 === 0) {
    renderTable(users);
  }
}).then(() => {
  console.log(`全部加载完成，共 ${users.length} 条`);
});

实测数据

NDJSON 方案把内存占用从 2GB+ 降到了 180MB，而且首条数据 0.5s 后就能渲染到页面上。

> 注意：这个 reader.read() 天然带背压（backpressure）。如果 onItem 处理很慢（比如做 DOM 操作），下次 read() 会自动等待，不会让内存无限堆积。

方案二：浏览器端用 TransformStream 做数据管道（无第三方库）

如果你只想用标准 API，不引入任何库，TransformStream 是浏览器 2026 年已经全面支持的能力：

async function streamJSON(url) {
  const response = await fetch(url);
  
  // 创建一个转换流：将二进制流拆分成行
  const lineSplitter = new TransformStream({
    start() {
      this.buffer = '';
    },
    transform(chunk, controller) {
      this.buffer += new TextDecoder().decode(chunk, { stream: true });
      const lines = this.buffer.split('n');
      this.buffer = lines.pop();
      for (const line of lines) {
        if (line.trim()) {
          controller.enqueue(line);
        }
      }
    },
    flush(controller) {
      if (this.buffer.trim()) {
        controller.enqueue(this.buffer);
      }
    }
  });

  const lineStream = response.body.pipeThrough(lineSplitter);
  const reader = lineStream.getReader();
  const decoder = new TextDecoder();
  let count = 0;

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    
    const item = JSON.parse(value);
    count++;
    
    // 每 1000 条批量更新一次 UI
    if (count % 1000 === 0) {
      updateProgress(count);
    }
  }
}

这套方案的好处是 零依赖，且 pipeThrough 会自动处理背压。浏览器不会因为数据处理不过来而把内存撑爆。

方案三：Node.js 端用 stream-json 处理超大文件（后端）

如果你在 Node.js 环境下处理大 JSON（比如日志分析、数据导入），推荐用 stream-json 这个库。它提供了一个 SAX 风格的流式 JSON 解析器：

const { chain } = require('stream-chain');
const { parser } = require('stream-json');
const { streamValues } = require('stream-json/streamers/StreamValues');
const fs = require('fs');

const pipeline = chain([
  fs.createReadStream('500mb-data.json'),
  parser(),
  streamValues()
]);

let count = 0;
pipeline.on('data', ({ value }) => {
  count++;
  // 每一条数据独立处理，不占内存
  if (count % 10000 === 0) {
    console.log(`已处理 ${count} 条记录`);
  }
});

pipeline.on('end', () => {
  console.log(`全部完成，共 ${count} 条`);
});

用这个方案的实测结果：

流式方案只慢了 20% 左右，但内存占用从 1.9GB 降到了 65MB，少了 29 倍。

方案四：处理”历史遗留”的标准 JSON 数组

现实中有很多接口你改不了，后端就是返回 [{...},{...},{...}] 这种标准数组。这时候可以用 clarinet（SAX 风格流式 JSON 解析器）或者 partial-json-parser：

// 用 clarinet 流式解析标准 JSON 数组
import clarinet from 'clarinet';

function parseStreamedJSON(url) {
  return new Promise((resolve) => {
    const stream = clarinet.createStream();
    const items = [];
    let currentDepth = 0;
    let inArray = false;

    stream.on('openarray', () => { inArray = true; });
    stream.on('closearray', () => { inArray = false; });
    stream.on('openobject', () => { currentDepth++; });
    stream.on('closeobject', () => {
      currentDepth--;
      // 最外层数组中的每个对象解析完成
    });

    // 通过 fetch + reader 把数据喂给 clarinet
    fetch(url).then(res => {
      const reader = res.body.getReader();
      const decoder = new TextDecoder();
      
      function pump() {
        reader.read().then(({ done, value }) => {
          if (done) { stream.end(); resolve(items); return; }
          stream.write(decoder.decode(value, { stream: true }));
          pump();
        });
      }
      pump();
    });
  });
}

选型指南：该用哪个方案？

我根据自己的实战经验总结了一张判断表：

收尾

大 JSON 文件处理其实没有银弹，但有一条清晰的判断路径：如果是新项目，选 NDJSON + Fetch Streaming；如果是旧项目，先用 TransformStream 顶住；如果是后端处理，直接上 stream-json。 关键是意识到 JSON.parse 不是万能的，遇到大文件要想到”流式”这个武器。

建议你把上面 NDJSON 那段代码封装成一个工具函数，放到你的项目工具库里。下一个 500MB 文件来的时候，你的页面不会崩溃，甚至用户都感知不到数据是”流”进来的。

参考

• MDN: ReadableStream / TransformStream / TextDecoder
• GitHub: stream-json (npm: stream-json)
• GitHub: clarinet — SAX streaming JSON parser
• GitHub: ndjson/ndjson-spec — NDJSON 规范