How To Improve Performance When Loading Csv File Into Html Table With Javascript And Ajax?

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

Solution 1:

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 which is very expensive. 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.

Also, you can reduce the loops to only one, in this case, there is no need to use two loops. You can split the rows by line breaks (i.e. \n), and columns by semicolon (;) and build your table within the process.

UPDATE 1

By reusing the main loop I could reduce the hovory time from 229.830ms to 23.405ms.

Original:

ajax:1713.042mspromenna:3.281msfor1:6.031msfor html:4240.323mshovory:4251.732ms

After reduce DOM operations:

ajax:2001.135mspromenna:4.595msfor1:2.395msfor html:19.575mshovory:229.830ms

After reuse the main loop to render the html:

ajax: 658.290mshovory: 23.405ms

$( 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');
  });

  functionhovory(data) {
    
    var rows = data.split('\n').map(function (row) {
      row = row.split(';');
      
      var radek = '<tr>';
      radek += '<td>' + row[0] + '</td>';
      radek += '<td>' + row[1] + '</td>';
      radek += '<td>' + row[14] + '</td>';
      radek += '<td>' + row[15] + '</td>';
      radek += '<td>' + row[16] + '</td>';
      radek += '<td>' + row[25] + '</td>';
      radek += '<td>' + row[26] + '</td>';
      radek += '<td>' + row[27] + '</td>';
      radek += '</tr>';
      
      return radek;
    }).join('');
    var theDiv = document.getElementById("tabulka");
    theDiv.innerHTML = rows;    
  };
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><tableid="tabulka"></table>

Solution 2:

Here's the code using some imporovements:

• caching an array length in l variable within for statement

• inserting HTML elements into documentFragment which is appended to DOM at the end (without constant calculations in UI)

  $( document ).ready(function() {
    $.ajax({
      url: 'https://dl.dropboxusercontent.com/s/wuvqbsupfc27iaq/systemSK.csv',
      dataType: 'text',
    }).done(hovory);
  
    functionhovory(data) {
      var promenna = data.replace(/\n/g,";").split(";");
      var theDiv = document.getElementById("tabulka");
      var frag = document.createDocumentFragment(), tr, td;
      var result = [];
  
      for(var i = 0, l = promenna.length; i < l; 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) {
          tr = document.createElement('tr');
          for (var j = 0; j <= 7; j++) {
              td = document.createElement('td');
              td.textContent = result[i][j];
              tr.appendChild(td);
          }
          frag.appendChild(tr);
          theDiv.appendChild(frag);
      }
    };
  });
  

Solution 3:

// hello you can simplify your code like that :

functionhovory(data) {
    var radek='';
    var tb=data.split("\n");
    tb.forEach(function(ligne) {
        if (ligne !="") {
            var lgn=ligne.split(";");
            radek += '<tr>';
            radek +=  '<td>' + lgn[0] + '</td>';
            radek +=  '<td>' + lgn[1] + '</td>';
            radek +=  '<td>' + lgn[14] + '</td>';
            radek +=  '<td>' + lgn[15] + '</td>';
            radek +=  '<td>' + lgn[16] + '</td>';
            radek +=  '<td>' + lgn[25] + '</td>';
            radek +=  '<td>' + lgn[26] + '</td>';
            radek +=  '<td>' + lgn[27] + '</td>';
            radek +=  '</tr>';
        }  
    });
    var theDiv = document.getElementById("tabulka");
    theDiv.innerHTML += radek;
}

Solution 4:

It's 'expensive' to generated DOM tables with all the data. Your CSV is not that big but if you want performance I recommend you to use Slickgrid for lazy loading.

To load CSV data there is also a great library ('Multithread') called Papaparse which will speed up your program for sure.