Compartilhar via

Melhores práticas de desempenho para aplicações WebView2

Utilize as seguintes práticas para otimizar o tempo de arranque, memória, CPU e utilização de rede do WebView2. Utilize estas ferramentas e fluxos de trabalho para resolver problemas de desempenho.

Incorporar o Microsoft Edge WebView2 em aplicações do Windows permite funcionalidades Web modernas. O WebView2 utiliza a arquitetura multiprocesso do Edge, pelo que cada controlo inicia vários processos de motor do browser que adicionam memória e sobrecarga de arranque.

Conteúdo detalhado:

Identificar o tipo de estrangulamento de desempenho

Observe os sintomas do desempenho lento, para determinar se o problema é:

Utilizar o Evergreen Runtime

  • Sempre que possível, implemente a sua aplicação com o Runtime Evergreen WebView2. O Evergreen Runtime é atualizado automaticamente para obter as mais recentes melhorias de desempenho e correções de segurança. Mantenha o WebView2 Runtime sempre verde (ou seja, atualizado) para a sua aplicação à prova de futuro. A utilização de uma versão fixa arrisca-se a perder nas otimizações recentes.

  • Se tiver de utilizar um runtime fixo por motivos offline ou de compatibilidade, atualize-o regularmente após testar novas compilações.

  • Teste a sua aplicação com os canais de pré-visualização webView2 mais recentes (Beta, Dev ou Canary) para se preparar para as próximas alterações. Muitos problemas de desempenho anteriores, como fugas de memória e utilização elevada da CPU, foram resolvidos em versões mais recentes do Runtime webView2.

Se as versões do Microsoft Edge e webView2 corresponderem e o Microsoft Edge estiver em execução, os binários webView2 necessários já estão na memória, o que melhora o desempenho do lançamento.

Veja também:

Otimizar o desempenho do arranque

Início a frio (iniciação a frio)

Um estrangulamento de desempenho comum é o momento de criar um controlo WebView2 e navegar pela primeira vez para uma página Web. Numa iniciação a frio, o WebView2 tem de aumentar os seus processos e caches de disco, o que pode introduzir um atraso percetível (que pode variar consoante a complexidade do hardware e do conteúdo).

Para otimizar o arranque, utilize as seguintes melhores práticas.

Não utilizar o WebView2 para a IU inicial

  • Para compor ecrãs respingos ou caixas de diálogo simples, utilize ecrãs XAML ou Win32 leves em vez de WebView2.

  • Evite compor ecrãs esporádeis ou caixas de diálogo simples com o WebView2, devido aos custos de arranque e à contenção de recursos. Inicialize o WebView2 apenas ao apresentar conteúdo Web real.

Veja também:

Otimizar a localização da Pasta de Dados do Utilizador (UDF)

  • Mantenha o UDF na pasta de dados da aplicação local predefinida, para desempenho. Veja Gerir pastas de dados de utilizador.

  • Evite unidades lentas ou partilhas de rede; coloque os dados num disco físico mais rápido.

Evitar instâncias do WebView2 redundantes

Planeie a sua IU para que não crie mais controlos WebView2 do que o necessário.

Por exemplo, se navegar entre múltiplas páginas Web, poderá ser mais rápido reutilizar um único WebView2 e simplesmente navegá-lo para um novo URL, em vez de destruir e recriar um controlo WebView2.

Veja também:

Utilização da memória e gestão de processos

Cada controlo WebView2 cria o seu próprio conjunto de processos, como o browser, o compositor e a GPU. Geralmente, a utilização de recursos aumenta à medida que são criadas mais instâncias do WebView2, com cada instância a executar o seu próprio conjunto de processos do browser.

Uma instância do WebView2 utiliza memória com base na complexidade do conteúdo Web e nos processos do browser que cria. A execução de muitas instâncias do controlo WebView2 pode sobrecarregar a memória do sistema.

Seguem-se as melhores práticas para gerir e reduzir a quantidade de memória.

Partilhar ambientes WebView2

  • Para guardar memória, utilize um CoreWebView2Environment em todos os controlos WebView2 numa aplicação, garantindo parâmetros consistentes para a partilha.

  • Reutilize o mesmo ambiente em interfaces com separadores, em vez de criar vários ambientes.

