Partekatu bidez

Procedimientos recomendados de rendimiento para aplicaciones WebView2

Use los procedimientos siguientes para optimizar el tiempo de inicio, la memoria, la CPU y el uso de red de WebView2. Use estas herramientas y flujos de trabajo para solucionar problemas de rendimiento.

La inserción de Microsoft Edge WebView2 en aplicaciones windows permite características web modernas. WebView2 usa la arquitectura de varios procesos de Edge, por lo que cada control inicia varios procesos del motor de explorador que agregan memoria y sobrecarga de inicio.

Contenido detallado:

Identificar el tipo de cuello de botella de rendimiento

Observe los síntomas del rendimiento lento, para determinar si el problema es:

Uso del runtime de Evergreen

  • Siempre que sea posible, implemente la aplicación con Evergreen WebView2 Runtime. Evergreen Runtime se actualiza automáticamente para obtener las últimas mejoras de rendimiento y correcciones de seguridad. Mantenga el tiempo de ejecución de WebView2 siempre (es decir, actualizado) para que la aplicación esté a prueba de futuro. El uso de una versión fija corre el riesgo de que se pierdan las optimizaciones recientes.

  • Si debe usar un entorno de ejecución fijo por motivos de compatibilidad o sin conexión, actualícelo periódicamente después de probar nuevas compilaciones.

  • Pruebe la aplicación con los canales de versión preliminar de WebView2 más recientes (Beta, Desarrollo o Canary) para prepararse para los próximos cambios. Muchos problemas de rendimiento anteriores, como pérdidas de memoria y uso elevado de CPU, se han solucionado en versiones más recientes del entorno de ejecución de WebView2.

Si las versiones de Microsoft Edge y WebView2 coinciden y Microsoft Edge está en ejecución, los archivos binarios de WebView2 necesarios ya están en memoria, lo que mejora el rendimiento del inicio.

Vea también:

Optimización del rendimiento de inicio

Inicio en frío (lanzamiento en frío)

Un cuello de botella de rendimiento común es el momento de crear un control WebView2 y navegar a una página web por primera vez. En un inicio en frío, WebView2 debe poner en marcha sus procesos y cachés de disco, lo que puede introducir un retraso notable (que puede variar según la complejidad del hardware y el contenido).

Para optimizar el inicio, use los siguientes procedimientos recomendados.

No usar WebView2 para la interfaz de usuario inicial

  • Para representar pantallas de presentación o cuadros de diálogo sencillos, usa pantallas ligeras de XAML o Win32 en lugar de WebView2.

  • Evite representar pantallas de presentación o diálogos simples con WebView2, debido a los costos de inicio y la contención de recursos. Inicialice WebView2 solo cuando muestre contenido web real.

Vea también:

Optimización de la ubicación de la carpeta de datos de usuario (UDF)

  • Mantenga la UDF en la carpeta de datos de la aplicación local predeterminada para el rendimiento. Consulte Administrar carpetas de datos de usuario.

  • Evite unidades lentas o recursos compartidos de red; coloque los datos en un disco físico más rápido.

Evitar instancias redundantes de WebView2

Planee la interfaz de usuario para que no cree más controles WebView2 de los necesarios.

Por ejemplo, si navega entre varias páginas web, es posible que sea más rápido reutilizar una sola WebView2 y simplemente navegar a una nueva dirección URL, en lugar de destruir y volver a crear un control WebView2.

Vea también:

Uso de memoria y administración de procesos

Cada control WebView2 crea su propio conjunto de procesos, como explorador, representador y GPU. Por lo general, el uso de recursos aumenta a medida que se crean más instancias de WebView2, con cada instancia que ejecuta su propio conjunto de procesos del explorador.

Una instancia de WebView2 usa memoria en función de la complejidad del contenido web y el explorador procesa su creación. La ejecución de muchas instancias del control WebView2 puede afectar a la memoria del sistema.

A continuación se muestran los procedimientos recomendados para administrar y reducir la superficie de memoria.

Uso compartido de entornos WebView2

  • Para guardar memoria, use uno CoreWebView2Environment en todos los controles WebView2 de una aplicación, lo que garantiza parámetros coherentes para el uso compartido.

  • Reutilice el mismo entorno en interfaces con pestañas, en lugar de crear varios entornos.

