使用 javascript 和 ajax 将 CSV 文件加载到 html 表时如何提高性能？

Question

我正在使用此代码

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

我基本上从 Dropbox 加载 csv，从中创建数组并附加表。它可以工作，但看我的代码笔很慢http://codepen.io/anon/pen/XjOyYE?editors=1010

如果你设置为 for(var i = 0; i

有没有办法更快地附加我的表格？是什么造成了这种延迟？

Answer 1

您的主要问题来自不断的 DOM 操作，一旦数据量非常大，您必须避免每行都添加它，否则会导致大量的 DOM 操作，这是非常昂贵的。我只是通过将表移到循环之外然后将整个表从4210.902ms 添加到36.266ms 来减少渲染循环的时间，正如您所看到的，这是一个巨大的差异。

此外，您可以将循环减少到只有一个，在这种情况下，不需要使用两个循环。您可以通过换行符（即\n）拆分rows，并通过分号（;）拆分列，并在流程中构建您的表格。

更新 1

通过重用主循环，我可以将 hovory 时间从 229.830ms 减少到 23.405ms。

原文：

ajax: 1713.042ms
promenna: 3.281ms
for1: 6.031ms
for html: 4240.323ms
hovory: 4251.732ms

reduce DOM 操作后：

ajax: 2001.135ms
promenna: 4.595ms
for1: 2.395ms
for html: 19.575ms
hovory: 229.830ms

重用主循环渲染html后：

ajax: 658.290ms
hovory: 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');
  });

  function hovory(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;    
  };
});

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

Answer 2

这是使用一些改进的代码：

• 在for 语句中的l 变量中缓存数组长度

• 将 HTML 元素插入到最后附加到 DOM 的documentFragment 中（无需在 UI 中进行持续计算）

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

Answer 3

// 你好，你可以这样简化你的代码：

function hovory(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;
}

Answer 4

生成包含所有数据的 DOM 表是“昂贵的”。您的 CSV 不是那么大，但如果您想要提高性能，我建议您使用 Slickgrid 进行延迟加载。

要加载 CSV 数据，还有一个很棒的库（“多线程”），名为 Papaparse，它肯定会加快您的程序。