Canvas vs SVG: как я выбирал технологию для дашборда с большими данными
Недавно делал дашборд, где пользователи могут менять размер графиков, тянуть их по высоте и ширине. Плюс данных приходит много - от нескольких сотен до нескольких тысяч точек в зависимости от графика.
Изначально хотел идти с SVG. Честно, он мне нравится больше - векторная графика красиво масштабируется, анимации плавные, в целом выглядят изящнее. Но интуиция подсказывала, что с таким объёмом данных могут быть проблемы. Решил разобраться глубже.
Что происходит с SVG
Каждая точка, каждый бар, каждый элемент графика - это отдельная нода в DOM. Звучит безобидно, пока не посчитаешь: 10,000 точек = 10,000 DOM элементов.
Браузер держит их все в памяти, плюс для каждого элемента отслеживает события (hover, click), стили, позицию.
Когда пользователь меняет размер графика - браузер пересчитывает layout для всех этих элементов. При каждом изменении. Это называется reflow, и это дорого.
На десктопе ещё терпимо(но уже подлагивет, особенно если графиков на странице много 🤯), но мобильные устройства уже начинает заметно грузить.
Что происходит с Canvas
Canvas работает по-другому. Он просто рисует пиксели напрямую в bitmap. После того как отрисовал - браузер "забывает" что там нарисовано. В памяти хранится только финальная картинка, а не информация о каждом элементе.
10 точек или 10,000 - для Canvas без разницы. Он просто прогоняет цикл и рисует. Никакого DOM, никаких пересчётов layout. Когда пользователь ресайзит график - Canvas просто перерисовывает всё заново, и делает это в разы быстрее чем SVG пересчитывает свои элементы.
Где подвох с Canvas
Интерактивность. В SVG можно просто повесить hover на элемент - работает из коробки. В Canvas нужно вручную отслеживать координаты курсора и проверять, попал ли пользователь в нужную область. Это дополнительный код, но для моего кейса это была приемлемая цена за производительность.
Вывод
Если у вас меньше 1,000 элементов и нужна богатая интерактивность (hover на каждом элементе, тултипы, анимации) - SVG отличный выбор.
Если данных много, или они обновляются в реалтайме, или важна производительность на мобильных - Canvas. Да, интерактивность прикручивать руками, но скорость того стоит.
В итоге работа с Chart.js(Canvas под капотом). Графики нормально выглядят даже при использовании терминала(только анимации приходиться отключать), ресайз работает, пользователи довольны.
Ну а если вам нужен SVG, можете обратить внимание на D3.js.
Кстати, с чем сами работаете?
#frontend #dashboard #performance #javascript #webdev #nuxt #charts #vue #react #svg #canvas #chartjs #d3js
Недавно делал дашборд, где пользователи могут менять размер графиков, тянуть их по высоте и ширине. Плюс данных приходит много - от нескольких сотен до нескольких тысяч точек в зависимости от графика.
Изначально хотел идти с SVG. Честно, он мне нравится больше - векторная графика красиво масштабируется, анимации плавные, в целом выглядят изящнее. Но интуиция подсказывала, что с таким объёмом данных могут быть проблемы. Решил разобраться глубже.
Что происходит с SVG
Каждая точка, каждый бар, каждый элемент графика - это отдельная нода в DOM. Звучит безобидно, пока не посчитаешь: 10,000 точек = 10,000 DOM элементов.
Браузер держит их все в памяти, плюс для каждого элемента отслеживает события (hover, click), стили, позицию.
Когда пользователь меняет размер графика - браузер пересчитывает layout для всех этих элементов. При каждом изменении. Это называется reflow, и это дорого.
На десктопе ещё терпимо(но уже подлагивет, особенно если графиков на странице много 🤯), но мобильные устройства уже начинает заметно грузить.
Что происходит с Canvas
Canvas работает по-другому. Он просто рисует пиксели напрямую в bitmap. После того как отрисовал - браузер "забывает" что там нарисовано. В памяти хранится только финальная картинка, а не информация о каждом элементе.
10 точек или 10,000 - для Canvas без разницы. Он просто прогоняет цикл и рисует. Никакого DOM, никаких пересчётов layout. Когда пользователь ресайзит график - Canvas просто перерисовывает всё заново, и делает это в разы быстрее чем SVG пересчитывает свои элементы.
Где подвох с Canvas
Интерактивность. В SVG можно просто повесить hover на элемент - работает из коробки. В Canvas нужно вручную отслеживать координаты курсора и проверять, попал ли пользователь в нужную область. Это дополнительный код, но для моего кейса это была приемлемая цена за производительность.
Вывод
Если у вас меньше 1,000 элементов и нужна богатая интерактивность (hover на каждом элементе, тултипы, анимации) - SVG отличный выбор.
Если данных много, или они обновляются в реалтайме, или важна производительность на мобильных - Canvas. Да, интерактивность прикручивать руками, но скорость того стоит.
В итоге работа с Chart.js(Canvas под капотом). Графики нормально выглядят даже при использовании терминала(только анимации приходиться отключать), ресайз работает, пользователи довольны.
Ну а если вам нужен SVG, можете обратить внимание на D3.js.
Кстати, с чем сами работаете?
#frontend #dashboard #performance #javascript #webdev #nuxt #charts #vue #react #svg #canvas #chartjs #d3js
🔥3❤1