JQuery AJAX асинхронная блокировка браузера

Question

У меня есть огромный файл для обработки на сервере. Я загружаю файл на сервер, затем читаю его, создавая массив. Теперь мне нужно вернуть эту информацию на сервер:

function getXMLFile(file){ // Single call
  $.ajax({
    url: '....', 
    type: 'post',
    dataType: 'json',
    data: {filename: file},
    success: function(json){
      $.each(json, function( key, value ){ // iterates over 50 000 items.
      tmp.push( value );
      i++;
      if(i > 10000){
        setTimeout(function(){ 
        insert(tmp); 
        tmp = []; 
        i = 0; 
        }, 1000);
      }
    });
   }
  });
}

А вот и функция блокировки:

function insert(data){ // called from getXMLFile() @data -> array of 10 000 code entries
    $.ajax({
      url: '....', // for now php function does nothing.
      type: 'post',
      dataType: 'json',
      data: {codes: data},
      async: true // !!!!
    });
  }
});

Как вы видите, у меня есть "async: true" и использую setTimeout, чтобы мой браузер не блокировался. Но он все еще блокируется... Я сделал что-то не так?

Answer 1

Вы загружаете файл на сервер, затем сервер возвращает много данных. Из данных вы перебираете около 50000 элементов, затем вы делаете запрос каждые 10000 итераций с массивом, который постоянно увеличивается. Вы получаете около 5 запросов в секунду с большими данными.

Имеет смысл повлиять на производительность вашего браузера, я предлагаю работать на сервере, где бы он ни работал. Например, данные, возвращенные с сервера в первый раз, также могут быть обработаны сервером без отправки запросов с большими данными от клиента для повторной отправки данных. Таким образом вы улучшите низкую производительность вашего браузера.

Чтобы помочь вам решить эту проблему, посмотрите на потребление памяти вашим браузером, а также попробуйте работать с небольшим набором данных. Если ваш браузер не блокируется, то вы будете знать, что данные, которые вы пытаетесь обработать на стороне клиента, являются слишком большими.