Я работаю над страницей, которая должна загружать много данных при начальной загрузке страницы. Сначала я попытался использовать асинхронный XMLHttpRequest, но обнаружил, что браузер зависал во время выполнения запроса (который длился около 3 секунд). Затем я попытался использовать браузер API fetch, который я показываю ниже.
async function fetch_stuff() {
for (let i of [0, 1, 2, 3, 4]) {
let response = await fetch(`chunk.${i}.json`);
let data = await response.json();
Object.assign(combined_data, data);
refresh_list();
}
}
Кроме того, у меня есть прослушиватель событий в текстовом входе, который обновляет элементы DOM, чтобы пользователь мог видеть результат его запроса.
filter_input.addEventListener("keyup", function() {
refresh_list();
});
Проблема в том, что страница в основном зависает во время всех загрузок, а это означает, что пользователь не может ввести текстовое поле. Я предполагаю, что запросы на самом деле происходят асинхронно, но все равно как-то перегружают браузер, так что страница занята, просто следя за входящими данными.
Я бы хотел, чтобы long-i sh загрузка выполняется в фоновом режиме, обеспечивая пользователю плавный опыт.
- Почему асинхронные запросы вызывают медленный пользовательский интерфейс?
- Будет ли выполнение синхронных запросов в веб-рабочих более плавным?
- Я что-то не так делаю, чтобы вызвать такое поведение.