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: [ [], [], [] ]
        ]
    },
    {},
    {},
    {}
]

部分用例

DATA大小可以是10000个对象，至少嵌套六个，七个深层。
需要构建网格（表格），行与对象和列的长度大致相同，最少100列。
所有数据单元都有自定义上下文菜单，具有嵌套标题，所有列都可以排序，行是sortalbes，这些排序后的订单会在用户更改后立即点击服务器。但我确实有一秒的门槛。

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

Answer 1

我的一些建议：

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

Answer 2

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

是不是可以执行这两个步骤异步？例如，加载dom并等待ajax回调？
我不确定是否有办法，因为我缺乏细节，但也许您想重新考虑整个过程，以便在需要时加载“较小的对象”。
考虑以某种方式压缩对象/字符串

这是我现在能想到的前3种方式如何进行选择。根据您的用例，您可以添加这些建议

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

Answer 3

对于我的一项任务，我们使用了自己的解决方案。大多数数据都是集合或数组，因此我们实现了简单的算法来删除所有冗余属性名称，只删除一组属性名称和值对象集合。我们看到尺寸大幅缩小，可能在下一级可能会使用一些库进一步减压。同样，这只适用于我们处理结构化数据，如果数组对象具有不同的结构，可能需要不同的算法。

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

或者，您可以查看协议缓冲区之类的规范，它可能会产生小得多的上传大小。看https://github.com/dcodeIO/ProtoBuf.js

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

Answer 4

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

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

将数据加载到您的变量/服务后，使用前端分页来最小化浏览器的压力。 javascript可以存储大量数据，但DOM很难呈现大量的HTML。

优化巨大的JSON响应

4 个答案: