Отображайте окно строк примерно от floor(s/h) до ceil((s+H)/h), добавив небольшой overscan. Полную высоту списка сохраняйте spacer-контейнером, а окно смещайте к его позиции.
Как работает виртуализация длинного списка элементов?
Отображайте окно строк примерно от floor(s/h) до ceil((s+H)/h), добавив небольшой overscan. Полную высоту списка сохраняйте spacer-контейнером, а окно смещайте к его позиции.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
В браузерном интерфейсе нужно показать 100000 строк одинаковой высоты h. Контейнер имеет высоту H и scrollTop=s. Независимо от конкретной библиотеки объясните, какие строки держать в DOM и как сохранить размер полосы прокрутки.
Ответ
Отображайте окно строк примерно от floor(s/h) до ceil((s+H)/h), добавив небольшой overscan. Полную высоту списка сохраняйте spacer-контейнером, а окно смещайте к его позиции.
Для фиксированной высоты расчёт индексов прямой; границы ограничивают диапазоном 0…N. Количество DOM-строк зависит от высоты viewport, не от всего массива. При переменной высоте нужны измерения и уточнение смещений. Дополнительно решают восстановление фокуса, стабильные ключи, поиск по содержимому и доступность: удаление невидимых узлов может затронуть пользовательское взаимодействие.