Спроектируй дашборд в реальном времени
Вопрос
Спроектируй дашборд мониторинга: десяток графиков и таблица событий, данные обновляются каждую секунду, пользователь меняет период и фильтры. Пройди этапы: требования, оценка нагрузки, API, данные, компоненты, узкие места.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Требования: графики, таблица событий, выбор периода, фильтры, автообновление, экспорт, работа во вкладке часами
Оценка: десятки тысяч точек на график, сотни событий в секунду, 10+ виджетов одновременно
API: REST для исторического окна, WebSocket или SSE для дельт, агрегация на сервере под разрешение графика
Данные: кольцевой буфер точек на виджет, параметры периода и фильтров в URL, кеш окон
Компоненты: DashboardLayout, Widget с ленивым монтированием, Chart на canvas, VirtualTable
Узкие места: троттлинг перерисовки до кадра, downsampling, Web Worker для агрегаций, пауза в фоновой вкладке, утечки памяти
Что могут спросить следом
- Почему canvas, а не SVG?
- Что делать, когда вкладка в фоне?
- Как не потерять события при переподключении?
Разбор
Требования: десяток графиков и таблица событий, выбор периода и фильтров, автообновление, вкладка открыта часами. Масштаб: на графике десятки тысяч точек, событий сотни в секунду, поэтому рендерить каждое событие сразу нельзя. API: историческое окно беру REST-запросом, причём сервер агрегирует данные под ширину графика, а дальше по WebSocket приходят дельты. Данные: у каждого виджета кольцевой буфер фиксированного размера, чтобы память не росла, период и фильтры в URL, чтобы ссылкой можно было поделиться. Компоненты: сетка виджетов, каждый монтируется лениво, когда виден, графики на canvas, таблица с виртуализацией. Узкие места: входящие события складываю в буфер и перерисовываю не чаще раза в кадр или раз в секунду, прореживание и агрегации считаю в Web Worker, в фоновой вкладке по visibilitychange ставлю обновления на паузу и догружаю пропущенное при возвращении, при переподключении запрашиваю данные с последней метки времени.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.