在 Javascript 中解析大型 JSON 数组答案

【问题标题】：Parsing a large JSON array in Javascript在 Javascript 中解析大型 JSON 数组
【发布时间】：2014-09-12 22:54:50
【问题描述】：

我应该在 Javascipt 中解析一个非常大的 JSON 数组。它看起来像：

mydata = [
    {'a':5, 'b':7, ... },
    {'a':2, 'b':3, ... },
    .
    .
    .
    ]

现在的问题是，如果我将整个对象传递给我的解析函数parseJSON()，那么它当然可以工作，但它会阻止选项卡的进程 30-40 秒（如果数组包含 160000 个对象）。

在从服务器请求此 JSON 并对其进行解析的整个过程中，我向用户显示了一个“正在加载”的 gif。当然，我调用 parse 函数后，gif 也会冻结，导致用户体验不佳。我想这次没有办法绕过，有没有办法以某种方式（至少）防止加载 gif 冻结？

类似于每隔几毫秒对我的 JSON 块调用 parseJSON() 之类的东西？虽然是 javascript 中的菜鸟，但我无法实现这一点。

非常感谢，如果您能在这里帮助我，我将不胜感激。

【问题讨论】：

160 000 个对象确实很多。您应该在服务器端拆分它
你检查过这个帖子吗？ stackoverflow.com/questions/1160137/…
在服务器端应用分页，在json中添加分页数和下一页等，然后在ajax成功时继续调用api。
如果适用于您的情况，您可以拆分数据并在不同的时间点发送块。
您可以使用 setTimeout 以最小延迟调用您的 parseJSON。有关更多信息，请参阅this SO 帖子。

标签： javascript

【解决方案1】：

您可能想查看this link。这是关于多线程的。

基本上：

var url = 'http://bigcontentprovider.com/hugejsonfile';

var f = '(function() {
            send = function(e) { 
                postMessage(e); 
                self.close();
            };
            importScripts("' + url + '?format=json&callback=send");
         })();';

var _blob = new Blob([f], { type: 'text/javascript' });

_worker = new Worker(window.URL.createObjectURL(_blob));
_worker.onmessage = function(e) { 
    //Do what you want with your JSON 
}
_worker.postMessage();

说实话我自己没试过……

关于可移植性的编辑：Sebastien D. 用a link to mdn 发表了评论。我刚刚在兼容性部分 id 中添加了一个参考。

【讨论】：

这是一个非常好的建议，但也许您可以对其进行扩展并添加一些关于可移植性的警告？
我在主题上还不够，无法扩展太多。但是我重新发布了一个与浏览器兼容性的链接。
老实说，我什至没有听说过这个功能，直到你发布它！不过，这是一个非常令人兴奋的 api。鉴于我主要在移动设备上工作，缺乏对 android 的支持令人沮丧，我猜我还需要一段时间才能尝试...

【解决方案2】：

我从未遇到过 30-40 秒的完整页面锁定，我几乎印象深刻！将您的数据重组为更小或将其拆分为服务器端的许多文件是真正的答案。你真的需要数据的每一个小字节吗？

或者，如果您无法更改文件，@Cyrill_DD 的工作线程答案将能够为您解析数据并将其发送到您的主 JS。这不是您猜想的完美解决方案。在 2 个线程之间传递数据需要对信息进行序列化和重新解释，因此当数据在线程之间传递时您会发现速度明显减慢，如果您尝试一次传递所有数据，则会再次恢复原状。在您的工作线程中构建一个查询系统，以便在您需要时请求数据块并使用消息回调将防止在主线程上解析速度变慢，并允许您完全访问数据而无需将其全部加载到您的主上下文中。

我应该补充一点，工作线程相对较新，主要浏览器支持很好，但移动设备很糟糕......请注意！

【讨论】：