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.par

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