Переформатировать большое количество изображений (600+) плавно
Я работаю над веб-приложением, которое заполняет страницу большим количеством изображений.
По макету он похож на поиск изображений, в котором пользователь выбирает некоторые настройки в верхней части страницы, и страница мгновенно заполняется изображениями, которые соответствуют его выбору.
Иногда в одном обратном вызове создается до 600+ изображений. Они являются элементами img с данными Uris, которые содержат встроенный svg.
Мой вопрос о производительности. Сам Javascript завершается очень быстро, но после того, как 600 или около того изображений были добавлены в DOM, браузер может взять ПЯТНАДЦАТЬ СЕКУНД, чтобы завершить все повторы. Браузер замерзает на это время, меню перестают отвечать на запросы, и никакие изменения не отображаются до завершения перекомпоновки. (Хром версия 66)
Есть ли способ для меня, чтобы устранить это узкое место и заставить все изображения переформатировать быстрее? Например, подход CSS, который делает макет тривиальным? Если бы я сделал все изображения одинакового размера, это помогло бы?
Если это не может быть ускорено, есть ли способ сделать повторные выпуски без блокировки взаимодействия пользователя со страницей?
Спасибо за вашу помощь!
1 ответ
РЕШЕНИЕ. Причина, по которой браузер зависал во время всех перекомпоновок, заключалась в том, что мой код выполнялся синхронно и, следовательно, связывал браузер.
Делая код асинхронным, делая setTimeout(function, 0) для каждого изображения, где function добавляет изображение в DOM, решил проблему.