Scientific journal

Modern high technologies

ISSN 1812-7320

"Перечень" ВАК

ИФ РИНЦ = 0,940

Введение

Современные ИТ-инфраструктуры организаций сталкиваются с растущей нагрузкой, вызванной миграцией приложений в веб-среду, а также активной разработкой нового программного обеспечения для нее. Веб-графика, включая такие технологии, как WebGPU (Web Graphics Processing Unit – технология для рендеринга графики в браузерах и выполнения вычислений на GPU (Graphics Processing Unit – графический процессор)), становится ключевым элементом для высокопроизводительных решений – от интерактивных аналитических панелей до сложных приложений и виртуальных рабочих пространств [1]. Однако интенсивное использование графических ресурсов в браузерах создает риски перегрузки GPU, неэффективного распределения вычислительных мощностей и роста эксплуатационных затрат. В таких условиях мониторинг производительности веб-графики превращается в критический компонент управления ИТ-ресурсами, обеспечивающий прозрачность использования оборудования, прогнозирование нагрузок и оптимизацию инфраструктуры.

Несмотря на активное развитие WebGPU как преемника WebGL, инструменты для анализа его работы остаются ограниченными [2]. Существующие решения браузеров фокусируются на отладке кода, но игнорируют задачи мониторинга в масштабах организации: сбор метрик потребления GPU, анализ распределения ресурсов между приложениями, интеграцию с системами управления инфраструктурой. На сегодняшний день наиболее известными open source решениями для отслеживания работы WebGPU являются WebGPU DevTools [3] и WebGPU recorder [4]. Однако новых версий первой утилиты не выходило с 2023 года, что означает отсутствие метрик для новых версий API. Другой же аналог более современный, но не имеет функционала для работы с внешними сервисами и не способен масштабироваться в случае большого количества событий. Упомянутые инструменты предоставляют базовую функциональность для перехвата вызовов интерфейса и последующего анализа узких мест, но не способны работать в контексте корпоративных систем. Это создает пробел в средах, где неконтролируемый анализ и отсутствие возможности прогнозирования нагрузки на графические процессоры могут привести к простоям, увеличению затрат на оборудование и снижению производительности критически важных сервисов.

В данной работе представлен усовершенствованный метод мониторинга веб-графики, который был реализован при разработке приложения для системы анализа и отслеживания видеопамяти. Помимо функционала просмотра кода шейдеров и ошибок, отслеживания процесса рендеринга, утилита предоставляет возможности для учета общей задействованной видеопамяти, отслеживания API на протяжении всего процесса работы, отправки собранной информации во внешние сервисы для последующего анализа; также предложен более универсальный метод отслеживания событий. Разработанное решение направлено на устранение разрыва между техническими возможностями WebGPU и операционными требованиями организаций и обеспечивает баланс между инновациями в веб-графике и устойчивостью ИТ-инфраструктуры.

Современные инструменты отладки браузеров предоставляют широкий спектр возможностей для анализа и оптимизации веб-приложений. Эти инструменты позволяют инспектировать DOM (Document Object Model), отлаживать JavaScript код, анализировать сетевые запросы, профилировать производительность и визуализировать время выполнения кода [5]. Однако они имеют ряд ограничений в контексте мониторинга графики WebGPU, что делает их недостаточными для полноценного анализа производительности и оптимизации ресурсов в корпоративных ИТ-средах. WebGPU – это относительно новая технология, и существующие инструменты отладки не предоставляют встроенной поддержки для анализа ее работы. DevTools Chrome и Firefox Developer Tools ориентированы на WebGL [6]. Существующие open source решения, такие как WebGPU DevTools от Hoodgail Benjamin и Takahiro, способны закрыть ряд требований, однако их функционала не хватает для использования в корпоративных системах, так как они не способны проводить анализ собранных данных и отправлять итоговую статистику во внешние сервисы. Также недостатком разработанного инструмента является отслеживание работы интерфейса лишь первые 50 кадров, что делает невозможным сбор данных на протяжении долгого времени.

