Поделиться через

Рекомендации по повышению производительности для приложений WebView2

Используйте следующие методики для оптимизации времени запуска WebView2, памяти, ЦП и использования сети. Используйте эти средства и рабочие процессы для устранения неполадок с производительностью.

Внедрение Microsoft Edge WebView2 в приложения для Windows позволяет использовать современные веб-функции. WebView2 использует многопроцессную архитектуру Edge, поэтому каждый элемент управления запускает несколько процессов подсистемы браузера, которые добавляют объем памяти и запуска.

Подробное содержимое:

Определение типа узкого места производительности

Понаблюдайте за симптомами низкой производительности, чтобы определить, связана ли проблема:

Использование среды выполнения Evergreen

  • По возможности развертывайте приложение с помощью среды выполнения Evergreen WebView2. Среда выполнения Evergreen обновляется автоматически, чтобы получить последние улучшения производительности и исправления безопасности. Сохраняйте среду выполнения WebView2 постоянной (то есть обновляемой), чтобы обеспечить будущее подтверждение приложения. Использование фиксированной версии может отсутствовать в последних оптимизациях.

  • Если необходимо использовать фиксированную среду выполнения для автономного использования или для обеспечения совместимости, регулярно обновляйте ее после тестирования новых сборок.

  • Протестируйте приложение с помощью последних каналов предварительной версии WebView2 (бета-версия, разработка или Canary), чтобы подготовиться к предстоящим изменениям. Многие прошлые проблемы с производительностью, такие как утечка памяти и высокая загрузка ЦП, были устранены в более новых версиях среды выполнения WebView2.

Если версии Microsoft Edge и WebView2 совпадают, а Microsoft Edge работает, необходимые двоичные файлы WebView2 уже находятся в памяти, что повышает производительность запуска.

См. также:

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

Холодный запуск (холодный запуск)

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

Чтобы оптимизировать запуск, используйте следующие рекомендации.

Не используйте WebView2 для начального пользовательского интерфейса

  • Для отображения экранов-заставок или простых диалоговых окон используйте упрощенные экраны XAML или Win32 вместо WebView2.

  • Избегайте отображения экранов-заставок или простых диалоговых окон с помощью WebView2 из-за затрат на запуск и состязания за ресурсы. Инициализация WebView2 только при отображении фактического веб-содержимого.

См. также:

Оптимизация расположения папки данных пользователя (UDF)

  • Для повышения производительности сохраните определяемую пользователем папку в папке данных локального приложения по умолчанию. См. раздел Управление папками данных пользователя.

  • Избегайте медленных дисков или сетевых ресурсов; поместите данные на более быстрый физический диск.

Избегайте избыточных экземпляров WebView2

Планируйте пользовательский интерфейс так, чтобы не создавать больше элементов управления WebView2, чем необходимо.

Например, при переходе между несколькими веб-страницами может быть быстрее повторно использовать один WebView2 и просто перейти по новому URL-адресу, а не уничтожать и повторно создавать элемент управления WebView2.

См. также:

Использование памяти и управление процессами

Каждый элемент управления WebView2 создает собственный набор процессов, таких как браузер, отрисовщик и GPU. Использование ресурсов обычно растет по мере создания большего числа экземпляров WebView2, при этом каждый экземпляр выполняет собственный набор процессов браузера.

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

Ниже приведены рекомендации по управлению объемом памяти и сокращению объема памяти.

Общий доступ к средам WebView2

  • Чтобы сохранить память, используйте ее CoreWebView2Environment во всех элементах управления WebView2 в приложении, обеспечивая согласованность параметров для общего доступа.

  • Повторно используйте одну и ту же среду в интерфейсах с вкладками вместо создания нескольких сред.

См. также:

Использование общего доступа к процессам на уровне приложения

  • Если это возможно, используйте общий доступ к процессам на уровне приложения.

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

    Помните, что при совместном использовании папки пользовательских данных (UDF) базовые данные (такие как файлы cookie, кэши и базы данных) совместно используются различными приложениями.

См. также:

Избегайте крупных область объектов узла

Если вы используете для AddHostObjectToScript предоставления объектов .NET в Интернете, помните о том, что эти объекты хранятся в памяти. На весь объект фактически ссылаются до тех пор, пока контекст скрипта продолжает жить, что может предотвратить сборку мусора этого объекта на стороне .NET.

Не предоставляйте граф очень больших объектов, если для создания скриптов требуется только небольшая часть. Предпочитайте создавать узкие целевые объекты узла вместо передачи полных моделей приложений. Например, вы можете:

  • Предоставление только операций и данных, которые действительно нужны странице. Например, предоставьте FileService объект , а не весь AppContextобъект .

  • Обертывание сложных объектов за небольшими фасадами, чтобы избежать непреднамеренного предоставления глубоких иерархий объектов.

  • Для коллекций предоставьте отфильтрованные или страничные результаты, а не предоставляйте полную структуру данных.

