JQuery ajax freezes ui when response is very large

Question

When I use JQuery ajax function and the response is quite large ~1mb the ui gets frozen just before the success function is called. I have experienced this with the JSON.parse function and parsing a large amount of data. I believe that this function is used on the return of the request to format the content into JSON. Here is the code I am using.

$.ajax({
        url: "/sessions/" + this.get("session_id") + "/get_sample_data",
        data: params,
        dataType: 'json',
        type: "GET",
        success: function (response) {
            success(response);
        }
    });

Is there anyway to override the code for the response so I can stagger the parsing into parts and hopefully minimise the blocking on the ui? or is there another way to fix this. I am using chrome and chrome canary and I get the same result in both.

Thanks in advance

where does the problem lie? in jQuery parsing the JSON? or your code parsing the JSON? — Joseph, Apr 27 '12 at 05:58
1MB of JSON? 1MB of plain text??? What are you trying to display on a single webpage? Maybe you should overthink your query! — Amberlamps, Apr 27 '12 at 06:00
@Amberlamps maybe what you meant was "rethink"? I usually see 1MB or more when loading JSON game maps, or base64 encoded sprite maps. It's reasonable, but yes they are overkill at times. — Joseph, Apr 27 '12 at 06:04
The 1mb is of uncompressed GPS data. I would like to test it at this high level of data so that I can stress test it to know the capabilities of the system. — georgephillips, Apr 27 '12 at 06:06

score 8 · Accepted Answer · edited May 23 '17 at 12:06

The guess is that parsing a giant JSON response is what it causing the delay. If that's the case, then you have these options:

Break up the server response into multiple requests.
Break up the parsing into multiple pieces.
Send the response off to a web worker and parse it in a web worker (doesn't work in older browsers).

To break up the parsing into multiple pieces, you would have to change the jQuery ajax call to just return the raw text and you'd have to create your own JSON parser that could do the work in chunks on setTimeout() so that the UI could stay alive while parsing. This would be a reaonable amount of work. I assume you'd start with an existing JSON parser and then you'd have to modify it to save it's state in a way that it could work in chunks.

Changing the interface to the server to retrieve pieces of JSON is probably the easier way to solve the problem if you can modify the interface to the server appropriately.

For some alternative ideas on how to process large data in chunks, you can see Best way to iterate over an array without blocking the UI

JQuery ajax freezes ui when response is very large

1 Answers1

Linked