Главная
АИ #50 (77)
Статьи журнала АИ #50 (77)
Исследование влияния применения Canvas API на скорость работы веб-приложений

10.5281/zenodo.10023814

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

Автор(-ы):

Чернецкий Илья Игоревич

14 декабря 2021

Рецензент

Шепель Алексей

Секция

Информационные технологии, телекоммуникации

Ключевые слова

Canvas API
DOM
Virtual DOM
браузер
JavaScript
CanvasRenderingContext2D
быстродействие
First Paint
DOMContentLoaded

Аннотация статьи

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

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

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

Текст статьи

ВВЕДЕНИЕ

С развитием веб-технологий и увеличением сложности веб-приложений вопрос оптимизации производительности становится одним из ключевых в задачах веб-разработки. Одним из наиболее ресурсоёмких аспектов при работе с веб-приложениями является визуальное отображение данных и интерфейсов пользователей. Браузерам приходится тратить значительные ресурсы процессорного времени и оперативной памяти для работы с 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-элементов экономия памяти и времени работы процессора являются значительными. Результаты работы представлены ниже в сводной таблице:

Таблица

 

DOM

Canvas API

First Paint (FP), мс

1270

94

DOMContentLoaded (DCL), мс

2460

92

Scripting, мс

352

53

Rendering, мс

696

0

Painting, мс

1390

1

Общее время, мс

2438

54

Память, МБ

485

34

При таких очевидных преимуществах 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).

Поделиться

Чернецкий И. И. Исследование влияния применения Canvas API на скорость работы веб-приложений // Актуальные исследования. 2021. №50 (77). URL: https://apni.ru/article/7227-issledovanie-vliyaniya-primeneniya-canvas-api

Похожие статьи

Другие статьи из раздела «Информационные технологии, телекоммуникации»

Все статьи выпуска
Актуальные исследования

#25 (207)

Прием материалов

15 июня - 21 июня

осталось 5 дней

Размещение PDF-версии журнала

26 июня

Размещение электронной версии статьи

сразу после оплаты

Рассылка печатных экземпляров

5 июля