MB级多对象文件解析优化：提升图表加载性能方案咨询

问题背景 #

我需要处理MB级的多对象文本文件，用于在单页展示多图表：

• 用chart1至chart5数组存储各图表Y轴数据，xAxisTime作为通用X轴数据
• 每个数组约包含50000条值，其中仅2000-4000条为真实数据，其余为null（用于保持图表与任务时间线对齐，以及实现plotline tooltip功能）

当前解析代码：

data = fileWithMultipleObjects;
objects= data.split('\n');
for (var i= 0; i < objects.length - 2; i++) {
    var obj = JSON.parse(objects[i])

    if (obj.type=== "A") {
        chart1.push(obj.c1)
        chart2.push(obj.c2)
    }
    else {
        chart1.push(null)
        chart2.push(null)
    }  
    if (obj.type=== "B") {
        chart3.push(obj.c3)
        chart4.push(obj.c4)      
        chart5.push(obj.c5)                
    }
    else {
        chart3.push(null)
        chart4.push(null)   
        chart5.push(null)                           
    }         
    //common for all charts - xAxis data
    if (obj.date === undefined) {
        obj.date = null
    }

    if (obj.date!== null) {  
        var date= obj.date          
        xAxisTime.push(date)
    }
}

尝试过的单次JSON解析方式：

var convertStringToJsonFormat= "[" + data.split('\n').join(", ")
JsonFormat = convertStringToJsonFormat.slice(0, -2);
JsonFormat = JsonFormat + "]"     
data = JSON.parse(JsonFormat)

文件数据结构示例：

{"C1":55.77,"C2":11367.25,"type":"A","date":"10/24/2022 12:05:37.236"}
{"C3":55.77,"C4":11367.25,"type":"B","date":"10/24/2022 12:05:37.236","C5":445.21}
{"C1":55.77,"C2":11367.25,"type":"A","date":"10/24/2022 12:05:37.236"}
{"C1":55.77,"C2":11367.25,"type":"A","date":"10/24/2022 12:05:37.240"}
{"C3":55.77,"C4":11367.25,"type":"B","date":"10/24/2022 12:05:37.250","C5":445.25}
{"C3":55.77,"C4":11367.25,"type":"B","date":"10/24/2022 12:05:37.275","C5":445.26}

目前图表加载耗时较长，以下是针对性的优化方案：

优化方案 #

1. 减少数组push操作的性能损耗 #

数组push在大规模数据场景下会频繁触发内存扩容，预先初始化数组长度并通过索引直接赋值，能大幅提升性能。

const data = fileWithMultipleObjects;
const objects = data.split('\n');
const totalItems = objects.length - 2;

// 预先初始化数组长度，避免频繁扩容
const chart1 = new Array(totalItems);
const chart2 = new Array(totalItems);
const chart3 = new Array(totalItems);
const chart4 = new Array(totalItems);
const chart5 = new Array(totalItems);
const xAxisTime = new Array(totalItems);

for (let i = 0; i < totalItems; i++) {
    const obj = JSON.parse(objects[i]);
    const objType = obj.type;

    // 处理chart1、chart2（注意原数据是大写C1/C2，原代码小写c1/c2可能是笔误）
    if (objType === "A") {
        chart1[i] = obj.C1;
        chart2[i] = obj.C2;
    } else {
        chart1[i] = null;
        chart2[i] = null;
    }

    // 处理chart3、chart4、chart5
    if (objType === "B") {
        chart3[i] = obj.C3;
        chart4[i] = obj.C4;
        chart5[i] = obj.C5;
    } else {
        chart3[i] = null;
        chart4[i] = null;
        chart5[i] = null;
    }

    // 简化X轴时间处理
    xAxisTime[i] = obj.date ?? null;
}

2. 优化JSON解析效率 #

原生JSON.parse对批量数据的解析效率远高于循环多次解析，改进单次解析的实现逻辑，避免手动切片的错误：

// 更安全的批量JSON解析方式
const cleanedData = data.trim().replace(/\n+/g, ',').replace(/,$/, '');
const dataArray = JSON.parse(`[${cleanedData}]`);

const totalItems = dataArray.length;
// 同样预初始化所有数组
const chart1 = new Array(totalItems);
const chart2 = new Array(totalItems);
const chart3 = new Array(totalItems);
const chart4 = new Array(totalItems);
const chart5 = new Array(totalItems);
const xAxisTime = new Array(totalItems);

for (let i = 0; i < totalItems; i++) {
    const obj = dataArray[i];
    const objType = obj.type;

    // 简化分支判断逻辑
    chart1[i] = objType === "A" ? obj.C1 : null;
    chart2[i] = objType === "A" ? obj.C2 : null;
    chart3[i] = objType === "B" ? obj.C3 : null;
    chart4[i] = objType === "B" ? obj.C4 : null;
    chart5[i] = objType === "B" ? obj.C5 : null;
    xAxisTime[i] = obj.date ?? null;
}

3. 避免冗余属性访问与判断 #

将obj.type存储到临时变量，减少重复的对象属性查找；用三元表达式简化分支逻辑，提升代码执行效率：

// 示例：简化分支判断
const objType = obj.type;
chart1[i] = objType === "A" ? obj.C1 : null;
chart2[i] = objType === "A" ? obj.C2 : null;
chart3[i] = objType === "B" ? obj.C3 : null;
chart4[i] = objType === "B" ? obj.C4 : null;
chart5[i] = objType === "B" ? obj.C5 : null;

4. 图表渲染层面优化 #

如果图表加载慢的核心原因是渲染5万条数据，可从以下方向优化：

• 数据降采样：合并相邻的null或相同时间点的重复数据，减少渲染条目数
• 懒加载/按需渲染：仅渲染当前视图范围内的数据，滚动时动态加载其他数据
• 调整图表配置：如果使用的图表库支持，开启数据分组、禁用不必要的动画或交互，降低渲染压力
• 替换稀疏数组存储：如果null仅用于时间线对齐，可改为存储真实数据的索引与对应时间，图表渲染时通过计算补位（需配合图表库的非连续轴配置）

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