There was a problem sending big data to the server. I do not know what to do anymore. When sending small files - everything goes almost unnoticed. When sending large files, the browser starts to hang. The file will be sent, but it is impossible to work in the browser during sending.

I understand the reason. Sending a file occurs in the main thread. Tell me please. How can I make it so that when sending large files the browser does not slow down its work at least on other sites.

function UploadFileIntoFileManager(button_obj, form_obj) { // https://incode.pro/jquery/ajax-na-praktike-progress-bar-indikator-protsessa-zagruzki.html CreateGeneralLoadingModalBox('Файловое хранилище', 'Подождите, идет загрузка файла...<br>Загружено 0%'); OpenGeneralLoadingModalBox(); var file_data = $('#file-upload').prop('files')[0]; var form_data = new FormData(); form_data.append('action', 'UploadFileIntoFileManager'); form_data.append('file', file_data); $(form_obj).find('input[type=file]').prop('value', ''); // Очистка данных по файлу в кнопке var LastPercent = 0; $.ajax({ type: form_obj.getAttribute('method'), url: form_obj.getAttribute('action'), dataType: 'text', cache: false, contentType: false, processData: false, data: form_data, beforeSend:function() { }, xhr: function(){ var xhr = $.ajaxSettings.xhr(); // получаем объект XMLHttpRequest xhr.upload.addEventListener('progress', function(evt){ // добавляем обработчик события progress (onprogress) if(evt.lengthComputable) { // если известно количество байт // высчитываем процент загруженного var percentComplete = Math.ceil(evt.loaded / evt.total * 100); // устанавливаем значение в атрибут value тега <progress> // и это же значение альтернативным текстом для браузеров, не поддерживающих <progress> $('.exit-but, .ex').click( function(){ CloseAndDestroyGeneralLoadingModalBox(true); xhr.abort(); return false; }); if(LastPercent !== percentComplete) { LastPercent = percentComplete; UpdateGeneralLoadingModalBoxContentTitle('Подождите, идет загрузка файла...<br>Загружено '+percentComplete+'%'); } } }, false); return xhr; }, success:function(data) { CloseAndDestroyGeneralLoadingModalBox(true); /*if(data['ReturnCode'] === false) { CreateGeneralFalseModalBox('Файловое хранилище', 'Возникла ошибка', data['ReturnMessage'], 'ок'); OpenGeneralFalseModalBox(); return false; } else if(data['ReturnCode'] === true) { document.location.reload(true); return true; }*/ }, error:function (xhr, ajaxOptions, thrownError) { CloseAndDestroyGeneralLoadingModalBox(true); CreateGeneralFalseModalBox('Файловое хранилище','Сервер не отвечает','Пожалуйста, попробуйте позже','ок'); OpenGeneralFalseModalBox(); return false; } }); }
  • The code above should not slow down. Maybe you have something else? - Stepan Kasyanenko
  • @StepanKasyanenko No. When you run the code starts to slow down the entire browser. The problem is not in the laptop, 100%. - KrYpToDeN
  • I meant that it slows down some other part of the code. Because there should be no brakes in the above code. - Stepan Kasyanenko

1 answer 1

Possible solutions:
1. Try to put ajax into synchronous mode async:false
2. Open the browser tabs manager on the chorme before sending the file using the keyboard shortcuts shift + esc and see which tab loads the RAM and CPU computer when sending the file and thinking about it, for example, if you load a file of 5 gigabytes Look at how much the tab with file sending is bloated in RAM, most likely a copy of the file falls into RAM, and since your computer is low, the browser starts to slow down.
3. Use a library to upload files to a server, for example DropZone downloaded files with a size of gigabytes and everything worked fine, because in such libraries files are sent in parts to the server. A set of libraries to watch here

  • How will the translation of ajax to synchronous mode? - Stepan Kasyanenko
  • @Stepan Kasyanenko synchronous mode will slow down the file loading code or the executable code next - Igor Branitsky
  • An interesting approach)) Can you tell us more about this method? You can even answer - it will be useful to everyone! - Stepan Kasyanenko pm
  • As we know, ajax is asynchronous by default, so when we started downloading the file, js continued execution and will not wait for the download to complete. If we put ajax in synchronous mode and try to upload the file again, and the laptop will not slow down, then it was in the code that runs next after ajax, and if it still slows down, it means ajax. - Igor Branitsky
  • Well, if we transfer to the synchronous mode, then it will slow down on anyone. He will wait for the server to respond! In which case it will not slow down in synchronous mode? - Stepan Kasyanenko