Developer

Кейс: лента новостей

↑ 8.4 Frontend System Design · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

Классическая задача: бесконечная лента с медиа и реакциями.

Требования

  • бесконечная прокрутка постов с текстом, изображениями, видео;
  • лайки и комментарии, обновление в реальном времени;
  • мобильные и десктоп, медленные сети;
  • быстрая первая отрисовка (LCP), плавная прокрутка.

Архитектура

FeedPage
 ├─ Composer (новый пост)
 ├─ VirtualList
 │    └─ PostCard (Header, Content, Media, Actions)
 └─ NewPostsBanner («Есть новые записи»)

Данные

  • курсорная пагинация: GET /feed?cursor=;
  • нормализация: posts, users, comments;
  • кэш (Query), сохранение позиции при возвращении;
  • оптимистичные лайки;
  • обновления: SSE или периодический опрос новых, баннер вместо автовставки (не сдвигать ленту под пальцем).

Производительность

  • виртуализация списка (переменная высота, оценка размеров);
  • ленивая загрузка изображений, srcset, blurhash или плейсхолдер с фиксированным соотношением сторон (без CLS);
  • видео: воспроизведение по видимости (IntersectionObserver), preload=metadata;
  • разбиение крупных рендеров, content-visibility: auto;
  • предзагрузка следующей страницы за N элементов до конца;
  • skeleton при загрузке.

Надёжность и UX

  • состояния: загрузка, пусто, ошибка с повтором, конец ленты;
  • повторные попытки с backoff;
  • восстановление после offline;
  • жест pull-to-refresh на мобильных;
  • доступность: заголовки, регионы, aria-busy, управление фокусом при подгрузке.

Ранжирование и персонализация

Обычно на сервере; клиент отправляет события просмотров (impressions) пакетами (sendBeacon), формирует сигналы (время просмотра).

Аналитика и защита

  • батчинг событий аналитики;
  • санитизация пользовательского контента;
  • ограничение размера медиа, проверка URL.

Вопросы с ответами

Вид графа

Обратные ссылки