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

Answer 1

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:

1. Break up the server response into multiple requests.
2. Break up the parsing into multiple pieces.
3. 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