Как отрендерить 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
· 46 мин
Мне понравилось, выглядит круто.
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
коммент удалён
· 43 мин
Спасибо! 🔥
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён