优化巨大的JSON响应

Optimize Huge JSON response

本文关键字：响应 JSON 巨大 优化      更新时间：2023-09-26

我正在开发一个大数据客户端应用程序。服务器语言是Java。在Frontend中，我有非常普通的JavaScript，但AngularJS是MVC框架。

问题

在处理大数据分析时，一次单个RESTapi响应大约为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列
  • 所有数据单元格都有自定义上下文菜单，有嵌套的标题，所有列都可以排序，行都可以排序。一旦用户更改，这些排序顺序就会到达服务器。但我确实有一秒钟的门槛

一个非常基本的例子如下：http://shekhardesigner.github.io/OuchGrid/

我的一些建议：

  1. 首先对服务器端的响应数据进行分页，以减小json对象的大小
  2. 并行渲染然后按块显示ui
  3. 如果数据太大，不要对数据进行深度监视，例如，如果双向绑定不必要，不要对太多数据执行ngRepeat。这将使您的应用程序非常缓慢

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

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

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

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

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

我希望这能有所帮助-可以随意添加反馈

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

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

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

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

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

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

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

相关文章：