在 django 应用程序中加载的 Ajax 调用时间
Posted
技术标签:
【中文标题】在 django 应用程序中加载的 Ajax 调用时间【英文标题】：Ajax call time to load in django application 【发布时间】：2018-09-18 16:28:42 【问题描述】：我正在使用带有 chart.JS 的 Django Rest 框架开发一个 django 应用程序，以呈现一些图表。
我的 ajax 调用需要很长时间，我在本地.. 有没有办法检查什么需要这么长时间才能知道在哪里进行重构？
每次本地平均需要 10 到 15 秒.. 这是我的代码示例：
<script>
var endpoint = 'api/chart/data2'
$('.ajaxProgress').show();
$('.dashboard-container').hide();
function getAvg(grades)
return grades.reduce(function (p, c)
return p + c;
) / grades.length;
$.ajax(
method: "GET",
url: endpoint,
success: function(data)
console.log(data)
complete_data = data.team_complete,
info_data = data.team_info_score,
motiv_data = data.team_motiv_score,
action_data = data.team_action_score,
behaviour_data = data.team_behaviour_score,
user_list = data.users,
user_dist = data.user_dist,
info_dist = data.info_dist,
motiv_dist = data.motiv_dist,
action_dist = data.action_dist,
behav_dist = data.behav_dist,
info_label = data.info_label,
motivation_label = data.motivation_label,
action_label = data.action_label,
behav_label = data.behav_label,
complete_label = data.complete_label,
cohesiveness_score = data.cohesiveness_score
var bar_color = [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 220, 89, 0.2)',
'rgba(255, 192, 35, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 220, 89, 0.2)',
'rgba(255, 192, 35, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(255, 99, 132, 0.2)'
]
var ctx = document.getElementById("mainGraph").getContext('2d');
var ctx2 = document.getElementById("mainGraph2").getContext('2d');
var ctx3 = document.getElementById("mainGraphLine1").getContext('2d');
var ctx4 = document.getElementById("mainGraphLine2").getContext('2d');
var ctx5 = document.getElementById("mainGraphLine3").getContext('2d');
var ctx6 = document.getElementById("mainGraphLine4").getContext('2d');
$('.ajaxProgress').hide();
$('.dashboard-container').show();
var canvas = document.getElementById("mainGraph");
var mainGraph = new Chart(ctx,
type: 'bar',
data:
labels: complete_label,
datasets: [
data: complete_data,
backgroundColor: bar_color ,
]
,
options:
legend:
position: 'top',
display: false
,
responsive:true,
maintainAspectRatio: false,
scales:
xAxes: [
ticks: autoSkip: false
]
,
);
//end graph 1//
canvas.onclick = function(evt)
var activePoints = mainGraph.getElementsAtEvent(evt);
if (activePoints[0])
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
var str_label = label.toString()
console.log(str_label)
var value = chartData.datasets[0].data[idx];
if(label == "General,Details")
$('#general').modal('show');
else if(label == "Sameness,Difference")
$('#sameness').modal('show');
else if(label == "Visual,Auditory")
$('#visual').modal('show');
else if(label == "Static,Process")
$('#static').modal('show');
else if(label == "Best Scenario,Worst Scenario")
$('#bestScenario').modal('show');
else if(label == "Binary,Shades")
$('#binary').modal('show');
else if(label == "External,Internal")
$('#external').modal('show');
else if(label == "Go Away,Toward")
$('#goAway').modal('show');
else if(label == "Things")
$('#things').modal('show');
else if(label == "Variety,Routine")
$('#variety').modal('show');
else if(label == "Active,Reaction")
$('#active').modal('show');
else if(label == "Manager worker")
$('#manager').modal('show');
else if(label == "Option,Procedure")
$('#option').modal('show');
else if(label == "Perfection,Optimizing")
$('#perfection').modal('show');
else if(label == "Sensor,Intuition")
$('#sensor').modal('show');
else if(label == "External locus,Internal locus")
$('#locus').modal('show');
else if(label == "Strong Will,Compliant")
$('#will').modal('show');
else if(label == "In time,Through time")
$('#time').modal('show');
else
$('#modeling').modal('show');
;
//graph 2 //
var mainGraph2 = new Chart(ctx2,
type: 'horizontalBar',
data:
labels: user_list,
datasets: [
data: user_dist,
backgroundColor: bar_color ,
]
,
options:
legend:
position: 'top',
display: false
,
responsive:true,
maintainAspectRatio: false,
scales:
xAxes: [
ticks: autoSkip: false,
beginAtZero: true,
min: 0,
max:100,
]
,
annotation:
annotations: [
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: getAvg(user_dist),
borderColor: "rgba(216, 138, 138, 1)",
label:
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 10,
backgroundColor: 'rgba(0,0,0,0.5)',
]
,
);
//end graph 2//
//graph 3 //
var mainGraphLine1 = new Chart(ctx3,
type: 'line',
data:
labels: info_label,
datasets: [
data: info_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)' ,
]
,
options:
legend:
position: 'top',
display: false
,
responsive:true,
maintainAspectRatio: false,
scales:
xAxes: [
ticks: autoSkip: false,
beginAtZero: true,
],
yAxes: [
ticks: min: 0, max:100
],
,
annotation:
annotations: [
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(info_dist),
borderColor: "rgba(216, 138, 138, 1)",
borderWidth: 0.5,
label:
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
]
,
);
//end graph 3//
//graph 4 //
var mainGraphLine2 = new Chart(ctx4,
type: 'line',
data:
labels: motivation_label,
datasets: [
data: motiv_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)' ,
]
,
options:
legend:
position: 'top',
display: false
,
responsive:true,
maintainAspectRatio: false,
scales:
xAxes: [
ticks: autoSkip: false,
beginAtZero: true,
],
yAxes: [
ticks: min: 0, max:100
],
,
annotation:
annotations: [
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(motiv_dist),
borderColor: "rgba(216, 138, 138, 1)",
borderWidth: 0.5,
label:
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
]
,
);
//end graph 4//
//graph 5 //
var mainGraphLine3 = new Chart(ctx5,
type: 'line',
data:
labels: action_label,
datasets: [
data: action_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)' ,
]
,
options:
legend:
position: 'top',
display: false
,
responsive:true,
maintainAspectRatio: false,
scales:
xAxes: [
ticks: autoSkip: false,
beginAtZero: true,
],
yAxes: [
ticks: min: 0, max:100
],
,
annotation:
annotations: [
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(action_dist),
borderColor: "rgba(216, 138, 138, 1)",
borderWidth: 0.5,
label:
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
]
,
);
//end graph 5//
//graph 6 //
var mainGraphLine4 = new Chart(ctx6,
type: 'line',
data:
labels: behav_label,
datasets: [
data:behav_dist,
backgroundColor: 'rgba(102, 187, 158, 0.2)',
]
,
options:
legend:
position: 'top',
display: false
,
responsive:true,
maintainAspectRatio: false,
scales:
xAxes: [
ticks: autoSkip: false,
beginAtZero: true,
],
yAxes: [
ticks: min: 0, max:100
],
,
annotation:
annotations: [
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: getAvg(behav_dist),
borderColor: "rgba(216, 138, 138, 0.8)",
borderWidth: 0.5,
label:
content: "AVERAGE",
fontFamily:'Ubuntu',
enabled: true,
position: "middle",
fontSize: 8,
backgroundColor: 'rgba(0,0,0,0.5)',
]
,
);
//end graph 6//
)
</script>
【问题讨论】：
在整个脚本中根据需要添加console.log(new Date().getTime());
当我把它放在我的 javascript 的末尾时，我在控制台中得到 1523268128733 .. 我该如何准确地使用它？
【参考方案1】：
您可以使用 postman 测试您的 django api。您将在那里获得执行时间。
另外，如果您想分析您的 django 应用程序，您可以参考以下链接 profiling django
【讨论】：
我现在尝试使用 POSTMAN .. 我可以得到 13745 毫秒的总时间，但我想知道我的 API 调用中的每个请求.. 有可能吗？ 然后你必须分析你的 Django 应用程序。检查是否有多个 API 调用或任何其他阻塞 I/O，并尝试将它们并行化。以上是关于在 django 应用程序中加载的 Ajax 调用时间的主要内容，如果未能解决你的问题，请参考以下文章
我无法从 JQuery ajax 调用中加载部分 Django 模板
Roslyn - OutOfMemoryException 由于内存中加载的程序集