Как вставить тысячу элементов быстро
Вопрос
Нужно вывести в список тысячу строк из массива. Как бы ты это сделал, чтобы страница не тормозила?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Собрать элементы в `DocumentFragment` или массив и вставить одним `append`
Не читать геометрию (`offsetHeight` и т.п.) между записями, чтобы не вызвать принудительный reflow
Текст класть через `textContent`, а не строить HTML из данных
Для очень длинных списков использовать виртуализацию: рендерить только видимое
Тяжёлую подготовку данных можно разбить на части или вынести в воркер
Что могут спросить следом
- Что такое layout thrashing?
- Поможет ли
content-visibility: auto? - Как повесить обработчики на тысячу строк?
Разбор
Главная идея: меньше обращений к живому DOM и никаких чередований записи и чтения геометрии. Я бы создал элементы через createElement, заполнил текст через textContent и сложил в DocumentFragment, а потом вставил одним list.append(fragment). Браузер всё равно группирует изменения до кадра, но если в цикле читать offsetHeight или getBoundingClientRect, он будет вынужден пересчитывать layout на каждой итерации, это layout thrashing. Обработчики я бы не вешал на каждую строку, а сделал одно делегирование на список. Если строк не тысяча, а десятки тысяч, вставка сама по себе станет дорогой, и тогда нужна виртуализация: держим в DOM только видимые строки и подменяем их при прокрутке. Есть и CSS-подмога content-visibility: auto, которая позволяет браузеру не рендерить невидимые блоки.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.