Для быстрой загрузки элементов DOM, вы можете увидеть эту ссылку -> Утечка памяти в javascript, функции внутри цикла
После того, как все получится настолько быстро, насколько возможно, это все равно может быть слишкоммедленный и потенциально может вызвать зависание / сбой браузера.
Длительная операция синхронизации в JS заблокирует пользовательский интерфейс.
Чтобы предотвратить это, вы можете сделать длительную операцию sync вasync операция, это дает преимущества, дающие UI некоторое передышку.Затем вы можете создать индикатор загрузки и т. Д.
Ниже приведен очень простой пример, я выполняю операцию синхронизации, которая занимает около 100 мс, и делаю это 100 раз.Затем это в сумме составило бы 10 секунд, если вы сделали это без использования async, это было бы не очень приятным опытом для пользователя.
Чтобы доказать, что пользовательский интерфейс не заблокирован, я 'м, затем просто мигает розовый индикатор загрузки, конечно, вы можете сделать вращающийся круг и т. д. После того, как он закончил, он также записывает консоль all done, ..
Надеюсь, этот небольшой пример поможет с длительным запуском sync операции.
ps: я всегда считал, что async/await должен был сделать следующий тик, хотя выполнение цикла без sleep(0) все равно приводило бы к блокировке пользовательского интерфейса на 10 секунд.
const loaddiv = document.querySelector(".loading");
var i = setInterval(() => {
loaddiv.classList.toggle("loading");
}, 300);
const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
async function blockUI() {
let now = new Date().getTime();
const desiredTime = now + 100;
while (now < desiredTime) {
now = new Date().getTime();
}
await sleep(0); //give the UI some breathing space
}
async function longLoop() {
for (let l = 0; l < 100; l += 1)
await blockUI();
clearInterval(i);
console.log("all done");
}
longLoop();
.loading {
background-color: pink;
}
<div class="loading">
Loading.
</div>