2012-04-11 61 views
0

我有很多的图表(hightchart)在同一个页面产生的,它至少需要5-6秒的负载我所有的图表..用ajax-json请求优化多个.each的方法?

HTML页面:

<div class="graph_score" title="2" > 
    <div class="graph_score" title="3" > 
    <div class="graph_score" title="4" > 
    <div class="graph_score" title="5" > 
.... 

我的jQuery :

$(".graph_score").each(function() { 
     id_graph = $(this).attr("title"); 

     $.getJSON('http://' + document.domain + '/school/teachers/generate_score/graph' + id_graph, function(data) { 
      options = data; 
      options.tooltip = { 
      formatter: function() { 
       var extrafield = this.series.options.extrafield; 
       var extrafield2 = this.series.options.extrafield2; 
       var extrafield3 = this.series.options.extrafield3; 
       return '<b> Note: ' + this.y + ' % <br/>' + '<b>Nom de l\'examen:</b>' + extrafield[this.point.x - 1] + '</b><br/><b>Pondération</b>' + extrafield2[this.point.x - 1] + "<br /><b>Date</b>" + extrafield3[this.point.x - 1]; 
      } 
      } 
      chart = new Highcharts.Chart(options); 
     }); 

    }) 

我可以做些什么来呈现此页面更快吗?

*我知道问题是我的脚本调用8次http://'document.domain +'/ school/teachers/generate_score所以它的8个DOM请求.....但我不知道如何优化是...

THX

+0

尝试在脚本中添加一些定时器,以查看瓶颈的位置 - 它可以在AJAX请求中检索数据或显示数据。我的猜测是,这是花时间的AJAX。查看加速服务器端代码的方法。 – 2012-04-11 15:03:26

+1

另外,您可以在1次调用中查看返回图形的所有数据,然后分别解析每个图的JSON。这又取决于你的服务器有多快,以及它接受多少连接,这是否会带来好处。 – 2012-04-11 15:05:06

回答

2

如果您认为网络传输花费很长的时间,那么你可以创建一个需要ID的列表,并返回结果的几个服务器上的新功能。

+0

另外,您需要确保您的Web服务器正在压缩数据(因此传输的数据量较少) – 2012-04-11 15:05:49