javascript - 解析大型 csv 文件时 Jquery 崩溃

Question

我有这个 jquery 函数，我在一个接受 csv 文件输入并将其制表的教程网站上找到了它。我尝试提供一个大的 csv 文件 (10,000KB)，但我的浏览器崩溃了。我看到有一个名为 papa 的解析器库可以处理这个问题，但是有没有其他方法可以防止我的浏览器在执行此操作时崩溃？

这是相关代码:-

 $("#upload").bind("click", function () {

        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
        if (regex.test($("#fileUpload").val().toLowerCase())) {
                            var reader = new FileReader();
                reader.onload = function (e) {
                    var table = $("<table id='mytable' class='table table-striped table-bordered'/>");
                    var rows = e.target.result.split("\n");
                    text1=e.target.result;
                    var csvString = $.trim(text1);
                    var csvRows    = csvString.split(/\n/);
                    var csvHeaders = csvRows.shift().split(';');
                    var headerstr=String(csvHeaders);
                    var count = (headerstr.match(/,/g) || []).length+1;
                    for (var i = 0; i < rows.length; i++) {
                        var row = $("<tr />");
                        var cells = rows[i].split(",");
                        for (var j = 0; j < count; j++) {

                            if(cells[j]){
                            var cell = $("<td/>");

                            cell.html(cells[j]);
                            }
                            else{
                            var cell = $("<td class='info'/>");
                            cell.html("empty");}
                            row.append(cell);

                        }
                        table.append(row);

                    }


                    $("#dvCSV").html('');
                    $("#dvCSV").append(table);
                }

    });

如何在不使浏览器崩溃的情况下实现此功能？提前致谢。

Answer 1

解决这个问题的两大问题:

1) CSV 解析器。 Papa Parse是很棒的。它支持 worker 并且是流式解析器 - 处理大文件的唯一方法。

2) 显示数据的方式。简单地输出表中的每一行是行不通的。我试图想出一个可行的解决方案，使我的电脑崩溃了两次。执行此操作的唯一方法以及基本上所有处理大文件的系统都使用的方法 是使用虚拟化列表。我最终使用了 this one .它很简单，代码也很容易理解。

这是我的 JS:

$("#fUpload").bind("change", function(evt) {
    var bigFile = evt.target.files[0];
    var rows = [];
    Papa.parse(bigFile, {
        delimiter: ",",
        newline: "\n",
        header: false,
        dynamicTyping: false,
        worker: false,
        chunk: function(results) {
            rows.concat(rows, results.data);
        },
        complete: function() {
            var list = new VirtualList({
              h: 300,
              itemHeight: 30,
              totalRows: rows.length,
              generatorFn: function(row) {
                  var el = document.createElement("div");
                  el.innerHTML = "<p>ITEM " + row + ' -> ' + rows[row].join(' - ') + "</p>";
                  return el;
              }
            });
            document.body.appendChild(list.container)
        }
    });
});

HTML 包含此输入: <input type="file" id="fUpload" />

我是如何配置 Papa 的:

• delimiter和 newline :如果您允许它尝试检测它们，它将失败或需要更长的时间；

• worker :这将产生一个工作进程。它会更慢但将保持 UI 响应(UI 线程不会做任何工作)。您可能希望将其设置为 true在生产中。 (由于浏览器跨域安全协议(protocol)，这在 JSFiddle 上不起作用!)；

• chunk : 而不是为每个已解析的行回调，而是为一组更大的行设置一个回调。这样更快；

虚拟列表配置是默认配置。

你可以运行它here .

我测试了一个 9.4 MB 的 CSV 文件，其中包含 1,Foo,100在每一行上重复。

Here's the same but using a table输出数据并添加一个-1到 VirtualList 的 totalRows以补偿实际长度。