Procedimientos recomendados de rendimiento para aplicaciones WebView2

Use las siguientes prácticas 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 de Windows habilita características web modernas. WebView2 usa la arquitectura multiproceso de Edge, por lo que cada control inicia varios procesos del motor del 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 tiempo de ejecución Evergreen

  • Siempre que sea posible, implementa tu aplicación con el tiempo de ejecución Evergreen WebView2. El tiempo de ejecución Evergreen se actualiza automáticamente para obtener las últimas mejoras de rendimiento y correcciones de seguridad. Mantén el tiempo de ejecución de WebView2 siempre perenne (es decir, actualizado) para preparar tu aplicación para el futuro. Al usar una versión corregida, se corre el riesgo de perderse las optimizaciones recientes.

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

  • Prueba tu aplicación con los canales de vista previa de WebView2 más recientes (Beta, Dev o Canary) para prepararte 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 tiempo de ejecución de WebView2.

Si las versiones de Microsoft Edge y WebView2 coinciden, y Microsoft Edge se está ejecutando, los archivos binarios de WebView2 necesarios ya están en memoria, mejorando el rendimiento del inicio.

Vea también:

Optimizar el rendimiento de inicio

Arranque en frío (lanzamiento en frío)

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

Para optimizar el inicio, use las siguientes prácticas recomendadas.

No use WebView2 para la interfaz de usuario inicial

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

  • Evita representar pantallas de presentación o cuadros de diálogo sencillos con WebView2, debido a los costes de inicio y a la contención de recursos. Inicialice WebView2 solo cuando muestre contenido web real.

Vea también:

Optimizar 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 por motivos de 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 no crear más controles WebView2 de los necesarios.

Por ejemplo, si navega entre varias páginas web, puede ser más rápido volver a usar un único 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 el explorador, el representador y la GPU. Por lo general, el uso de recursos crece a medida que se crean más instancias de WebView2, y cada instancia ejecuta su propio conjunto de procesos del explorador.

Una instancia de WebView2 usa memoria en función de la complejidad del contenido web y los procesos del explorador que crea. La ejecución de muchas instancias del control WebView2 puede agotar la memoria del sistema.

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

Compartir entornos WebView2

  • Para ahorrar memoria, use uno CoreWebView2Environment en todos los controles WebView2 de una aplicación, garantizando parámetros coherentes para compartir.

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

Vea también:

Uso compartido de procesos a nivel de aplicación

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

    Varias aplicaciones pueden compartir un proceso del 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 exponer objetos .NET en la web, tenga en cuenta lo que esos objetos contienen en la memoria. Se hace referencia a todo el objeto de forma eficaz siempre que el contexto del script continúe activo, lo que podría impedir la recopilación de elementos no utilizados de ese objeto en el lado de .NET.

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

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

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

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

Cuando la página que necesitaba el objeto haya desaparecido, llame CoreWebView2.RemoveHostObjectFromScript para liberar el gráfico de objetos. Por ejemplo, si sales de una página que estaba usando un objeto host, quita 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 los objetos WebView2, para evitar ciclos de referencia y pérdidas.

  • Evita los cierres que hacen referencia a WebView2; Use referencias débiles cuando sea necesario.

  • Llamada WebView2.Dispose() para liberar objetos WebView2 cuando ya no sean necesarios.

Vea también:

Usar API de administración de memoria

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

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

Optimizar el contenido web

Actualizar periódicamente WebView2

Rendimiento de CPU y representación

WebView2 descarga la representación de contenido web en el motor del 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 sin problemas.

Habilitar la aceleración de hardware

  • No deshabilite el uso de la GPU por 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

Simplificar el contenido web

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

  • Limitar JavaScript pesado.

  • Anule o limite las tareas.

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

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

  • Use Microsoft Edge DevTools para identificar cuellos de botella.

  • Usa la optimización web típica: evita el thrashing excesivo del diseño, donde un script alterna entre leer y escribir propiedades DOM, causando múltiples reflujos.

