Многопоточность в JavaScript

Оффтоп javascript
1

У меня возникла проблема с анимацией и обработкой данных одновременно. Когда я запускаю код, сначала выполняется цикл, который загружает 1000 элементов “привет” в div, а затем начинается анимация появления этого блока.

function loadContent() {
    // Сначала загружаем данные
    for (let i = 0; i < 1000; i++) {
        document.getElementById('content').innerHTML += '<p>Запись номер ' + i + '</p>';
    }
    
    // Затем запускаем анимацию
    document.getElementById('container').classList.add('fade-in');
}

Если я меняю местами эти части кода и запускаю анимацию перед циклом, она происходит неравномерно и выглядит не очень красиво. Можно ли сделать так, чтобы данные загружались в фоне, пока идет плавная анимация? Я не хочу ждать, пока все 1000 записей загрузятся перед началом анимации, но и не хочу, чтобы это влияло на ее плавность. Возможно ли это осуществить в JavaScript?

2

Async/await с setTimeout(0) реально работает. Запускай анимацию, потом в цикле каждые 10-20 элементов добавляй await new Promise(resolve => setTimeout(resolve, 0)). Браузер успеет отрендерить кадры между добавлением элементов. Или попробуй Web Workers для загрузки данных, но это сложнее.

3

Почему не DocumentFragment? Создаешь фрагмент, добавляешь туда все элементы в цикле, потом одним appendChild в DOM. Работает намного быстрее и поток не блокирует. Твой innerHTML += каждый раз всё перерисовывает заново — отсюда и тормоза.

4

попробуй requestAnimationFrame - разбивай загрузку на части. у меня была такая же проблема с каталогом товаров. вместо 1000 записей сразу грузил по 50 между кадрами. браузер успевает и анимацию показать, и данные подтянуть. или запусти анимацию первой, потом через setTimeout грузи маленькими кусками. у меня так контент плавно появлялся без подвисаний.