Vea también:

Uso compartido de procesos de nivel de aplicación

  • Si es factible, use el uso compartido de procesos de nivel de aplicación.

    Varias aplicaciones pueden compartir un proceso de explorador mediante la carpeta de datos de usuario idéntica y CoreWebView2EnvironmentOptions. Esto reduce el uso de memoria, pero requiere una administración cuidadosa de los perfiles y pruebas exhaustivas, debido a posibles interferencias entre aplicaciones.

    Tenga en cuenta que al compartir una carpeta de datos de usuario (UDF), los datos subyacentes (como cookies, cachés y bases de datos) se comparten entre diferentes aplicaciones.

Vea también:

Evitar objetos host de ámbito grande

Si usa AddHostObjectToScript para exponer objetos .NET a la web, tenga en cuenta lo que esos objetos contienen en la memoria. Se hace referencia efectivamente a todo el objeto siempre y cuando el contexto del script continúe en curso, lo que podría impedir la recolección de elementos no utilizados de ese objeto en .NET.

No exponga un gráfico de objetos muy grande, si solo se necesita una pequeña parte para el scripting. En lugar de pasar modelos de aplicación completos, es preferible crear objetos host estrechos específicos del propósito. Por ejemplo:

  • Exponga solo las operaciones y los datos que realmente necesita la página. Por ejemplo, exponga un FileService objeto, en lugar de todo AppContextel objeto .

  • Encapsula objetos complejos detrás de fachadas pequeñas para evitar exponer involuntariamente jerarquías de objetos profundos.

  • En el caso de las colecciones, proporcione resultados filtrados o paginados en lugar de exponer la estructura de datos completa.

Cuando la página que necesitaba el objeto ha desaparecido, llame CoreWebView2.RemoveHostObjectFromScript a para liberar el gráfico de objetos. Por ejemplo, si se aleja de una página que usaba un objeto host, quite ese objeto para evitar mantenerlo activo en segundo plano.

Vea también:

Evitar pérdidas de memoria

  • Quite los controladores de eventos nativos antes de eliminar objetos WebView2 para evitar ciclos de referencia y pérdidas.

  • Evite cierres que hagan referencia fuerte a WebView2; usar referencias débiles cuando sea necesario.

  • Llame WebView2.Dispose() a para liberar objetos WebView2 cuando ya no se necesiten.

Vea también:

Uso de api de administración de memoria

  • Establezca MemoryUsageTargetLevel = CoreWebView2MemoryUsageTargetLevel.Low en WebViews inactivos para reducir el uso de memoria; esto puede pedir al motor del explorador que quite los datos almacenados en caché o que intercambie memoria en el disco. Cuando la instancia de WebView2 vuelva a estar activa, restaure el nivel de destino en Normal, para obtener un rendimiento completo. Consulte Destino de uso de memoria en Información general de las API de WebView2.

  • Si la instancia de WebView2 no se usará durante un tiempo, llame CoreWebView2.TrySuspendAsync() a para suspender el proceso del representador, lo que pausa los scripts y reduce aún más el uso de recursos. Reanude con Resume() cuando sea necesario. Estas Try operaciones son el mejor esfuerzo. Consulte Rendimiento y depuración en Información general de las API de WebView2.

Optimización del contenido web

Actualizar periódicamente WebView2

Rendimiento de cpu y representación

WebView2 descarga la representación de contenido web en el motor de explorador que usa Edge, por lo que las características de rendimiento son como ejecutar un sitio en Edge.

Las siguientes prácticas garantizan un uso eficaz de la CPU y una representación fluida.

Habilitación de la aceleración de hardware

  • No deshabilite el uso de la GPU mediante WebView2 para la representación (a través de la disable-gpu marca), excepto cuando esté solucionando problemas.

    De forma predeterminada, WebView2 usa la GPU para la representación. El uso de la GPU por WebView2 es fundamental para el rendimiento. Se deben asignar controladores de GPU y búferes adicionales, lo que requiere memoria adicional.

Vea también

Simplificación del contenido web