Для устранения ограничений существующих инструментов отладки и обеспечения полноценного мониторинга графики требуется разработка специализированного программного обеспечения, которое сможет интегрироваться с браузером на уровне его архитектуры. Одним из таких подходов является использование content и background скриптов, которые позволяют обойти ограничения встроенных утилит и обеспечить сбор данных о производительности WebGPU. Эти скрипты работают в изолированных контекстах браузера, что дает им возможность взаимодействовать с WebGPU API, собирать метрики и передавать их в системы мониторинга, недоступные для стандартных инструментов отладки.

Content-скрипт исполняется в контексте веб-страниц, предоставляет доступ к DOM и контексту веб-приложения [7]. Это позволяет отслеживать параметры рендеринга, потребление видеопамяти и выполнение шейдеров. В рамках мониторинга он выступает как агент сбора данных: фиксирует события GPU, слушает вызовы API и передает сырые метрики через защищенные каналы связи в background-скрипт для последующей агрегации.

Благодаря работе в изолированном окружении [8] background-скрипт обеспечивает безопасность данных и выполняет функцию модуля обработки. Он анализирует полученные метрики, добавляет метаданные (идентификатор устройства, время выполнения) и форматирует статистику для интеграции с внешними системами мониторинга. Также он управляет передачей информации в корпоративные хранилища.

Взаимодействие скриптов через API chrome.runtime обеспечивает безопасный обмен данными, соответствующий требованиям корпоративной безопасности [9]. Например, content-скрипт передает только структурированные метрики, исключая доступ к чувствительным данным пользователя, а background-скрипт шифрует информацию перед отправкой в облачные сервисы. Работа скриптов в отдельном изолированном потоке позволила обеспечить защиту полученных данных от внешнего вмешательства и не нагружать основной поток, что могло быть повлиять на итоговые метрики.

Для отслеживания событий API в упомянутом ранее решении используется метод декорирования, что дает возможность реализовать дополнительную логику поверх исходного кода без его изменения. Однако данный подход имеет ряд существенных минусов:

• создание оберток для каждой функции требует больших усилий, так как API содержит множество методов. Это усложняет разработку и повышает риск ошибок [10];

• изменения в API требуют ручного обновления оберток [11], что усложняет поддержку кода, особенно учитывая его активное развитие;

• обертки добавляют дополнительный слой вызовов, что может снижать производительность, особенно в критичных для рендеринга операциях [12].

Цель исследования – разработать усовершенствованный и универсальный метод мониторинга для WebGPU, позволяющий оценивать использование графических ресурсов в реальном времени.

Материалы и методы исследования

В исследовании применен комбинированный подход, включающий анализ ограничений существующих средств отладки и open source решений, а также разработку специализированного расширения для мониторинга WebGPU. На основе анализа встроенных браузерных инструментов предложен процесс обмена сообщениями, использующий связку content- и background-скриптов для сбора и передачи метрик производительности. В качестве основного метода отслеживания использовано проксирование, позволяющее автоматически прослушивать вызовы API без ручной обработки и с учетом будущих изменений. Для передачи данных между контекстами реализована интервальная группировка событий, снижающая нагрузку на сеть.

Результаты исследования и их обсуждение

С учетом выявленных недостатков был реализован метод проксирования, который отслеживает все свойства переданного объекта, способен динамически мониторировать новые функции и удалять обработчики для уже не актуальных. Это позволило отслеживать взаимодействия с API без ручного создания дополнительных оберток, уменьшило количество кода, а также дало возможность учитывать любые изменения в будущих версиях технологии.

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

• один обработчик заменяет множество оберток;

• новый метод API автоматически перехватывается без изменений в коде;

• минимизируется риск пропущенных вызовов и ошибок;

• прокси отслеживают все обращения к объектам и их свойствам.

Детализация метода прослушивания с использованием метода проксирования:

1) осуществляется связка прокси обработчика и отслеживаемого объекта (WebGPU);

2) прокси отслеживает вызовы всех методов, фиксируя начальное время выполнения и переданные аргументы;

