Как отрендерить 1 млн точек на графике и не уронить браузер?

Реализовал хардкорный пет-проект / тестовое задание: монитор тренировок ML-моделей для работы с огромными объемами данных.

Что под капотом:

- Производительность: Перешел с DOM/SVG на uPlot (HTML5 Canvas). 1M+ точек летают без фризов, INP — 72 мс (при 4x CPU Throttling), память — всего ~35–45 МБ.

- Честность данных: Написал алгоритм даунсэмплинга (min/max по бакетам), который сохраняет критические скачки и спайки потерь на любом уровне зума.

- Надежность: Корректная обработка NaN/Infinity как разрывов линий и защита от гонок запросов через AbortController.

- Тесты: Покрыл логику юнит-тестами на Vitest (4/4).

Стек: React, TypeScript, Vite, uPlot, Tailwind, Vitest.

Открыт к новым предложениям во frontend-команду! Задачи с производительностью и сложными интерфейсами — это прямо ко мне.

🔗 Ссылки: • Деплой: https://soup-monitor.netlify.app • Код: https://github.com/SSUHOY/soup-monitor

Как отрендерить 1 млн точек на графике и не уронить браузер? | Сетка — социальная сеть от hh.ru
Как отрендерить 1 млн точек на графике и не уронить браузер? | Сетка — социальная сеть от hh.ru Как отрендерить 1 млн точек на графике и не уронить браузер? | Сетка — социальная сеть от hh.ru