Veja também:

Utilizar a partilha de processos ao nível da aplicação

  • Se for viável, utilize a partilha de processos ao nível da aplicação.

    Várias aplicações podem partilhar um processo de browser com a pasta de dados de utilizador idêntica e CoreWebView2EnvironmentOptions. Isto reduz a utilização da memória, mas requer uma gestão cuidadosa dos perfis e testes minuciosos, devido a possíveis interferências entre aplicações.

    Tenha em atenção que, ao partilhar uma Pasta de Dados de Utilizador (UDF), os dados subjacentes (como cookies, caches e bases de dados) estão a ser partilhados entre diferentes aplicações.

Veja também:

Evitar objetos de anfitrião de âmbito grande

Se utilizar AddHostObjectToScript para expor objetos .NET na Web, tenha em atenção o que esses objetos contêm na memória. Todo o objeto é efetivamente referenciado desde que o contexto do script continue ativo, o que pode impedir a libertação da memória desse objeto no lado do .NET.

Não exponha um grafo de objeto muito grande, se for necessária apenas uma pequena parte para scripting. Prefere criar objetos anfitriões estreitos e específicos para fins, em vez de transmitir modelos de aplicações completos. Por exemplo:

  • Expor apenas as operações e os dados de que a página realmente precisa. Por exemplo, exponha um FileService objeto, em vez de todo AppContexto .

  • Moldar objetos complexos atrás de pequenas fachadas para evitar expor involuntariamente hierarquias de objetos profundos.

  • Para coleções, forneça resultados filtrados ou paginados em vez de expor a estrutura de dados completa.

Quando a página que precisava do objeto tiver desaparecido, chame CoreWebView2.RemoveHostObjectFromScript para libertar o grafo de objeto. Por exemplo, se navegar para fora de uma página que estava a utilizar um objeto anfitrião, remova esse objeto para evitar mantê-lo vivo nos bastidores.

Veja também:

Impedir fugas de memória

  • Remova os processadores de eventos nativos antes de eliminar objetos WebView2, para evitar ciclos de referência e fugas.

  • Evite encerramentos que referenciem fortemente o WebView2; utilize referências fracas quando necessário.

  • Chame WebView2.Dispose() para lançar objetos WebView2 quando já não forem necessários.

Veja também:

Utilizar APIs de gestão de memória

  • Definido MemoryUsageTargetLevel = CoreWebView2MemoryUsageTargetLevel.Low em WebViews inativos para reduzir a utilização da memória, o que poderá levar o motor do browser a remover dados em cache ou a trocar memória para o disco. Quando a instância do WebView2 estiver novamente ativa, restaure o nível de destino para Normal, para um desempenho total. Veja Destino de utilização da memória em Descrição geral das APIs webView2.

  • Se a instância do WebView2 não for utilizada durante algum tempo, chame CoreWebView2.TrySuspendAsync() para suspender o processo de composição, o que coloca os scripts em pausa e diminui ainda mais a utilização de recursos. Retomar com Resume() quando necessário. Estas Try operações são o melhor esforço. Veja Performance and debugging in Overview of WebView2 APIs (Desempenho e depuração) em Overview of WebView2 APIs (Descrição Geral das APIs webView2).

Otimizar conteúdo Web

Atualizar periodicamente o WebView2

Desempenho da CPU e da composição

O WebView2 descarrega a composição de conteúdo Web para o motor do browser que o Edge utiliza, pelo que as características de desempenho são como executar um site no Edge.

As seguintes práticas garantem uma utilização eficiente da CPU e uma composição suave.

Ativar aceleração de hardware

  • Não desative a utilização da GPU por WebView2, para composição (através do disable-gpu sinalizador), exceto quando estiver a resolver problemas.

    Por predefinição, o WebView2 utiliza a GPU para composição. A utilização da GPU por WebView2 é fundamental para o desempenho. Os controladores de GPU e as memórias intermédias adicionais têm de ser alocados, o que requer memória adicional.

Confira também

Simplificar conteúdo Web

