优化庞大的 JSON 响应

问题描述 投票：0回答：5

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

问题

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

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

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

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

给我你的具体解决方法！

示例 JSON 可能是：

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

一些用例

  • 数据大小可以是 10000 个对象，嵌套至少六、七个深度级别。
  • 需要构建网格（表格），行的长度与对象的长度相同，列的长度至少为 100 列。
  • 所有数据单元格都有自定义上下文菜单，有嵌套标题，所有列都可以排序，行可以排序，一旦用户更改，这些排序顺序就会到达服务器。但我确实有第二个门槛。

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

javascript json angularjs performance dom
5个回答
9
投票

我的一些建议：

  1. 首先对服务器端的响应数据进行分页，以减少 json 对象的大小。
  2. 并行渲染，然后按块进行 ui
  3. 如果数据太大，不要对数据进行深度监视，例如，如果不需要双向绑定，则不要对太多数据进行ngRepeat。这会让你的应用程序变得非常慢
5
投票

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

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

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

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

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

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

3
投票

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

像我这样的其他算法建议查看自然压缩技术，例如从 JSON 中删除所有空白，使字段名称更小。

或者，您可以查看像 Protocol Buffers 这样的规范，它可能会产生更小的上传大小。看看https://github.com/dcodeIO/ProtoBuf.js

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

1
投票

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

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

将数据加载到变量/服务后，请使用前端分页来最大程度地减少浏览器的压力。 JavaScript 可以存储大量数据，但 DOM 很难渲染大量 HTML。

0
投票

我为我的项目开发了一个库，并且刚刚将其发布到 npm：https://www.npmjs.com/package/api-data-compressor

关键的技术特点是它会扫描数据结构并将所有对象转换为数组（删除属性名称以节省空间）。

在我的项目中，这种方法为大型数据集提供了约 50% 的压缩率:)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.