Ejemplo de ciclo de vida de WebEngine

WebEngine Lifecycle Example demuestra cómo pueden utilizarse las propiedades lifecycleState y recommendedState de WebEngineView para reducir el uso de CPU y memoria de las pestañas de fondo en un navegador con pestañas.

Para una visión general de la función de ciclo de vida, ver API de Ciclo de Vida de Página.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para obtener más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Elementos de interfaz de usuario del ejemplo

El ejemplo utiliza Qt Quick Controls 2 para implementar un navegador tradicional con pestañas en el estilo Material (variante oscura). La ventana principal de la aplicación (WebBrowser.qml) se divide en una barra de cabecera en la parte superior y un área de visualización principal que ocupa el resto de la ventana. La cabecera contiene la barra de pestañas (WebTabBar.qml) con un botón por pestaña (WebTabButton.qml). El área principal consiste en una pila de pestañas (WebTabStack.qml y WebTab.qml). Cada pestaña tiene a su vez una barra de herramientas en la parte superior y un WebEngineView para mostrar páginas web. Por último, la ventana principal también tiene un Drawer para cambiar la configuración. El cajón puede abrirse pulsando el botón "⋮" de la barra de herramientas.

Estados del ciclo de vida en el ejemplo

El ejemplo implementa dos formas de cambiar el estado del ciclo de vida: manual y automática. La forma manual utiliza la propiedad lifecycleState directamente para cambiar el estado del ciclo de vida de la vista web, mientras que la forma automática se basa en un temporizador y también tiene en cuenta la propiedad recommendedState.

Los títulos de las pestañas de la barra de pestañas están codificados por colores: las pestañas congeladas se muestran en azul y las descartadas en rojo.

Control manual del ciclo de vida

El control manual se proporciona mediante menús contextuales en los botones de la barra de pestañas (WebTabButton.qml). El menú tiene tres botones de opción, uno para cada estado del ciclo de vida, con el estado actual marcado. Algunos botones pueden estar desactivados, bien porque representan transiciones de estado ilegales (por ejemplo, una vista Discarded no puede pasar directamente al estado Frozen ), bien porque no se cumplen otras condiciones previas (por ejemplo, una vista visible sólo puede estar en el estado Active ).

Control automático del ciclo de vida

El control automático se implementa con un Timer en el componente WebTab (WebTab.qml). El temporizador se inicia siempre que el lifecycleState de la vista web no coincide con su recommendedState. Una vez que el temporizador se dispara, el estado del ciclo de vida de la vista se establece en el estado recomendado.

El retardo se utiliza para evitar cambiar el estado del ciclo de vida demasiado rápido cuando el usuario cambia de pestaña. Los retardos de congelación y descarte pueden cambiarse en el cajón de ajustes al que se accede a través del botón "⋮" de la barra de herramientas.

Se trata de un algoritmo bastante sencillo para el control automático del ciclo de vida, aunque también podrían concebirse y aplicarse algoritmos más sofisticados a partir de la propiedad lifecycleState. Por ejemplo, el navegador Chromium utiliza experimentalmente una red neuronal profunda preentrenada para predecir el tiempo de activación de la siguiente pestaña por parte del usuario, clasificando esencialmente las pestañas en función de su interés para el usuario. La implementación de un algoritmo de este tipo se deja por ahora como ejercicio para el lector.

Proyecto de ejemplo @ code.qt.io