Выбор ответа Senior System design на фронте обновлено
График на 100 000 точек
Вопрос
Дашборд рисует график из 100 000 точек, обновляемый раз в секунду через WebSocket. Интерфейс подвисает. Что из перечисленного правильно в первую очередь?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Canvas или WebGL, прореживание точек и расчёты в Web Worker. На экране шириной 1500 пикселей нет смысла рисовать 100 000 точек: их прорежают с сохранением формы (например, LTTB).
Варианты ответа
- Canvas или WebGL, прореживание точек и расчёты в Web Workerправильный ответ
- Перейти на SVG с отдельным
<circle>на каждую точку графика - Хранить точки в Context, чтобы React сам оптимизировал рендер
- Увеличить частоту обновлений, чтобы данные приходили мельче
Разбор
На экране шириной 1500 пикселей нет смысла рисовать 100 000 точек: их прорежают с сохранением формы (например, LTTB). Canvas или WebGL не создают DOM-узел на точку, а расчёты в воркере не блокируют главный поток. 100 000 SVG-элементов это огромный DOM. Context перерисует потребителей, не ускорит. Увеличение частоты усилит проблему.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.