对大型csv文件使用papa解析
Kei*_*ith 5 csv jquery papaparse
我正在尝试加载一个大约有10万行的文件，到目前为止，浏览器已经崩溃（本地）。我在互联网上看了看，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来说，这可能是一个很好的用例场景。
如果您以前从未使用过它们，则此站点提供了不错的清单，但关键部分是：
Web Workers模仿多线程，允许在后台运行密集型脚本，因此它们不会阻止其他脚本运行。在保持用户界面响应能力的同时执行处理器密集型功能的理想选择。
浏览器的覆盖范围也相当不错，IE10及以下版本是唯一不支持IE10的半现代浏览器。
Mozilla拥有一个很好的视频，展示了网络工作者如何提高页面的帧速率。
我将尝试为您提供有关Web Worker的有效示例，但还要注意，这不会加快脚本的执行速度，只会使其异步处理，从而使页面保持响应状态。
编辑：
（注意：如果要在worker中解析CSV，则可能需要使用该importScript函数（在worker线程中全局定义）在worker.js中导入Papa Parser脚本。有关更多信息，请参见MDN页面。在那上。）
这是我的工作示例：
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时间不到一秒（全部在本地运行）
从 v5 开始，PapaParse 现在已经在 WebWorkers 中烘焙。
下面是在 Papaparse 中调用 worker 的一个简单示例
Papa.parse(bigFile, {
worker: true,
step: function(results) {
console.log("Row:", results.data);
}
});
如果您有自己的 PP 工人，则无需重新实施，但对于未来的项目，有些人可能会发现使用 PapaParse 的解决方案更容易。