解析大型JSON文件时页面卡顿

Question

我正在尝试使用JavaScript中的JSON.parse加载一个8MB的JSON文件，但页面会冻结约1-2分钟，是否有一种方式可以异步解析并放置一个加载信息或甚至百分比信息来改善用户界面？

我谷歌了一下，发现了jsonstream(https://github.com/dominictarr/JSONStream)，我的理解是它是为nodejs设计的？但我不太清楚。

如果有人能提供一些简单的示例，那将不胜感激。谢谢！

- dli

---

所以，你需要使用多个线程来避免界面冻结？https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/basic_usage - sebnukem

谢谢@sebnukem，这对我很有用，我会尝试做一些研究！再次感谢！ - dli

将其存储在数据库中，只提取所需部分可能是更好的选择。 - Alex Miller

Answer 1

一个可能有效的方法是使用Web Workers：https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/basic_usage

这将把解析过程移入一个单独的线程中，实际上会异步地解析您的文件。

假设您有main.js和worker.js。在main.js中，您可以添加以下内容：

var myWorker = new Worker("worker.js");
myWorker.postMessage(jsonValue); //jsonValue = your json file

myWorker.onmessage = function(e) {
  var parsedJSON = e.data;
  console.log('Message received from worker', parsedJSON);
}

然后在您的 worker.js 文件中，您可以编写：

onmessage = function(e) {
  var parsedJSON = JSON.parse(e.data)
  postMessage(parsedJSON);
}

- winhowes

---

非常感谢！我正在尝试这种方法。对于我的情况，如果使用一些数据库方法，比如MongoDB会更好吗？我听说过很多关于MongoDB的事情，但实际上并不了解它。 - dli

这取决于你想做什么。如果你正在创建一个操作某个8MB JSON文件中数据的Web应用程序，最好将其存储在数据库中，例如mongoDB，这样你就可以访问所需内容，而不是每次在客户端重新解析它。 - winhowes