使用javascript和ajax将CSV文件加载到html表中时，如何提高性能? [英] How to improve performance when loading CSV file into html table with javascript and ajax?

问题描述

我正在使用此代码

$( 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

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

如果将for设置为for(var i = 0; i< result.length; i + = 1)，则i + =在7个表上立即追加.如果为1，则需要一些时间直到表追加.

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?

推荐答案

您的主要问题来自于恒定的DOM操作，一旦数据量很大，就必须避免在每行添加它，否则，wize会导致大量的问题DOM操作非常昂贵.我减少了渲染循环的时间，只需将表移到循环外，然后将整个表从4210.902ms添加到36.266ms，就可以看到，这是一个巨大的差异.

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.

此外，您可以将循环减少到一个，在这种情况下，不需要使用两个循环.您可以按换行符(即\n)拆分rows，按分号(;)拆分列，并在该过程中构建表.

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.

更新1

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

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

原文:

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

减少DOM操作后:

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

在重用主循环以呈现html之后:

After reuse the main loop to render the 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>

这篇关于使用javascript和ajax将CSV文件加载到html表中时，如何提高性能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！