Исследование влияния применения Canvas API на скорость работы веб-приложений

ВВЕДЕНИЕ

С развитием веб-технологий и увеличением сложности веб-приложений вопрос оптимизации производительности становится одним из ключевых в задачах веб-разработки. Одним из наиболее ресурсоёмких аспектов при работе с веб-приложениями является визуальное отображение данных и интерфейсов пользователей. Браузерам приходится тратить значительные ресурсы процессорного времени и оперативной памяти для работы с Document Object Model (DOM) элементами, что может существенно влиять на скорость и отзывчивость веб-приложений.

В поисках решения этой проблемы разработчики и инженеры создали разнообразные подходы и технологии. Один из таких подходов - использование HTML элемента Canvas и связанного с ним Canvas API.

В данной статье мы рассмотрим сравнительный анализ использования DOM элементов и элемента Canvas в веб-разработке. Мы проанализируем преимущества и недостатки каждого подхода, а также предоставим количественные данные, демонстрирующие разницу в производительности и использовании ресурсов между ними [1].

ОСНОВНАЯ ЧАСТЬ

При работе с DOM элементами браузер тратит большое количество ресурсов компьютера: процессорного времени и оперативной памяти. Именно поэтому при работе с визуальными элементами разработчики стараются свести к минимуму обращение к DOM элементам или к их изменениям. Разработчики многих библиотек и фреймворков разработали для этих целей собственные решения. Так например разработчики одной их самой популярной библиотеки для frontend разработки – React, создали концепцию Virtual DOM. Согласно этому подходу все операции с DOM элементами происходят в оперативной памяти с их виртуальными упрощёнными версиями. Эти вносимые изменения происходят быстрее, чем с реальными DOM элементами. При этом применение внутренних алгоритмов оптимизации библиотеки React позволяет еще больше увеличить производительность веб-приложений.

Появление таких концепций, как Virtual DOM показывает актуальность проблемы медленной работы с DOM элементами в браузере. Однако использование даже самых совершенных алгоритмов не избавит от необходимости внесения изменений в DOM дерево. Применение подобных концепций лишь уменьшит количество обращений к DOM дереву.

Принципиально иной подход к отображению информации в браузере – использование HTML элемента Canvas, а также браузерного Canvas API для работы с ним. При использовании этого подхода программист имеет лишь один единственный DOM элемент и полный контроль над каждым его пикселем. С одной стороны это значительно увеличивает быстродействие веб-приложения, а с другой стороны усложняет логику работы и процесс разработки. При таком подходе разработчик сам отвечает за внешний вид и поведение приложения, в отличие от классического подхода с использованием DOM элементов, при котором все эти элементы управления уже реализованы на уровне браузера и операционной системы. Стоит также отметить, что для стилизации DOM-элементов программист может использовать CSS, а для анимаций - соответствующие средства из CSS: свойства “animation” и “transition”. Однако при использовании Canvas, разработчик вынужден самостоятельно стилизовать все визуальные элементы, создавать покадровую анимацию при помощи функции requestAnimationFrame из WebAPI [2], а также при необходимости самостоятельно создавать пользовательские компоненты и реализовывать реакции на каждое пользовательское событие [3].

Таким образом использование Canvas вместо классических DOM элементов имеет как преимущества в виде быстродействия итогового приложения, так и недостатки в виде увеличения сложности разработки.

Стоит также отметить, что при использовании элемента Canvas для рисования на нём возможно использование нескольких контекстов. Самым распространённым является CanvasRenderingContext2D. Обычно именно его имеют в виду, когда говорят об использовании Canvas. Это самый простой и низкоуровневый способ отрисовки в браузере. Однако если разработчик хочет максимально использовать всю мощь графического процессора, то следует рассмотреть возможность использовать WebGL. WebGL API используется с тем же HTML элементом Canvas, однако для отрисовки используется другой контекст рисования - WebGLRenderingContext и используется другой API - WebGL API [4].

Для того, чтобы принять решение об использовании одного из этих двух подходов, необходимо количественно оценить преимущества от использования Canvas по сравнению с DOM-элементами. Реализуем следующий интерфейс с помощью обоих подходов и сравним полученные результаты:

Рис. 1

На данном изображении размером 500×500 пикселей изображены красные квадраты размером 1×1 пиксель с прозрачностью 0,5. Расстояние между каждым квадратом и его соседями - 1 пиксель. Таким образом мы имеем строки и столбцы из 250 квадратов в каждом. Общее число квадратов: 250 × 250 = 62500.

В первом случае рассмотрим реализацию через DOM-элементы. Будем создавать одинаковые div-элементы при помощи функции createElement, задавать им необходимые стили и добавлять в их в существующее DOM дерево при помощи функции appendChild. Всего на странице будет 62500 таких DOM элементов. Запускать страницу мы будем в браузере Chrome, а анализировать результаты быстродействия мы будем при помощи браузерного профайлера. На рисунке ниже изображены результаты работы профайлера Chrome при загрузке страницы.

