Slow responce whie parsing large JSON responce

Question

I have developed a web application based on RESTFul design where the application takes JSON responce from JAVA based web service and displays in UI and it refreshes the data in every 5 seconds. The application uses Bootstrap for UI design, Backbone and require.js for implementing an MVC stucture where JSON response is parsed as Backbone collection. When an admin is using this application the JSON response size is too large(from 800 to 1100 objects). This is where things get messy. As per my analysis the browser is taking up too much resource.So rest of the application is very slow. For eg if I try to open a modal, system freezes for some time and opens slowly thus giving a very poor user experience. As per my analysis time is being taken in parsing the data As a remedy I am removing all comments in code and trying to implement Gzip compression for JSON files/html/css/js. Sample of the JSON object is pasted below

{
"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"

}

Pagenation can't be done due to some requirements. Can any one suggest something to improve the perfomance

Also I am fetching data using 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

Browsers can handle a heck of a lot more than a thousand objects without any strain, so I don't think it's the fact that you are simply requesting a large amount of data from the backend. It's more likely that some of your parsing or rendering code is slow.

A few possibilities without seeing any more of your code:

• It really depends on what you're doing here, but I'm going to assume that you aren't using a templating library (hoganjs, handlebarsjs, etc). You should definitely look into using one as they speed things up quite a bit and make generating html a lot easier.
• Are you running .append() for each individual model that you render? This will really slow things down. You should generate all of the html that needs to be generated, and then run .append() once.
• What kind of event listeners are you adding for each model (if any)? Listing to scroll events without a debounce ends up slowing down your browser, especially if you add a bunch of them.

Unrelated to your slowness issues, there are a few problems that I see with this code:

• Your timeout should be called from an .always() function in ajax to prevent concurrent requests from going out if for whatever reason a request is slow.

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

• Requests that are simply fetching data should use a GET instead of a POST request type. You can see https://stackoverflow.com/a/3477374/5780021 for more info about this.

I would recommend timing some of your code to see where the slowness is actually happening. This will allow you to actually determine how long things are taking between to points in code.

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