优化巨大的JSON响应

Question

我正在研究大数据客户端应用程序.服务器语言是Java.在Frontend中我有很多vanilla 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个对象,嵌套在至少六个,七个深层.
• 需要构造网格(表格),行与对象和列的长度大致相同,最少100列.
• 所有数据单元都有自定义上下文菜单,具有嵌套标题,所有列都可以排序,行是sortalbes,这些排序后的订单会在用户更改后立即点击服务器.但我确实有一秒的门槛.

这里有一个非常基本的例子:http://shekhardesigner.github.io/OuchGrid/

Answer 1

我的一些建议:

1. 首先从服务器端对您的响应数据进行分页,以减小json对象的大小.
2. 并行渲染然后ui by chunk
3. 如果数据太大,请不要深入监视数据,例如,如果双向绑定不是必要的话,请不要使用ngRepeat来获取太多数据.这将使您的应用程序非常慢

Answer 2

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

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

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

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

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

我希望这会有所帮助 - 随时添加反馈