Javascript 优化巨大的JSON响应

我正在开发一个大数据客户端应用程序。服务器语言是Java。在前端中，我使用了大量普通的JavaScript，但使用AngularJS作为MVC框架

问题

---

处理大数据分析时，单个REST api响应每次大约为1.5MB到3MB。处理这些数据来构造DOM是一件痛苦的事情

• 首先，加载JSON大约需要5到10秒
• 然后我构建UI（DOM）
• 一旦构建了DOM，基于用户与数据的交互，我必须使用相同的JSON和更新的值发送/返回服务器

建议，我有哪些选项可以优化页面响应能力“

• 我有几点想法：
• 每次将JSON分解为1000个块，加载DOM后，以静默方式带来数据并更新UI
• GZIP在服务器上编译JSON，并在客户端上解码

给我你具体的解决办法

示例JSON可以是：

var data = [
    {
        prop:val,
        prop2: {},
        prop3:[
            id: val,
            prop4: { {}, {}, {}, {}},
            prop5: [ [], [], [] ]
        ]
    },
    {},
    {},
    {}
]

一些用例

• 数据大小可以是10000个对象，嵌套的深度至少为6、7级
• 需要构造网格（表），行的长度与对象和列的长度相同，至少为100列
• 所有数据单元都有自定义的上下文菜单，嵌套的标题，所有要排序的列，要排序的行，这些排序的顺序在用户更改后立即到达服务器。但我有第二个阈值

这里有一个非常基本的例子：

“首先，加载JSON大约需要5到10秒。 然后我构建UI（DOM）”

不可能异步执行这两个步骤吗？例如加载dom并等待ajax回调

我不确定是否有办法，因为我缺乏细节，但也许你想重新考虑你的整个过程，在你需要的时候加载“更小的对象”

考虑以某种方式压缩对象/字符串

以下是我现在能想到的优化的前三种方法。根据您的用例，您可能能够添加这些建议

我希望这有帮助-请随意添加反馈

我的一些建议：

首先从服务器端对响应数据进行分页，以减小json对象的大小

然后按块并行呈现ui

如果数据太大，不要对数据进行深度监视，例如，如果不需要双向绑定，不要重复太多数据。这将使您的应用程序非常缓慢

“首先，加载JSON大约需要5到10秒。然后我构建UI（DOM）”

我建议您异步加载UI和数据，但不允许用户在加载适当的数据之前执行某些操作

---

一旦数据加载到变量/服务中，使用前端分页以最大限度地减少浏览器的压力。javascript可以存储大量数据，但DOM将难以呈现大量HTML。

对于我的一项任务，我们使用了自己的解决方案。大多数数据都是集合或数组，因此我们实现了简单的算法来删除所有冗余属性只有一组属性名和值的对象集合。我们看到大小有了相当大的减少，可能在下一个级别，一些库可以进一步使用解压缩。同样，这只适用于结构化数据，如果数组对象具有不同的结构，则可能需要不同的算法

像我建议的其他算法可以考虑自然压缩技术，例如从JSON中删除所有空白，使字段名更小

或者，您可以查看协议缓冲区之类的规范，它可能会产生更小的上载大小

---

如果处理数据需要时间并冻结屏幕渲染，您可以尝试web workers（适用于最新浏览器）要卸载处理逻辑和主线程/事件循环，用户界面呈现或响应用户操作仍将可用。

嗨，我不知道您的设计，但延迟加载如何？可能您正在显示一个大的数据列表，并且您只能加载该列表中用户可见的部分。是否有指向ngInfiniteScroll的链接-这正是我所说的。您可以发布一个发送到客户端的数据示例吗？您应该将服务器配置为gzip响应——特别是对于较慢的internet连接，压缩/解压缩所需的时间应该少于下载如此大的文件所需的时间。请记住，大多数浏览器如果您设置了正确的HTTP头，我们就能够以本机方式处理Gzip响应。数据是机密的，因此我无法发布。我只需要一个结构，而不是数据本身。将其伪造为保持两个操作同步是有问题的，原因有两个：1.）一旦用户看到UI-开始与它交互，我就必须发回更新。2.）这样更新DOM当我收到数据时，这是一个瓶颈，因为这里的响应非常大。我说的是一次10000多行，假设最少100列。如果我不断更新DOM-浏览器冻结。FYA，这是一个分析应用程序。浏览器冻结意味着你用所有这些更新垃圾邮件你的堆栈…你没有给渲染队列足够的时间重新渲染页面->冻结。您可以通过将DOM更改逐个放入队列来执行DOM更新asnyc。这允许渲染队列“在中间渲染”，并且看起来更流畅…不确定这是否适用于您，但如果您想批量更新DOM。只需输入一个setTimeout（更新，0）；/*update是围绕它的dom更新函数*/并将其推送到您的队列中…用户将应用dom更改，因为他仍然能够进行交互，因为renderqueue可以将其渲染推到您的update（）之间调用100列？u当您拥有来自服务器的所有数据时，同时显示所有100列-仅在客户端