Когда страница, на которую требуется объект, исчезнет, вызовите CoreWebView2.RemoveHostObjectFromScript , чтобы освободить граф объекта. Например, если вы перейдете со страницы, на которую использовался главный объект, удалите этот объект, чтобы избежать сохранения его активности в фоновом режиме.

См. также:

Предотвращение утечек памяти

  • Удалите собственные обработчики событий перед удалением объектов WebView2, чтобы избежать ссылочных циклов и утечек.

  • Избегайте закрытия, которые строго ссылаются на WebView2; при необходимости используйте слабые ссылки.

  • Вызовите WebView2.Dispose() , чтобы освободить объекты WebView2, когда они больше не нужны.

См. также:

Использование API управления памятью

  • Установите для MemoryUsageTargetLevel = CoreWebView2MemoryUsageTargetLevel.Low неактивных WebViews, чтобы уменьшить использование памяти. Это может предложить обработчику браузера удалить кэшированные данные или переключить память на диск. Когда экземпляр WebView2 снова активен, восстановите целевой уровень до , чтобы Normalобеспечить полную производительность. См. раздел Целевой объект использования памяти в обзоре API WebView2.

  • Если экземпляр WebView2 некоторое время не будет использоваться, вызовите CoreWebView2.TrySuspendAsync() для приостановки процесса отрисовщика, что приостанавливает выполнение скриптов и еще больше сокращает использование ресурсов. При необходимости возобновляйте работу с Resume() . Эти Try операции являются лучшими. См . раздел Производительность и отладка в обзоре API WebView2.

Оптимизация веб-содержимого

Периодическое обновление WebView2

Производительность ЦП и отрисовки

WebView2 разгружает отрисовку веб-содержимого в обработчик браузера, который использует Edge, поэтому характеристики производительности похожи на запуск сайта в Edge.

Следующие методики обеспечивают эффективное использование ЦП и беспроблемную отрисовку.

Включение аппаратного ускорения

  • Не отключайте использование GPU WebView2 для отрисовки (с помощью флага disable-gpu ), за исключением случаев устранения неполадок.

    По умолчанию WebView2 использует GPU для отрисовки. Использование GPU WebView2 имеет решающее значение для производительности. Необходимо выделить драйверы GPU и дополнительные буферы, что требует дополнительной памяти.

См. также

Оптимизация веб-содержимого

Оптимизируйте страницы с помощью следующих методов:

  • Ограничьте тяжелые возможности JavaScript.

  • Отмена или регулирование задач.

  • Используйте CSS (а не JavaScript) для анимации.

  • Разделение длинных скриптов для поддержания реагирования пользовательского интерфейса.

  • Используйте средства разработки Microsoft Edge для выявления узких мест.

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

См. также:

Сокращение ненужного взаимодействия

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

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

Управление приоритетом процесса

  • Если приложение имеет тяжелую собственную рабочую нагрузку, тщательно назначьте приоритеты потоков, чтобы избежать нехватки потоков WebView2. WebView2 создает отдельные процессы отрисовщика.

См. также:

Тестирование реальных сценариев

  • Протестируйте фактическое содержимое на целевом оборудовании, используя Средства разработки Microsoft Edge для поиска и оптимизации проблем с производительностью.

См. также:

Производительность сети и загрузки

Задержка сети и ограниченная пропускная способность могут вызвать проблемы с производительностью, воспринимаемые пользователем, особенно при загрузке веб-содержимого в элементе управления WebView2.

Приведенные ниже рекомендации пересекаются с общей веб-разработкой.

Использование кэширования и служебных рабочих ролей

WebView2 поддерживает кэширование в браузере.

  • Использование кэширования и служебных рабочих ролей.

  • Обслуживают правильные заголовки кэша, чтобы повторяющиеся запросы ресурсов использовали кэшированные версии.

  • Рассмотрите возможность предварительного кэширования статических файлов с помощью рабочей роли службы для автономного доступа; но отслеживайте размер кэша.

См. также:

Проверка узких мест сети

Используйте средство DevTools Network для выявления медленных ресурсов в WebView2; См . раздел Проверка сетевой активности.

По мере необходимости оптимизируйте или асинхронную загрузку скриптов или API сторонних разработчиков.

Уменьшение начальных полезных данных

Чтобы улучшить воспринимаемую скорость, выполните приведенные далее действия.

  • Оставьте начальный индикатор полезной нагрузки. Предпочитайте отправлять статический HTML-код, так как обычно он загружается, анализируется и отрисовывается быстрее, чем JavaScript. Будьте осторожны при первоначальном использовании JavaScript вместе с одностраничной платформой приложений; такая платформа обычно загружает много кода при запуске, что может отложить первоначальную отрисовку веб-содержимого.

    HTML загружается, анализирует и отрисовывается очень быстро — быстрее, чем время, затраченное JavaScript на создание того же пользовательского интерфейса. В некоторых одностраничных платформах JS, даже если исходный HTML-код платформы невелик, весь код платформы должен быть скачан, проанализирован и запущен, прежде чем что-либо можно будет отобразить.

  • Отложить тяжелые компоненты.

  • Отложенная загрузка изображений или скриптов после появления начального пользовательского интерфейса.

