JQuery ajax freezes ui when reaction is very great

Question

When I use the jQuery ajax function and the response is pretty big ~ 1mb, ui freezes just before the success function is called. I experienced this with the JSON.parse function and parsing a lot of data. I believe this function is used when returning a request to format the content in JSON. Here is the code I'm using.

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

In any case, in order to override the code for the answer, so that I can stagger the parsing to pieces and, hopefully, minimize the lock on ui? or is there another way to fix this. I use chrome and chrome canary and I get the same result in both.

Thanks in advance

Answer 1

Parsing the giant JSON response is supposed to be what causes the delay. In this case, you have the following options:

• Break server response into multiple requests.
• Break the analysis into several parts.
• Send a response to a web worker and analyze it with a web artist (does not work in older browsers).

To break the parsing into several parts, you will need to modify the jQuery ajax call to just return the raw text, and you will need to create your own JSON parser that could do the work in pieces on setTimeout() , so the user interface can remain in alive during parsing. This will be a promising amount of work. I assume that you will start with an existing JSON parser, and then you will have to modify it to maintain its state so that it can work in pieces.

Changing the interface on the server to extract JSON fragments is probably an easier way to solve the problem if you can change the interface on the server accordingly.

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