Лента с бесконечной прокруткой
Вопрос
Спроектируй ленту постов с бесконечной прокруткой. Сорок пять минут - уложись в пять.
Веди разговор вслух, как на секции. Начинать с решения - главная ошибка: первые полторы минуты только вопросы.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
уточнил объём, частоту обновления и что делать с новыми постами сверху
пагинация курсором, а не страницами - иначе сдвиг при вставке даёт дубли и пропуски
виртуализация списка: в DOM только видимое плюс буфер
подгрузка через IntersectionObserver, а не обработчик скролла
восстановление позиции при возврате назад - иначе лента прыгает в начало
оптимистичные лайки с откатом при ошибке
картинки: размеры заранее, чтобы не было сдвига макета, ленивая загрузка
состояние ленты в кэше запросов, позиция и фильтры - в адресе
Что могут спросить следом
- Что если пользователь вернулся через час - показывать кэш или грузить заново?
- Как сделать так, чтобы лента работала при обрыве сети?
- Чем IntersectionObserver лучше обработчика скролла?
Разбор
Ключевая развилка, из-за которой тут всё и спрашивают, - курсор против страниц.
Лента постоянно пополняется сверху; при смещении по offset пользователь получит дубли
и пропуски. Курсор (?after=<id последнего>) от этого свободен.
Второе - виртуализация: через тысячу элементов в DOM браузер начинает заметно тормозить, поэтому рисуем только видимое окно плюс буфер. Высоту элемента либо фиксируем, либо меряем и кэшируем.
Третье, о чём забывают почти все, - возврат назад. Ушёл в пост, вернулся, лента должна быть на том же месте и с теми же данными. Это и кэш, и сохранение позиции прокрутки.
Новые посты сверху не вставляем молча: показываем «12 новых» и вставляем по клику - иначе контент уезжает под курсором.
Картинки: width/height или aspect-ratio заранее, иначе CLS. Лайки - оптимистично,
с откатом.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.