大 JSON 文件如何格式化？性能优化完整指南（2026）

1
const fs = require('fs');
2
const { Transform } = require('stream');
3

4
class JSONStreamParser extends Transform {
5
    constructor(options) {
6
        super({ ...options, objectMode: true });
7
        this.buffer = '';
8
        this.depth = 0;
9
        this.inString = false;
10
        this.escaped = false;
11
    }
12

13
    _transform(chunk, encoding, callback) {
14
        this.buffer += chunk.toString();
15

16
        // 逐字符解析
17
        for (let i = 0; i < this.buffer.length; i++) {
18
            const char = this.buffer[i];
19

20
            if (this.escaped) {
21
                this.escaped = false;
22
                continue;
23
            }
24

25
            if (char === '\\') {
26
                this.escaped = true;
27
                continue;
28
            }
29

30
            if (char === '"') {
31
                this.inString = !this.inString;
32
                continue;
33
            }
34

35
            if (!this.inString) {
36
                if (char === '{' || char === '[') {
37
                    this.depth++;
38
                } else if (char === '}' || char === ']') {
39
                    this.depth--;
40
                }
41

42
                // 完整对象/数组
43
                if (this.depth === 0 && (char === '}' || char === ']')) {
44
                    this.push(this.buffer.substring(0, i + 1));
45
                    this.buffer = this.buffer.substring(i + 1);
46
                    i = -1; // 重置索引
47
                }
48
            }
49
        }
50

51
        callback();
52
    }
53
}
54

55
// 使用示例
56
const parser = new JSONStreamParser();
57
const readStream = fs.createReadStream('large.json', {
58
    highWaterMark: 64 * 1024 // 64KB 缓冲区
59
});
60

61
readStream.pipe(parser);
62

63
parser.on('data', (chunk) => {
64
    try {
65
        const obj = JSON.parse(chunk);
66
        console.log('处理对象:', obj);
67
    } catch (e) {
68
        console.error('解析错误:', e.message);
69
    }
70
});

1
const fs = require('fs');
2

3
async function* readJSONArray(filepath, chunkSize = 1024 * 1024) {
4
    const fd = await fs.promises.open(filepath, 'r');
5
    const buffer = Buffer.alloc(chunkSize);
6
    let position = 0;
7
    let bufferContent = '';
8
    let arrayStarted = false;
9
    let depth = 0;
10

11
    try {
12
        while (true) {
13
            const { bytesRead } = await fd.read(buffer, 0, chunkSize, position);
14
            if (bytesRead === 0) break;
15

16
            bufferContent += buffer.toString('utf8', 0, bytesRead);
17
            position += bytesRead;
18

19
            // 跳过开头空白
20
            if (!arrayStarted) {
21
                const trimmed = bufferContent.trim();
22
                if (trimmed.startsWith('[')) {
23
                    arrayStarted = true;
24
                    bufferContent = trimmed.substring(1);
25
                }
26
            }
27

28
            // 提取完整对象
29
            for (let i = 0; i < bufferContent.length; i++) {
30
                const char = bufferContent[i];
31

32
                if (char === '{') depth++;
33
                if (char === '}') depth--;
34

35
                if (depth === 0 && char === '}') {
36
                    const objStr = bufferContent.substring(0, i + 1).trim();
37
                    if (objStr) {
38
                        try {
39
                            yield JSON.parse(objStr);
40
                        } catch (e) {
41
                            console.error('解析错误:', e.message);
42
                        }
43
                    }
44
                    bufferContent = bufferContent.substring(i + 1).replace(/^[,\s]*/, '');
45
                    i = -1;
46
                    depth = 0;
47
                }
48
            }
49
        }
50
    } finally {
51
        await fd.close();
52
    }
53
}
54

55
// 使用示例
56
(async () => {
57
    for await (const obj of readJSONArray('large.json')) {
58
        console.log('对象:', obj);
59
        // 处理每个对象
60
    }
61
})();

1
const worker = new Worker('worker.js');
2

3
worker.onmessage = function(e) {
4
    if (e.data.success) {
5
        console.log('格式化完成:', e.data.data);
6
    } else {
7
        console.error('格式化失败:', e.data.error);
8
    }
9
};
10

11
// 发送大文件
12
fetch('large.json')
13
    .then(res => res.text())
14
    .then(text => {
15
        worker.postMessage({ json: text, indent: 2 });
16
    });

1
class VirtualJSONViewer {
2
    constructor(container, data) {
3
        this.container = container;
4
        this.data = data;
5
        this.itemHeight = 24;
6
        this.visibleCount = Math.ceil(container.clientHeight / this.itemHeight);
7
        this.scrollTop = 0;
8

9
        this.init();
10
    }
11

12
    init() {
13
        this.container.style.overflow = 'auto';
14
        this.container.style.height = `${this.data.length * this.itemHeight}px`;
15
        this.container.style.position = 'relative';
16

17
        this.viewport = document.createElement('div');
18
        this.viewport.style.position = 'absolute';
19
        this.viewport.style.top = '0';
20
        this.viewport.style.left = '0';
21
        this.viewport.style.right = '0';
22

23
        this.container.appendChild(this.viewport);
24
        this.container.addEventListener('scroll', () => this.onScroll());
25

26
        this.render();
27
    }
28

29
    onScroll() {
30
        this.scrollTop = this.container.scrollTop;
31
        this.render();
32
    }
33

34
    render() {
35
        const startIndex = Math.floor(this.scrollTop / this.itemHeight);
36
        const endIndex = Math.min(startIndex + this.visibleCount, this.data.length);
37

38
        this.viewport.style.transform = `translateY(${startIndex * this.itemHeight}px)`;
39

40
        let html = '';
41
        for (let i = startIndex; i < endIndex; i++) {
42
            html += `<div style="height: ${this.itemHeight}px; line-height: ${this.itemHeight}px;">`;
43
            html += this.formatLine(this.data[i]);
44
            html += '</div>';
45
        }
46

47
        this.viewport.innerHTML = html;
48
    }
49

50
    formatLine(item) {
51
        // 格式化单行 JSON
52
        return `<pre>${JSON.stringify(item, null, 2)}</pre>`;
53
    }
54
}
55

56
// 使用示例
57
fetch('large-array.json')
58
    .then(res => res.json())
59
    .then(data => {
60
        const viewer = new VirtualJSONViewer(
61
            document.getElementById('container'),
62
            data
63
        );
64
    });

1
// ❌ 不推荐：嵌套过深
2
{
3
  "data": {
4
    "users": {
5
      "list": {
6
        "items": [
7
          {
8
            "profile": {
9
              "name": "John"
10
            }
11
          }
12
        ]
13
      }
14
    }
15
  }
16
}
17

18
// ✅ 推荐：扁平化
19
{
20
  "users": [
21
    {
22
      "profile_name": "John"
23
    }
24
  ]
25
}