Рис. 2

Мы видим, что First Paint (FP) произошёл только спустя 1,27 секунды после начала загрузки страницы, а событие DOMContentLoaded (DCL) - спустя 2,46 секунды. При этом стадия выполнения JS-кода заняла 352 мс, стадия Rendering в браузере - 696 мс, а Painting - 1390 мс. Что заняло в общей сложности 2438 мс. Общее потребление памяти всей вкладкой браузера - 485 МБ.

Рис. 3

Рассмотрим теперь отображение с использованием Canvas.

Рис. 4

First Paint (FP) произошёл спустя 94 мс, а DOMContentLoaded (DCL) - спустя 92 мс. При этом стадия выполнения JS-кода заняла 53 мс, стадия Rendering в браузере - 0 мс, а Painting - 1 мс. Что заняло в общей сложности 54 мс. Общее потребление памяти всей вкладкой браузера - 34 МБ.

Рис. 5

Как видно из представленных результатов, при использовании большого числа DOM-элементов экономия памяти и времени работы процессора являются значительными. Результаты работы представлены ниже в сводной таблице:

Таблица

При таких очевидных преимуществах Canvas API зачастую сопряжено с некоторыми сложностями в использовании. Рассмотрим отдельно преимущества и недостатки применения Canvas API [5].

Преимущества:

• Производительность и скорость работы. Как было рассмотрено выше, применения Canvas API позволяет значительно сэкономить на ресурсах клиентского устройства. Тем больше это проявляется при росте числа DOM-элементов и в случае интенсивного использования графики, так как Canvas API позволяет напрямую управлять отдельными пикселями [5].
• Экономия памяти, так как нет необходимости в хранении информации о большом количестве DOM элементов.
• Разработчик может контролировать каждый пиксель в области рисования.

Недостатки:

• Сложность реализации анимаций.
• Управление DOM элементами легче, чем отдельными пикселями, а использование и поддержка кода с использованием Canvas API - сложнее. В случае в DOM элементами часть работы за нас делает браузер.
• Необходимость программистом самостоятельно реализовывать обработку пользовательских событий от визуальных элементов.
• Особенность работы с дисплеями с devicePixelRatio > 1 (например при работе со смартфонами). Программист должны следить за размерами Canvas и иногда это может вести неожиданным артефактам [6].

ЗАКЛЮЧЕНИЕ

В данной статье мы провели сравнительный анализ двух основных подходов к работе с визуальными элементами в веб-разработке: использование DOM элементов и элемента Canvas. Каждый из этих подходов имеет свои уникальные преимущества и недостатки, и правильный выбор зависит от конкретных требований и целей проекта.

Использование DOM элементов предоставляет разработчикам удобство и простоту работы с визуальными элементами, а также интеграцию с CSS и браузерными средствами анимации. Однако это может привести к значительным нагрузкам на ресурсы браузера при работе с большим числом элементов, что снижает производительность. В таких случаях использование элемента Canvas и Canvas API обеспечивают высокую производительность и контроль над каждым пикселем на холсте. Этот подход идеален для создания сложных графических приложений и игр, где скорость отображения данных критически важна. Однако он также требует более глубокого понимания работы с графикой и анимациями, что может усложнить разработку.

Исходя из результатов нашего сравнительного анализа, мы можем утверждать, что выбор между DOM элементами и элементом Canvas зависит от конкретных задач и приоритетов проекта. Важно иметь в виду, что каждый из этих подходов имеет свое место и может быть наиболее подходящим в определенных сценариях веб-разработки. Также оптимальное решение может заключаться в комбинации обоих методов, в зависимости от конкретных компонентов приложения.

1. Кочитов, М. Е. Рисование компьютерной мышью на холсте веб-страницы браузера с помощью инструмента Canvas / М. Е. Кочитов // Постулат. – 2019. – № 8(46). – С. 25. – EDN UGOZKG.
2. Улучшаем производительность HTML5 canvas [Электронный ресурс] - URL: https://habr.com/ru/articles/127014 (дата обращения: 16.11.2021).
3. Steve Johns. CPU versus GPU with the Canvas Web API [Электронный ресурс] - URL: https://www.middle-engine.com/blog/posts/2020/08/21/cpu-versus-gpu-with-the-canvas-web-api (дата обращения: 16.11.2021).
4. Evan Wallace. Building a professional design tool on the web [Электронный ресурс] - URL: https://www.figma.com/blog/building-a-professional-design-tool-on-the-web (дата обращения: 16.11.2021).
5. Chris Coyier. When to Use SVG vs. When to Use Canvas [Электронный ресурс] - URL: https://css-tricks.com/when-to-use-svg-vs-when-to-use-canvas/ (дата обращения: 16.11.2021).
6. Canvas Tutorial [Электронный ресурс] - URL: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial (дата обращения: 16.11.2021).