Otimize as páginas com as seguintes técnicas:

  • Limitar JavaScript pesado.

  • Tarefas de debounce ou limitação.

  • Utilize CSS (em vez de JavaScript) para animações.

  • Divida scripts longos para manter a IU reativa.

  • Utilize o Microsoft Edge DevTools para identificar estrangulamentos.

  • Utilize a otimização Web típica: evite a degradação excessiva do esquema, em que um script alterna entre ler e escrever propriedades DOM, causando vários fluxos.

Veja também:

Reduzir a comunicação desnecessária

  • Reduza a comunicação desnecessária entre a aplicação anfitriã e o conteúdo Web alojado no WebView2. Isto evita uma comunicação entre processos excessiva, juntamente com a sobrecarga que o acompanha. Veja Interop of native and web code (Interop de código nativo e Web).

  • Mensagens em lote sempre que possível, porque a transmissão frequente de mensagens pode aumentar a utilização da CPU.

Gerir a prioridade do processo

  • Se a aplicação tiver uma carga de trabalho nativa pesada, atribua cuidadosamente prioridades de threads para evitar a fome de threads WebView2. O WebView2 cria processos de composição separados.

Veja também:

Testar cenários reais

  • Teste o conteúdo real no hardware de destino, utilizando o Microsoft Edge DevTools para encontrar e otimizar problemas de desempenho.

Veja também:

Desempenho de rede e carregamento

A latência de rede e a largura de banda limitada podem causar problemas de desempenho percebidos pelo utilizador, especialmente ao carregar conteúdo Web num controlo WebView2.

As seguintes melhores práticas sobrepõem-se ao desenvolvimento Web geral.

Utilizar a colocação em cache e as funções de trabalho de serviço

O WebView2 suporta a colocação em cache do browser.

  • Utilize a colocação em cache e as funções de trabalho de serviço.

  • Sirva cabeçalhos de cache adequados, para que os pedidos de recursos repetidos utilizem versões em cache.

  • Considere colocar ficheiros estáticos em pré-colocação em cache através de uma função de trabalho de serviço, para acesso offline; mas monitorize o tamanho da cache.

Veja também:

Verificar estrangulamentos de rede

Utilize a ferramenta de Rede DevTools para identificar recursos lentos no WebView2; veja Inspecionar a atividade de rede.

Otimize ou carregue assíncronamente scripts ou APIs lentos de terceiros, conforme necessário.

Reduzir payloads iniciais

Para melhorar a velocidade percebida:

  • Mantenha a luz de payload inicial. Prefere enviar HTML estático inicialmente, porque normalmente carrega, analisa e compõe mais rapidamente do que o JavaScript. Tenha cuidado ao utilizar inicialmente o JavaScript juntamente com uma arquitetura de aplicação de página única; Normalmente, uma arquitetura deste tipo carrega muito código no arranque, o que pode atrasar a composição inicial do conteúdo Web.

    O HTML carrega, analisa e compõe muito rapidamente— mais rápido do que o tempo que teria levado o JavaScript para produzir a mesma IU. Com algumas arquiteturas JS de aplicação de página única, mesmo que o HTML inicial da arquitetura seja pequeno, todo o código de estrutura tem de ser transferido, analisado e executado, antes que tudo possa ser apresentado.

  • Diferir componentes pesados.

  • Carregar imagens ou scripts em diferido após a IU inicial aparecer.

Veja também:

Comunicação entre o controlo WebView2 e a aplicação anfitriã

Escolher o canal de comunicação certo

O WebView2 fornece várias opções de comunicação Web para anfitrião e anfitrião para a Web.

  • Tente utilizar mensagens Web, em vez de alojar objetos. As mensagens Web tendem a ser mais rápidas do que os objetos anfitriões, devido à utilização da memória e ao tempo, devido à simplicidade e fiabilidade das mensagens Web.

  • Utilize objetos de anfitrião apenas quando precisar de capacidades que as mensagens Web não conseguem expressar facilmente, tais como:

    • APIs avançadas semelhantes a objetos (métodos, propriedades, eventos) que pretende expor diretamente ao JavaScript.

    • Interações com estado em que manter o contexto do lado do anfitrião é mais simples do que transmitir mensagens estruturadas para trás e para a frente.

    • Fluxos de dados grandes ou binários em que a serialização repetida de cadeias de carateres de payloads em mensagens Web se torna ineficiente.

