个人中心
gpt4 book ai didi

jquery - 使用 papa parse 解析大型 csv 文件

转载 作者：行者123 更新时间：2023-12-03 22:46:32 26 4
gpt4 key购买 nike

我正在尝试加载一个大约 100k 行的文件，到目前为止浏览器已经崩溃(本地)。我上网查了一下，发现 Papa Parse 似乎可以处理大文件。现在加载到文本区域的时间减少到大约 3-4 分钟。加载文件后，我想要执行更多 jQuery 来执行计数等操作，因此该过程需要一段时间。有没有办法让 csv 加载更快？我是否正确使用该程序？

<div id="tabs">
<ul>
  <li><a href="#tabs-4">Generate a Report</a></li>
</ul>
<div id="tabs-4">
  <h2>Generating a CSV report</h2>
  <h4>Input Data:</h4>      
  <input id="myFile" type="file" name="files" value="Load File" />
  <button onclick="loadFileAsText()">Load Selected File</button>
  <form action="./" method="post">
  <textarea id="input3" style="height:150px;"></textarea>

  <input id="run3" type="button" value="Run" />
  <input id="runSplit" type="button" value="Run Split" />
  <input id="downloadLink" type="button" value="Download" />
  </form>
</div>
</div>

$(function () {
    $("#tabs").tabs();
});

var data = $('#input3').val();

function handleFileSelect(evt) {
    var file = evt.target.files[0];

Papa.parse(file, {
    header: true,
    dynamicTyping: true,
    complete: function (results) {
        data = results;
    }
});
}

$(document).ready(function () {

    $('#myFile').change(function(handleFileSelect){

    });
});


function loadFileAsText() {
    var fileToLoad = document.getElementById("myFile").files[0];

    var fileReader = new FileReader();
    fileReader.onload = function (fileLoadedEvent) {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        document.getElementById("input3").value = textFromFileLoaded;
    };
    fileReader.readAsText(fileToLoad, "UTF-8");
}

最佳答案

您可能正确使用它，只是程序需要一些时间来解析所有 100k 行!

这可能是 Web Workers 的一个很好的用例场景.

注意:根据@tomBryer's answer下面，爸爸现在解析has support for Web Workers out of the box 。这可能是比滚动自己的工作人员更好的方法。

如果您以前从未使用过它们，this site给出了一个不错的概要，但关键部分是:

Web Workers mimics multithreading, allowing intensive scripts to be run in the background so they do not block other scripts from running. Ideal for keeping your UI responsive while also performing processor-intensive functions.

Browser coverage也相当不错，IE10 及以下版本是唯一不支持它的半现代浏览器。

Mozilla 有一个很棒的视频 shows how web workers也可以加快页面的帧速率。

我将尝试为您提供一个使用 Web Worker 的工作示例，但还要注意，这不会加快脚本速度，它只会使其异步处理，以便您的页面保持响应。

编辑:

(注意:如果您想在worker中解析CSV，您可能需要使用importScript函数在worker.js中导入Papa Parser脚本(在工作线程中全局定义)。有关更多信息，请参阅 MDN page。)

这是我的工作示例:

csv.html

<!doctype html>
<html>
<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
</head>

<body>
  <input id="myFile" type="file" name="files" value="Load File" />
  <br>
  <button class="load-file">Load and Parse Selected CSV File</button>
  <div id="report"></div>

<script>
// initialize our parsed_csv to be used wherever we want
var parsed_csv;
var start_time, end_time;

// document.ready
$(function() {

  $('.load-file').on('click', function(e) {
    start_time = performance.now();
    $('#report').text('Processing...');

    console.log('initialize worker');

    var worker = new Worker('worker.js');
    worker.addEventListener('message', function(ev) {
      console.log('received raw CSV, now parsing...');

      // Parse our CSV raw text
      Papa.parse(ev.data, {
        header: true,
        dynamicTyping: true,
        complete: function (results) {
            // Save result in a globally accessible var
          parsed_csv = results;
          console.log('parsed CSV!');
          console.log(parsed_csv);

          $('#report').text(parsed_csv.data.length + ' rows processed');
          end_time = performance.now();
          console.log('Took ' + (end_time - start_time) + " milliseconds to load and process the CSV file.")
        }
      });

      // Terminate our worker
      worker.terminate();
    }, false);

    // Submit our file to load
    var file_to_load = document.getElementById("myFile").files[0];

    console.log('call our worker');
    worker.postMessage({file: file_to_load});
  });

});
</script>
</body>

</html>

worker.js

self.addEventListener('message', function(e) {
    console.log('worker is running');

    var file = e.data.file;
    var reader = new FileReader();

    reader.onload = function (fileLoadedEvent) {
        console.log('file loaded, posting back from worker');

        var textFromFileLoaded = fileLoadedEvent.target.result;

        // Post our text file back from the worker
        self.postMessage(textFromFileLoaded);
    };

    // Actually load the text file
    reader.readAsText(file, "UTF-8");
}, false);

GIF 处理过程，耗时不到一秒(全部在本地运行)

GIF of working example

关于jquery - 使用 papa parse 解析大型 csv 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38100011/

26 4 0
文章推荐： jquery - 是否可以通过数据属性过滤 jQuery DataTable？
文章推荐： jquery - X 轴上的图表线 morris.js 格式日期
文章推荐： jquery - 无法在 'animate' : Partial keyframes are not supported 上执行 'Element'
文章推荐： jquery - 我无法在 Bootstrap 4 导航栏周围放置容器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com