Vea también:

Reducir la comunicación innecesaria

  • Reducir 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 lo acompaña. Consulte Interoperabilidad de código nativo y web.

  • Envíe mensajes por lotes siempre que sea posible, ya que el paso frecuente de mensajes puede aumentar el uso de CPU.

Administrar prioridad de procesos

  • Si la aplicación tiene una carga de trabajo nativa pesada, asigne prioridades de subprocesos con cuidado para evitar que los subprocesos WebView2 se queden sin energía. WebView2 crea procesos de representación 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.

Las siguientes prácticas recomendadas se superponen con el desarrollo web general.

Usar almacenamiento en caché y trabajadores de servicio

WebView2 admite el almacenamiento en caché del explorador.

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

  • Sirva encabezados de caché adecuados, de modo que las solicitudes repetidas de recursos utilicen versiones en caché.

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

Vea también:

Compruebe los cuellos de botella de la red

Utilice la herramienta Red DevTools para identificar recursos lentos en WebView2; consulte Inspeccionar actividad de red.

Optimice o cargue de forma asíncrona scripts o API lentos de terceros, según sea necesario.

Reducir las cargas útiles iniciales

Para mejorar la velocidad percibida:

  • Mantenga ligera la carga útil inicial. Prefiere enviar HTML estático inicialmente, porque generalmente carga, analiza y representa más rápido que JavaScript. Tenga cuidado al usar inicialmente JavaScript junto con un marco de aplicación de una sola página; Dicho marco generalmente carga una gran cantidad de código al inicio, lo que puede retrasar la representación inicial del contenido web.

    HTML carga, analiza y representa muy rápido, más rápido que el tiempo que le habría tomado a JavaScript producir la misma interfaz de usuario. Con algunos marcos JS de aplicaciones de una sola página, 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 algo.

  • Aplazar componentes pesados.

  • Cargar imágenes o scripts de forma 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 ofrece varias opciones de comunicación de 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, tanto por el uso de memoria como por el tiempo, debido a la simplicidad y confiabilidad de los mensajes web.

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

    • API ricas y similares a objetos (métodos, propiedades, eventos) que desea exponer directamente a JavaScript.

    • 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.

    • Los flujos de datos grandes o binarios en los que la serialización repetida de cadenas en mensajes web se vuelve ineficaz.

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 y habladoras en comparación con un solo lote , WebMessageporque 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 del host, lo que reduce la portabilidad.

Vea también:

Optimizar la comunicación

Implemente la comunicación asíncrona 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 solucionar 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 un seguimiento de ETW) con Windows Performance Recorder para capturar y analizar eventos WebView2 detallados, como inicios WebView2.wprp de procesos e intervalos de navegación.

Puede grabar 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 el Analizador de rendimiento de Windows para obtener datos de CPU, disco y memoria.

Microsoft Edge DevTools

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

Haga clic con el botón secundario 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 de 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 las herramientas Memoria y Rendimiento :

Herramienta Rendimiento en Edge DevTools

Vea también:

Inspección con 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 e identificar problemas como pérdidas elevadas de CPU o memoria:

Inspección con herramientas de desarrollo de Edge

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

Administrador de tareas del explorador

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

Consulte Supervisar el uso de memoria en tiempo real (Administrador de tareas del explorador).

Solución de problemas de flujos de trabajo para problemas de rendimiento

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

Probar con contenido simple

Carga una página HTML mínima.

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

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

Vea también:

Comprobar la versión del entorno de ejecución de WebView2

Asegúrese de que está ejecutando el entorno de ejecución de WebView2 más reciente, no una versión obsoleta o una instalación de Edge de reserva. Actualiza el tiempo de ejecución de WebView2 según sea necesario.

Vea también:

Supervisar el uso de la memoria

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

Un crecimiento inusual puede indicar una fuga: use las grabaciones de WPR para depurarlo aún más.

Vea también:

Comparar 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

  • Se actualizó por última vez el