javascript - 优化巨大的 JSON 响应

Question

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

问题

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

• 首先，加载 JSON 大约需要 5 到 10 秒。
• 然后我构建 UI (DOM)
• 在构建 DOM 后，基于用户与数据的交互 - 我必须使用具有更新值的相同 JSON 发送/返回服务器。

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

• 我想到的几件事:
• 一次将 JSON 分成 1000 个 block ，加载 DOM 后静默引入数据并更新 UI。
• 在服务器上对 JSON 进行 GZIP 压缩，然后在客户端解码。

给我具体的解决方法!

示例 JSON 可以是:

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

一些用例

• 数据大小可以是 10000 个对象，嵌套至少六、七层。
• 需要构建网格(表格)，行的长度与对象的长度大致相同，列的长度至少为 100 列。
• 所有数据单元格都有自定义的上下文菜单，有嵌套的标题，所有的列都是可排序的，行是可排序的，这些排序的顺序会在用户更改后立即到达服务器。但我确实有一秒钟的阈值。

此处是一个非常基本的示例:http://shekhardesigner.github.io/OuchGrid/

Answer 1

我的一些建议:

1. 首先对来自服务器端的响应数据进行分页，以减小 json 对象的大小。
2. 并行渲染，然后逐 block 渲染 ui
3. 如果数据太大，不要深入观察数据，例如，如果双向绑定(bind)不是必需的，不要对太多数据进行 ngRepeat。这将使您的应用程序非常缓慢