Optimice las páginas mediante las siguientes técnicas:

  • Limite el uso intensivo de JavaScript.

  • Tareas de desaplicación o limitación.

  • Use CSS (en lugar de JavaScript) para las animaciones.

  • Divida scripts largos para mantener la capacidad de respuesta de la interfaz de usuario.

  • Use Microsoft Edge DevTools para identificar cuellos de botella.

  • Use la optimización web típica: evite la redistribución excesiva del diseño, donde un script alterna entre leer y escribir propiedades DOM, lo que provoca varios reflujos.

Vea también:

Reducir la comunicación innecesaria

  • Reduzca la comunicación innecesaria entre la aplicación host y el contenido web hospedado en WebView2. Esto evita una comunicación excesiva entre procesos, junto con la sobrecarga que acompaña. Consulte Interoperabilidad de código nativo y web.

  • Los mensajes por lotes siempre que sea posible, ya que el paso frecuente de mensajes puede aumentar el uso de la CPU.

Administración de la prioridad del proceso

  • Si la aplicación tiene una carga de trabajo nativa pesada, asigne cuidadosamente las prioridades de subprocesos para evitar que los subprocesos WebView2 se agoten. WebView2 crea procesos de representador independientes.

Vea también:

Probar escenarios reales

  • Pruebe el contenido real en el hardware de destino con Microsoft Edge DevTools para buscar y optimizar los problemas de rendimiento.

Vea también:

Rendimiento de red y carga

La latencia de red y el ancho de banda limitado pueden provocar problemas de rendimiento percibidos por el usuario, especialmente al cargar contenido web en un control WebView2.

Los siguientes procedimientos recomendados se superponen con el desarrollo web general.

Uso del almacenamiento en caché y los trabajos de servicio

WebView2 admite el almacenamiento en caché del explorador.

  • Use el almacenamiento en caché y los trabajadores de servicio.

  • Sirva encabezados de caché adecuados para que las solicitudes de recursos repetidas usen versiones almacenadas en caché.

  • Considere la posibilidad de almacenar en caché previamente archivos estáticos mediante un trabajo de servicio, para el acceso sin conexión; pero supervise el tamaño de la memoria caché.

Vea también:

Comprobación de cuellos de botella de red

Use la herramienta DevTools Network para identificar recursos lentos en WebView2; consulte Inspección de la actividad de red.

Optimice o cargue asincrónicamente scripts o API de terceros lentos, según sea necesario.

Reducción de cargas útiles iniciales

Para mejorar la velocidad percibida:

  • Mantenga la luz de carga inicial. Prefiere enviar HTML estático inicialmente, ya que normalmente carga, analiza y se representa más rápido que JavaScript. Tenga cuidado sobre el uso inicial de JavaScript junto con un marco de aplicación de página única; este marco normalmente carga una gran cantidad de código en el inicio, lo que puede retrasar la representación inicial del contenido web.

    HTML carga, analiza y se representa muy rápido, más rápido que el tiempo que habría tardado JavaScript en generar la misma interfaz de usuario. Con algunos marcos js de aplicación de página única, incluso si el HTML inicial del marco es pequeño, todo el código del marco debe descargarse, analizarse y ejecutarse, antes de que se pueda mostrar nada.

  • Aplazar componentes pesados.

  • Imágenes o scripts de carga diferida después de que aparezca la interfaz de usuario inicial.

Vea también:

Comunicación entre el control WebView2 y la aplicación host

Elegir el canal de comunicación adecuado

WebView2 proporciona varias opciones de comunicación web a host y de host a web.

  • Intente usar mensajes web, en lugar de objetos host. Los mensajes web tienden a ser más rápidos que los objetos host, debido tanto al uso de memoria como al tiempo, debido a la simplicidad y confiabilidad de los mensajes web.

  • Use objetos host solo cuando necesite funcionalidades que los mensajes web no puedan expresar fácilmente, como:

    • Api enriquecidas similares a objetos (métodos, propiedades, eventos) que desea exponer directamente a JavaScript.

    • Las interacciones con estado en las que mantener el contexto del lado host es más sencillo que pasar mensajes estructurados de un lado a otro.

    • Flujos de datos grandes o binarios donde las cargas de serialización de cadenas repetidas en mensajes web se vuelven ineficaces.

