0

I am doing quite lengthy asynchronous ajax GET request via JQuery (~120 MB, takes ~12s) and it is freezing UI.

To my limited understanding it should not be happening as it is asynchronous. I tried advices that I found on the net, like specifying "async: true".

Here is my simplified test code that I run locally in chrome and use " --user-data-dir --disable-web-security" key to do cross site request:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test.js</title>
  </head>
  <body>

  <button id="b1">Button1</button>

  <select>
    <option value="test1">test1</option>
    <option value="test2">test2</option>
    <option value="test3">test3</option>
  </select>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script>
        function test(){
            console.log("GET start");
            $.ajax({
                url: 'https://twitchemotes.com/api_cache/v3/subscriber.json',
                method: 'GET',
                async: true,
                success: function () {
                    console.log("GET completed");
                }
            });
            console.log("after GET");
        }

        $(document).ready(()=>{
            $("#b1").click(test);
        });
    </script>
  </body>
</html>

After pressing the button UI (e.g. select box) stops responding for the request time. It feels like browser is choking on accepting all the response data.

I saw a similar question, but the answer does not fit my environment.

Can someone, please, clarify why is this happening and what workarounds could there be.

Ruslan Anikaev
  • 23
  • 2
  • 6
    Even though downloading the data is asynchronous, parsing a 120 Mb JSON response will take time and locks your UI up. My suggested workaround would be to not do it. Filter on the server and only send the data to the frontend that you need. – DarthJDG Jul 06 '18 at 14:40
  • Can I specify to not parse json? like "data: text" or something? – Ruslan Anikaev Jul 06 '18 at 14:45
  • 3
    Just a note -> `Browser applications or extensions should not send requests to the API directly. You must cache on a your own backend server and then distribute to clients.` Your totally not doing this.. :) – Keith Jul 06 '18 at 14:45
  • 3
    What are you trying to do with all that data in the frontend? If you don't parse it, how would it be used? My suggestion is to write some server-side code that periodically downloads and parses the data, then saves it into a database which can be used by your frontend later (with proper filtering). – DarthJDG Jul 06 '18 at 14:50
  • @Keith, that's the further step. I keep required parsed data in local storage right now. And I am unhappy with the fact that their API does not allow to specify channels I want to fetch emotes for. – Ruslan Anikaev Jul 06 '18 at 14:51
  • @DarthJDG a structured cloning algorithm would have a much better performance than a JSON parse. Potentially as a short-term solution without modifying the server, the request could be made from a web worker and sent via `postMessage()` as an object back to the UI thread, and the web worker could also optionally filter only the necessary data from the object when parsing it. That would prevent the UI from locking up without having to modify the server, and like I said it would be a good interim solution while taking time to implement a server controller to facilitate this request. – Patrick Roberts Jul 06 '18 at 14:52
  • 2
    Possible duplicate of [JQuery ajax freezes ui when response is very large](https://stackoverflow.com/questions/10345483/jquery-ajax-freezes-ui-when-response-is-very-large) – random_user_name Jul 06 '18 at 15:10
  • Thank you for the responses! It is very helpful to get a fresh view on a problem. – Ruslan Anikaev Jul 06 '18 at 15:56

0 Answers0