针对大型数据集优化ajax请求

Question

需要一些有关ajax用例的帮助。 我需要在大约45 MB的数据上绘制图形，我在单击按钮时发送ajax请求以从服务器获取该数据，然后根据响应在客户端上绘制图形。

问题是由于内容大小而引起的。内容下载时间很长，大约为23秒。我需要将其优化为5秒左右。

有人可以为此用例推荐解决方案吗？

我附上了ajax请求的计时统计信息。 AJAX REQUEST STATS IMAGE

这是ajax函数

<script>

    function generateGraph() {
        $.ajax({
            type: "GET",
            url: "/test",
            success: function (data) {
                var records = data;
                console.log(records.length);
                var x = records[0];
                var y = records[1];
                Plotly.addTraces('myDiv', [
                    {
                        x: x,
                        y: records[1],
                        type: 'scattergl',
                        mode: "line"
                    },
                    {
                        x: x,
                        y: records[2],
                        type: 'scattergl',
                        mode: "line"
                    },
                    {
                        x: x,
                        y: records[3],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[4],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[5],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[6],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[7],
                        type: 'scattergl'
                    }, {
                        x: x,
                        y: records[3],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[8],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[9],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[10],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[11],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[12],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[13],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[14],
                        type: 'scattergl',
                        mode: "line"
                    }, {
                        x: x,
                        y: records[15],
                        type: 'scattergl',
                        mode: "line"
                    },
                    {
                        x: x,
                        y: records[16],
                        type: 'scattergl',
                        mode: "line"
                    },
                    {
                        x: x,
                        y: records[17],
                        type: 'scattergl',
                        mode: "line"
                    },
                    {
                        x: x,
                        y: records[18],
                        type: 'scattergl',
                        mode: "line"
                    }
                ]);

            }
        });
    }

    Plotly.newPlot('myDiv', [{type: 'scattergl'}], {});
</script>