我正在开发大数据客户端应用程序。服务器语言是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/
最佳答案
我的一些建议:
- 首先对来自服务器端的响应数据进行分页,以减小 json 对象的大小。
- 并行渲染,然后逐 block 渲染 ui
- 如果数据太大,不要深入观察数据,例如,如果双向绑定(bind)不是必需的,不要对太多数据进行 ngRepeat。这将使您的应用程序非常缓慢
关于javascript - 优化巨大的 JSON 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26863342/