См. также:

Обмен данными между элементом управления WebView2 и ведущим приложением

Выберите правильный канал коммуникации

WebView2 предоставляет различные варианты обмена данными между узлами и узлами.

  • Попробуйте использовать веб-сообщения, а не размещайте объекты. Веб-сообщения, как правило, быстрее, чем объекты узла, из-за использования памяти и времени, из-за простоты и надежности веб-сообщений.

  • Используйте объекты узла только в том случае, если вам нужны возможности, которые веб-сообщения не могут легко выразить, например:

    • Многофункциональные, похожие на объекты API (методы, свойства, события), которые необходимо предоставить непосредственно в JavaScript.

    • Взаимодействие с отслеживанием состояния, в котором поддержание контекста на стороне узла проще, чем передача структурированных сообщений туда и обратно.

    • Большие или двоичные потоки данных, в которых многократное сериализация полезных данных строк в веб-сообщения становится неэффективным.

Объекты узла имеют следующие недостатки:

  • Для ведущих объектов требуется маршалирование COM, что может привести к нестабильности, если граф объектов изменяется или не маршалируется правильно.

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

  • Объекты узла создают более тесную связь между веб-кодом и кодом узла, что снижает переносимость.

См. также:

Оптимизация взаимодействия

Реализуйте асинхронное пакетное взаимодействие, чтобы свести к минимуму обмен данными IPC и сократить копирование данных.

См. также:

Средства телеметрии и профилирования

Сбор данных является ключом к выявлению и устранению проблем с производительностью.

Ниже приведены средства и методы телеметрии для WebView2.

Трассировка WebView2 ETW

Используйте профиль Майкрософт WebView2.wprp (сбор трассировки трассировки трассировки windows) с помощью средства записи производительности Windows для сбора и анализа подробных событий WebView2, таких как запуски процессов и время навигации.

Вы можете записывать события поставщика Edge/WebView2 с помощью трассировки событий Для Windows (ETW); См. раздел Сбор трассировки трасс

Анализ трассировок в Windows Анализатор производительности для данных ЦП, диска и памяти.

Средства разработки Microsoft Edge

Используйте средства разработки Microsoft Edge для мониторинга содержимого и процессов WebView2 для выявления проблем, таких как высокая утечка ЦП или памяти.

Щелкните правой кнопкой мыши элемент управления WebView2 в приложении WebView2 и выберите пункт Проверить. Например, щелкните правой кнопкой мыши основное приложение Win32 и выберите пункт Проверить. DevTools откроется в отстыковке выделенного окна браузера.

В средствах разработки можно использовать такие средства, как средство "Память " и " Производительность ".

Средство повышения производительности в средствах разработки Edge

См. также:

Проверка с помощью средств разработчика Edge

Используйте edge://inspect, открыв вкладку Проверка с помощью инструментов разработчика Edge , чтобы отслеживать содержимое и процессы WebView2, чтобы выявить такие проблемы, как высокая утечка ЦП или памяти.

Проверка с помощью средств разработчика Edge

Дополнительные сведения о проверке процесса WebView2 с помощью см. в edge://inspectстатье Удаленная отладка классических приложений WebView2 WinUI 2 (UWP).

Диспетчер задач браузера

Используйте диспетчер задач браузера для мониторинга содержимого и процессов WebView2 для выявления проблем, таких как высокая утечка ЦП или памяти.

См. раздел Мониторинг использования памяти в режиме реального времени (диспетчер задач браузера).

Устранение неполадок рабочих процессов при проблемах с производительностью

При возникновении проблем с производительностью в приложении WebView2 используйте структурированный подход для устранения неполадок в соответствии со следующими стратегиями.

Тестирование с простым содержимым

Загрузите минимальную HTML-страницу.

  • Если производительность по-прежнему низкая с простым содержимым, изучите инициализацию среды выполнения или факторы ведущего приложения.

  • Если производительность при использовании простого содержимого выше, сосредоточьтесь на оптимизации веб-содержимого.

См. также:

Проверка версии среды выполнения WebView2

Убедитесь, что вы используете последнюю версию среды выполнения WebView2, а не устаревшую версию или резервную установку Edge. При необходимости обновите среду выполнения WebView2.

См. также:

Мониторинг использования памяти

Используйте диспетчер задач Windows для проверка памяти процессов WebView2.

Необычный рост может указывать на утечку — используйте записи WPR для дальнейшей отладки.

См. также:

Сравнение WebView2 с Microsoft Edge

WebView2 использует тот же основной браузер, что и Microsoft Edge. Проверьте ситуацию с помощью Microsoft Edge, а также WebView2, чтобы изолировать проблему.

См. также

  • Last updated on