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

需要一些有关ajax用例的帮助。

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

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

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

这是ajax函数

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'}], {});