3) в процессе работы регистрируются ключевые параметры, такие как использование видеопамяти, время, затраченное на рендер одного кадра, текущая частота кадров и количество вызовов, что помогает выявлять узкие места в рендеринге;

4) после выполнения метода прокси отправляет собранные данные в background-скрипт для агрегирования и интеграции с системами мониторинга. Также на уровне прокси происходит перехват ошибок.

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

1. Генерация событий на стороне веб-приложения

При вызове проксированного метода override-скрипт создает пользовательское событие, содержащее всю необходимую информацию: аргументы вызова, временные метки, идентификаторы контекста и другие параметры. Оно регистрируется в DOM веб-страницы, что позволяет content-скрипту получить доступ к данным, не нарушая изоляцию контекстов.

2. Перехват событий в content-скрипте

Content-скрипт, работающий в контексте веб-страницы, прослушивает пользовательские события и извлекает из них данные о вызовах API. Так как интерфейс способен генерировать большое количество событий, то передача информации о каждом может не только существенно понизить работу самой утилиты, но и загрузить сеть устройства. Для решения этой проблемы разработан метод интервальной группировки, при которой события накапливаются 1 раз в 16 миллисекунд (примерно 1 кадр при 60 FPS), и после окончания таймера накопленные данные передаются в background-скрипт.

3. Обработка данных в background-скрипте

Background-скрипт, выполняющийся в изолированной среде расширения, получает сообщения от content-скрипта и агрегирует их. На этом этапе данные обогащаются дополнительной информацией (например, идентификатором сессии или метаданными устройства).

4. Ожидание сообщений в коде расширения

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

Для передачи дополнительных данных в объект события используется интерфейс CustomEvent, который позволяет включать пользовательскую информацию через свойство detail [13]. Это дает возможность обеспечить гибкость в передаче метрик производительности WebGPU без необходимости изменения структуры события. Поскольку механизм передачи пользовательских событий реализован во всех современных браузерах, разработанное решение поддерживается на различных операционных системах (Windows, macOS, Linux) и устройствах (десктопах, мобильных устройствах) [14]. Это особенно важно для организаций с разнородной ИТ-инфраструктурой.

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

Схема процесса сбора данных Источник: составлено авторами

Сравнение разработанного приложения с аналогами

Примечание: составлено авторами

Интерфейс расширения создан с помощью библиотеки React. Она представляет собой открытый программный инструмент, разработанный для создания пользовательских интерфейсов веб-приложений. React базируется на принципе компонентного подхода, что позволяет разбивать интерфейс на небольшие независимые компоненты, управляемые данными, что предоставляет эффективный и декларативный способ создания интерфейсов путем использования JavaScript и JSX [15]. Компоненты похожи на функции JavaScript, они выполняют ту же задачу, но в другой среде и с другим подходом. Компоненты принимают входные данные, известные как props, и возвращают их в виде элементов React, которые можно увидеть на экране пользователя [16].

Одним из ключевых преимуществ является виртуальный DOM, который позволил эффективно обновлять только измененные части интерфейса вместо полного перерисовывания всего дерева DOM [17]. Это повышает производительность приложений, улучшает пользовательский опыт и сокращает потребляемые ресурсы при обновлении экрана. Сравнение разработанного приложения с аналогами представлено в таблице.

Выводы

Созданное программное обеспечение имеет следующие возможности:

• динамический метод непрерывного мониторинга событий WebGPU;

• механизм интеграции для отправки данных в системы аналитики;

• интервальная группировка событий;

• отслеживание ошибок и учет общей использованной видеопамяти.

Метод проксирования, используемый для отслеживания вызовов API, упростил процесс мониторинга, позволяя автоматически перехватывать все новые функции API без необходимости в ручной настройке. Это снизило вероятность ошибок и сделало систему более гибкой в условиях изменений в версиях WebGPU. Применение интервальной группировки событий дало возможность оптимизировать использование видеопамяти и сократить эксплуатационные затраты.

Таким образом, предложенное решение является шагом вперед в области мониторинга веб-графики и может быть эффективно использовано в корпоративных ИТ-системах для повышения стабильности и производительности сервисов, а также для оптимизации расходования ресурсов.