Ostrov Ostrov - 1 month ago 12
Javascript Question

Ajax load csv, create array and table from it

Im using this code

$( document ).ready(function() {
$.ajax({
url: 'https://dl.dropboxusercontent.com/s/wuvqbsupfc27iaq/systemSK.csv',
dataType: 'text',
}).done(hovory);

function hovory(data) {
var promenna = data.replace(/\n/g,";").split(";");
var result = [];
for(var i = 0; i < promenna.length; i+=32) {
var line = [];
line.push(promenna[i+0]);
line.push(promenna[i+1]);
line.push(promenna[i+14]);
line.push(promenna[i+15]);
line.push(promenna[i+16]);
line.push(promenna[i+25]);
line.push(promenna[i+26]);
line.push(promenna[i+27]);
result.push(line);
}


for(var i = 0; i < result.length; i+=1){
var radek = '<tr>';
radek += '<td>' + result[i][0] + '</td>';
radek += '<td>' + result[i][1] + '</td>';
radek += '<td>' + result[i][2] + '</td>';
radek += '<td>' + result[i][3] + '</td>';
radek += '<td>' + result[i][4] + '</td>';
radek += '<td>' + result[i][5] + '</td>';
radek += '<td>' + result[i][6] + '</td>';
radek += '<td>' + result[i][7] + '</td>';
radek += '</tr>';
var theDiv = document.getElementById("tabulka");
theDiv.innerHTML += radek;
}
};
});


I basically load the csv from Dropbox, create array from it and appends table. It works, but its very slow look at my codepen http://codepen.io/anon/pen/XjOyYE?editors=1010

If you set at for(var i = 0; i < result.length; i+=1) i+= at 7 table appends immediately. If to 1, then takes some time until table appends.

Is there a way how to append my table quicker? What creates that delay?

Answer

Your major problem comes from constant DOM manipulation, you must avoid adding it every row once it is a very large amout of data, otherwize will result in a large amout of DOM operations. I reduced the time of the rendering loop just by moving the table outside the loop and then adding the entire table once from 4210.902ms to 36.266ms, as you can see, it's a huge difference.

$( document ).ready(function() {
  console.time('ajax');
  $.ajax({
    url: 'https://dl.dropboxusercontent.com/s/wuvqbsupfc27iaq/systemSK.csv',
    dataType: 'text',
  }).done(function (data) {
    
    console.timeEnd('ajax');
    console.time('hovory');
    hovory(data);    
    console.timeEnd('hovory');
  });

  function hovory(data) {
    console.time('promenna');
    var promenna = data.replace(/\n/g,";").split(";");
    console.timeEnd('promenna');
    var result = [];
    
    console.time('for1');
    for(var i = 0; i < promenna.length; i+=32) {
        var line = [];
        line.push(promenna[i+0]);
        line.push(promenna[i+1]);
        line.push(promenna[i+14]);
        line.push(promenna[i+15]);
        line.push(promenna[i+16]);
        line.push(promenna[i+25]);
        line.push(promenna[i+26]);
        line.push(promenna[i+27]);
        result.push(line);
    }    
    console.timeEnd('for1');

    console.time('for html');
    var radek ='';
    for(var i = 0; i < result.length; i+=1){
        
      radek += '<tr>';
      radek +=  '<td>' + result[i][0] + '</td>';
      radek +=  '<td>' + result[i][1] + '</td>';
      radek +=  '<td>' + result[i][2] + '</td>';
      radek +=  '<td>' + result[i][3] + '</td>';
      radek +=  '<td>' + result[i][4] + '</td>';
      radek +=  '<td>' + result[i][5] + '</td>';
      radek +=  '<td>' + result[i][6] + '</td>';
      radek +=  '<td>' + result[i][7] + '</td>';
      radek +=  '</tr>'; 
      
      
    }
    var theDiv = document.getElementById("tabulka");
    theDiv.innerHTML += radek;
    console.timeEnd('for html');
    
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<table id="tabulka"></table>

Comments