瀏覽器在加載較大文件時無響應

Question

我下載了多個json數據文件，然後使用D3數據圖表可視化了這些文件。當我加載頁面時，需要大量的時間2-3分鐘來下載和可視化，甚至在移動設備上進行更多。瀏覽器顯示無響應的對話框。有沒有辦法提高加載時間和優雅地處理加載時間？

每個文件是幾百（100 - 500）KB的並有20 - 200文件

這裏是線圖的示例代碼僅

drawLineChart它下載JSON文件並提取數據從它，formatLineChartData格式的數據輸入D3，最後lineChartConfig繪製圖表。同樣有條形圖，餅圖，文字雲和地圖的功能。

var drawLineChart   = function(lineChartData, suffix, el){ 
    var n = lineChartData.length; 
    var dataArray = []; 
    var labels= ''; 

    var allNull =true; // flag to check if every ajax does not return any data 
    for (var i=0; i<n; i++){ 
     spark.loadCounterJSON(lineChartData[i].file + suffix,i, 
     function(res){ 
      var data =res.values; 
      if(data){ 
       if(lineChartData[res.counter].slug !== 'global'){ 
        allNull = false; 
       } 
       var title = Object.keys(data.entities)[0]; 

       graphValues = data[title]; 
       if(graphValues!=''){ 
        labels = data['properties']; 
        dataArray.push(
         formatLineChartData(
          graphValues, 
          lineChartData[res.counter].name, 
          true 
         ) 
        ); 
       } 
      } 
      if(res.counter === n && !allNull){ // all outer ajax done; 

       lineChartConfig(el, 
        dataArray, 
        false, 
        true, 
        '' 
       ,labels); 
      } 
     }); 
    } 
}; 



var formatLineChartData  = function(graphValues, key, xDataType){ 
    formatedData = []; 

    $.each(graphValues, function(i, v){ 
     value = {}; 
     if(xDataType !== undefined){ 
      value['x'] = new Date(v.x); 
     } 
     else {value['x']=v.x;} 
     value['y']=parseInt(v.y) 
     formatedData.push(value); 
    });  
    return {values:formatedData,key:key}; 
} 

var lineChartConfig    = function (div, data, guideline, useDates, auxOptions,labels, width, height) { 
     var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
      width = width - margin.left - margin.right, 
      height = height - margin.top - margin.bottom; 

      //var parseDate = d3.time.format("%d-%b-%y").parse; 

      var x = d3.time.scale() 
       .range([0, width]); 

      var y = d3.scale.linear() 
       .range([height, 0]); 

      var xAxis = d3.svg.axis() 
       .scale(x) 
       .orient("bottom"); 

      var yAxis = d3.svg.axis() 
       .scale(y) 
       .orient("right"); 

      var line = d3.svg.line() 
       .x(function(d) { return x(d.x); }) 
       .y(function(d) { return y(d.y); }); 


      var svg = d3.select(div).append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

       var dataResult; 
       for(var i=0;i<data.length;i++){ 
        dataResult = data[i].values; 
       } 
     //console.log(dataResult); 
     dataResult.forEach(function(d) { 
      d.x = new Date(d.x); 
      d.y = d.y; 
      }); 

       x.domain(d3.extent(dataResult, function(d) { return d.x; })); 
       y.domain(d3.extent(dataResult, function(d) { return d.y; })); 

       svg.append("g") 
        .attr("class", "x axis") 
        .attr("transform", "translate(0," + height + ")") 
        .call(xAxis); 


       svg.append("g") 
        .attr("class", "y axis") 
        .call(yAxis) 
        .append("text") 
        .attr("transform", "rotate(-90)") 
        .attr("y", 6) 
        .attr("dy", ".71em") 
        .style("text-anchor", "end"); 

       svg.append("path") 
        .datum(dataResult) 
        .attr("class", "line") 
        .attr("d", line); 
} 

Answer 1

你想要做的第一件事是找出問題所在。如果您有配置文件或性能工具，則可嘗試使用這些工具，但快速骯髒的方法可能只會在完成下載文件，完成當前時間創建圖表等時發出回顯。這應該給你一個你的時間花在哪裏的粗略想法。

爲了提高下載速度，您需要使文件變小，不下載不需要的文件，或者如果服務器上的上傳速度低於客戶端下載速度，改善您的基礎設施

要提高圖表的處理速度...您需要優化代碼，如果您使用的是內置API，則可能沒有選項。但是你一定要確保你沒有進行任何多餘的調用，並且檢查文檔中的任何優化選項。如果可能的話，您的服務器端操作也可以通過多線程/多處理進行改進，並且您有硬件來支持它。

至於處理它優雅，一般的原則應該是儘可能使用異步操作。例如，如果您要加載多個圖表，請將它們分別作爲進度條啓動，並隨着數據下載（等等）進行更新，然後在可用時立即顯示圖表。它不會讓這個過程變得更快，但它會保持頁面的響應並讓用戶知道。