Почему при загрузке файлов методом POST через XMLHttpRequest происходит задержка после xhr.upload.onload?

Question

[Максим]

Приветствую!

Собственно вот суть вопроса:
При загрузке файлов, на этапе xhr.readyState = 1 и после наступления события xhr.upload.onload происходит какая-то задержка, примерно равная времени загрузки файлов (xhr.upload.onprogress).
Файлы успешно загружены ( о чем говорит событие xhr.upload.onload ). И на этом этапе (xhr.readyState = 1) мы еще не ждем ответа от сервера, а только готовимся выполнить send(). Потом-то, когда "там" что-то прогружается, статусы 2,3,4 отрабатываются почти одновременно.
Что может происходить в этот момент?
Или просто сам API по дебильному реализован, и по факту 100% загрузка еще не означает 100% подготовку файлов к отправке (send())? Получается прогресс-бар загрузки дошел до 100% а на самом деле этап отправки еще наступит не скоро (xhr.readyState = 2).
Просто какой смысл тогда в этом xhr.upload.onprogress если он мне не дает информации о том, что текущий статус/этап вот вот будет выполнен (при приближении прогресс-бара к концу).

Answer 1

[GrayHorse]

Потому что сначала реквест, и только потом респонс.

Запускаешь: xhr.send(data); и по очереди:

// сначала ты
xhr.upload.onprogress // загрузка на сервер
xhr.upload.onload // загрузка на сервер завершена
// потом сервер
xhr.onreadystatechange // xhr.readyState === 2 // HEADERS_RECEIVED // получены заголовки ответа (и только)
xhr.onreadystatechange // xhr.readyState === 3 // LOADING // загрузка ответа сервера
xhr.onprogress // загрузка ответа сервера
xhr.onreadystatechange // xhr.readyState === 4 // DONE
xhr.onload // загрузка ответа сервера завершена

Comments

[Максим]

xhr.upload.onload // загрузка на сервер завершена
// потом сервер
xhr.onreadystatechange

Получается на этапе "Потом сервер" что-то еще происходит? И что происходит? Что мы ждем?
Если файлы загружены, то что происходит ровно столько же времени сколько мы загружали файлы? Сериализация/десериализация?
Просто после загрузки файлов и до этапа xhr.readyState === 2 происходит еще задержка равная по времени загрузки файлов.

[GrayHorse]

Это вопросы к автору сервера.

Если сработал xhr.upload.onload, это лишь значит, что сервер получил все пересылаемые данные от браузера, а когда ему отвечать, зависит лишь от логики обработки запроса.

С включенным троттлингом (режим "Fast 3G") загрузка 0.5 MB занимает 6 секунд, ответ сервера — 100 мс:

let xhr = new XMLHttpRequest();
xhr.open("post", "/");
xhr.upload.onprogress = function(event) { console.log(`Загружено ${event.loaded} из ${event.total}`);}; 
xhr.upload.onload = function(event) { console.log(`Загружено ${event.loaded}`);};
xhr.onprogress = function(event) { console.log(`Загружено ${event.loaded} из ${event.total}`);};
xhr.onreadystatechange = function() {console.log(xhr.readyState);};
xhr.onload = function() {console.log("onload");};
xhr.send("Q".repeat(500_000));

[Максим]

GrayHorse, Благодарю за разъяснение!