Может ли асинхронная выборка все еще заморозить браузер? - PullRequest
Новая
       37

Может ли асинхронная выборка все еще заморозить браузер?

0 голосов
/ 17 апреля 2020

Я работаю над страницей, которая должна загружать много данных при начальной загрузке страницы. Сначала я попытался использовать асинхронный 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 загрузка выполняется в фоновом режиме, обеспечивая пользователю плавный опыт.

  1. Почему асинхронные запросы вызывают медленный пользовательский интерфейс?
  2. Будет ли выполнение синхронных запросов в веб-рабочих более плавным?
  3. Я что-то не так делаю, чтобы вызвать такое поведение.
...