解析大型 JSON 响应时响应缓慢

Question

我开发了一个基于 RESTFul 设计的 Web 应用程序，该应用程序从基于 JAVA 的 Web 服务获取 JSON 响应并显示在 UI 中，并且每 5 秒刷新一次数据。 该应用程序使用 Bootstrap 进行 UI 设计，使用 Backbone 和 require.js 来实现 MVC 结构，其中 JSON 响应被解析为 Backbone 集合。 当管理员使用此应用程序时，JSON 响应大小太大（从 800 到 1100 个对象）。 这就是事情变得混乱的地方。根据我的分析，浏览器占用了太多资源。所以应用程序的其余部分非常慢。例如，如果我尝试打开一个模式，系统会冻结一段时间并缓慢打开，从而导致用户体验非常差。 根据我的分析时间正在解析数据 作为补救措施，我正在删除代码中的所有 cmets，并尝试为 JSON 文件/html/css/js 实现 Gzip 压缩。 JSON对象的示例粘贴在下面

{
"name": "TEST",
"state": "Lunch",
"time": "00:00:09",
"manager": "TEST",
"site": "C",
"skill": "TEST",
"center": "TEST",
"teamLead": "TEST",
"workGroup": "TEST",
"lanId": "TEST",
"dbID": "TETS",
"loginId": "TEST",
"avgAcwTime": "nn",
"avgHandleTime": "nn",
"avgTalkTime": "nn",
"callsAnswered": "nn",
"dispSkill": "-",
"errCode": null,
"errDesc": null,
"avgAcwTimeth": "medium",
"avgHandleTimeth": "high",
"avgTalkTimeTh": "medium",
"callsAnsweredTh": "medium",
"stateTh": "high"

}

由于某些要求，无法进行分页。 任何人都可以提出一些提高性能的建议

我也在使用 Backbone.Collection.fetch() 获取数据

getAgentMetric(){
this.metrices.fetch({
        url : (isLocal) ? ('http://localhost:8080/jsons/agent.json') : (prev_this.url + '/agentstat'),
        data: JSON.stringify(param),
        type: "POST",
        dataType: "JSON",
        contentType: "application/json",
        })
        .done(function() {
        // passing the datasource from ajax call
        prev_this.agentLoacalSource.localdata = prev_this.metrices.toJSON();
    });         
    timeout = setTimeout(_.bind(this.getAgentMetric, this), 5000);

},

Answer 1

浏览器可以毫无压力地处理超过一千个对象，所以我不认为这是您只是从后端请求大量数据的事实。您的某些解析或渲染代码很可能很慢。

没有看到更多代码的几种可能性：

• 这真的取决于你在这里做什么，但我假设你没有使用模板库（hoganjs、handlebarsjs 等）。您绝对应该考虑使用一个，因为它们可以加快速度并使生成 html 变得更加容易。
• 您是否为您渲染的每个单独模型运行.append()？这真的会减慢速度。您应该生成所有需要生成的html，然后运行一次.append()。
• 您为每个模型添加了什么样的事件监听器（如果有的话）？列出滚动事件而没有去抖动最终会降低浏览器的速度，尤其是在添加一堆事件时。

与您的缓慢问题无关，我看到此代码存在一些问题：

• 应该从 ajax 中的 .always() 函数调用超时，以防止由于某种原因请求很慢时并发请求发出。

  this.metrices.fetch(...) .always(function() { timeout = setTimeout(...); }.bind(this));

• 仅获取数据的请求应使用 GET 而不是 POST 请求类型。您可以查看https://stackoverflow.com/a/3477374/5780021 了解更多信息。

我建议您对一些代码进行计时，以查看实际出现缓慢的位置。这将允许您实际确定代码中的点之间的时间。

• Firefox console.time
• Chrome console.time
• IE console.time