Los objetos host tienen los siguientes inconvenientes:

  • Los objetos host requieren la serialización COM, que puede introducir inestabilidad si el gráfico de objetos cambia o no se serializa correctamente.

  • Los objetos host suelen ser más lentos para las llamadas frecuentes de chatty en comparación con un único acceso por lotes WebMessage, ya que cada método o acceso a la propiedad cruza el límite individualmente.

  • Los objetos host crean un acoplamiento más estrecho entre el código web y el código host, lo que reduce la portabilidad.

Vea también:

Optimización de la comunicación

Implemente la comunicación asincrónica por lotes para minimizar la comunicación IPC y reducir la copia de datos.

Vea también:

Herramientas de telemetría y generación de perfiles

La recopilación de datos es clave para identificar y corregir problemas de rendimiento.

Las siguientes son herramientas y técnicas de telemetría para WebView2.

Seguimiento etw de WebView2

Use el perfil de Microsoft (recopilación de WebView2.wprpun seguimiento ETW) con Windows Performance Recorder para capturar y analizar eventos WebView2 detallados, como inicios de procesos y tiempos de navegación.

Puede registrar eventos de proveedor de Edge/WebView2 mediante el seguimiento de eventos para Windows (ETW); consulte Recopilación de un seguimiento etw.

Analice los seguimientos en Windows Analizador de rendimiento para obtener datos de CPU, disco y memoria.

Microsoft Edge DevTools

Use Microsoft Edge DevTools para supervisar el contenido y los procesos de WebView2, con el fin de identificar problemas como pérdidas elevadas de CPU o memoria.

Haga clic con el botón derecho en un control WebView2 en una aplicación WebView2 y, a continuación, seleccione Inspeccionar. Por ejemplo, haga clic con el botón derecho en la aplicación principal de ejemplo win32 y, a continuación, haga clic en Inspeccionar. DevTools se abre en una ventana del explorador dedicada desacoplada.

En DevTools, puede usar herramientas como la herramienta Memoria y la herramienta Rendimiento :

Herramienta de rendimiento en Edge DevTools

Vea también:

Inspección con las herramientas de desarrollo de Edge

Use edge://inspect, que abre la pestaña Inspeccionar con herramientas de desarrollo de Edge , para supervisar el contenido y los procesos de WebView2, con el fin de identificar problemas como pérdidas elevadas de CPU o memoria:

Inspección con las herramientas de desarrollo de Edge

Para obtener más información sobre cómo inspeccionar un proceso WebView2 mediante edge://inspect, consulta Depuración remota de aplicaciones WebView2 WinUI 2 (UWP) de escritorio remoto.

Administrador de tareas del explorador

Use el Administrador de tareas del explorador para supervisar el contenido y los procesos de WebView2, con el fin de identificar problemas como pérdidas elevadas de CPU o memoria.

Consulte Supervisión del uso de memoria en tiempo real (Administrador de tareas del explorador).

Solución de problemas de rendimiento en flujos de trabajo

Cuando surjan problemas de rendimiento en una aplicación WebView2, use un enfoque estructurado para solucionar problemas, según las estrategias siguientes.

Prueba con contenido simple

Cargue una página HTML mínima.

  • Si el rendimiento sigue siendo lento con contenido simple, investigue los factores de inicialización en tiempo de ejecución o de aplicación host.

  • Si el rendimiento es más rápido con contenido simple, céntrese en optimizar el contenido web.

Vea también:

Comprobación de la versión en tiempo de ejecución de WebView2

Asegúrese de que ejecuta la versión más reciente de WebView2 Runtime, no una versión obsoleta o una instalación perimetral de reserva. Actualice el entorno de ejecución de WebView2 según sea necesario.

Vea también:

Supervisión del uso de memoria

Use el Administrador de tareas de Windows para comprobar la memoria de proceso de WebView2.

El crecimiento inusual puede indicar una fuga: use las grabaciones WPR para depurar esto aún más.

Vea también:

Comparación de WebView2 con Microsoft Edge

WebView2 usa el mismo motor de explorador principal que Microsoft Edge. Valide el caso con Microsoft Edge, así como con WebView2, para aislar el problema.

Vea también

  • Last updated on