Os objetos anfitriões têm as seguintes desvantagens:

  • Os objetos anfitriões requerem a triagem COM, o que pode introduzir instabilidade se o grafo do objeto mudar ou não for organizado corretamente.

  • Geralmente, os objetos anfitriões são mais lentos para chamadas chaty e frequentes em comparação com um único lote, WebMessageporque cada método ou acesso de propriedade cruza o limite individualmente.

  • Os objetos anfitriões criam um acoplamento mais apertado entre a Web e o código do anfitrião, reduzindo a portabilidade.

Veja também:

Otimizar a comunicação

Implemente comunicações assíncronas e em lotes, para minimizar a comunicação IPC e reduzir a cópia de dados.

Veja também:

Ferramentas de telemetria e criação de perfis

A recolha de dados é fundamental para identificar e corrigir problemas de desempenho.

Seguem-se ferramentas e técnicas de telemetria para WebView2.

Rastreio de ETW webView2

Utilize o perfil da Microsoft (Gathering an ETW Trace) com o Gravador de Desempenho do WebView2.wprp Windows para capturar e analisar eventos WebView2 detalhados, como iniciações de processos e temporizações de navegação.

Pode gravar eventos de fornecedor do Edge/WebView2 com o Rastreio de Eventos para Windows (ETW); veja Recolher um Rastreio ETW.

Analise rastreios no Windows Performance Analyzer para dados de CPU, disco e memória.

Microsoft Edge DevTools

Utilize o Microsoft Edge DevTools para monitorizar o conteúdo e os processos do WebView2, para identificar problemas como fugas elevadas de CPU ou memória.

Clique com o botão direito do rato num controlo WebView2 numa aplicação WebView2 e, em seguida, selecione Inspecionar. Por exemplo, clique com o botão direito do rato na aplicação principal de exemplo Win32 e, em seguida, clique em Inspecionar. O DevTools é aberto numa janela de browser dedicada e desancorada.

No DevTools, pode utilizar ferramentas como a ferramenta Memória e a Ferramenta de desempenho :

Ferramenta de desempenho no Edge DevTools

Veja também:

Inspecionar com as Ferramentas de Programação do Edge

Utilize edge://inspecto , que abre o separador Inspecionar com as Ferramentas de Programação do Edge , para monitorizar os conteúdos e processos do WebView2, para identificar problemas como cpu elevada ou fugas de memória:

Inspecionar com as Ferramentas de Programação do Edge

Para saber mais sobre como inspecionar um processo WebView2 com edge://inspecto , consulte Depuração remota de aplicações WebView2 WinUI 2 (UWP).

Gestor de Tarefas do Browser

Utilize o Gestor de Tarefas do Browser para monitorizar o conteúdo e os processos do WebView2, para identificar problemas como fugas elevadas de CPU ou memória.

Veja Monitorizar a utilização da memória em tempo real (Gestor de Tarefas do Browser).

Resolução de problemas de fluxos de trabalho para problemas de desempenho

Quando surgirem problemas de desempenho numa aplicação WebView2, utilize uma abordagem estruturada para resolver problemas, de acordo com as seguintes estratégias.

Testar com conteúdo simples

Carregar uma página HTML mínima.

  • Se o desempenho ainda estiver lento com conteúdo simples, investigue a inicialização do runtime ou os fatores da aplicação anfitriã.

  • Se o desempenho for mais rápido com conteúdo simples, concentre-se na otimização do conteúdo Web.

Veja também:

Verificar a versão do Runtime webView2

Certifique-se de que está a executar o Runtime WebView2 mais recente, não uma versão desatualizada ou uma instalação do Edge de contingência. Atualize o Runtime webView2 conforme necessário.

Veja também:

Monitorizar a utilização da memória

Utilize o Gestor de Tarefas do Windows para marcar memória do processo WebView2.

Um crescimento invulgar pode indicar uma fuga— utilize gravações WPR para depurar ainda mais esta situação.

Veja também:

Comparar o WebView2 com o Microsoft Edge

O WebView2 utiliza o mesmo motor de browser principal que o Microsoft Edge. Valide o caso com o Microsoft Edge, bem como com o WebView2, para isolar o problema.

Confira também

  • Last updated on