Exemple de cycle de vie de WebEngine

WebEngine L'exemple de cycle de vie montre comment les propriétés lifecycleState et recommendedState de WebEngineView peuvent être utilisées pour réduire l'utilisation du processeur et de la mémoire des onglets d'arrière-plan dans un navigateur à onglets.

Pour une vue d'ensemble de la fonctionnalité de cycle de vie, voir API de cycle de vie des pages.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Éléments de l'interface utilisateur de l'exemple

L'exemple utilise Qt Quick Controls 2 pour mettre en œuvre un navigateur traditionnel à onglets dans le style Material (variante sombre). La fenêtre principale de l'application (WebBrowser.qml) est divisée en une barre d'en-tête en haut et une zone de visualisation principale remplissant le reste de la fenêtre. L'en-tête contient la barre d'onglets (WebTabBar.qml) avec un bouton par onglet (WebTabButton.qml). La zone principale est constituée d'une pile d'onglets (WebTabStack.qml et WebTab.qml). Chaque onglet dispose à son tour d'une barre d'outils en haut et d'une page WebEngineView pour l'affichage des pages web. Enfin, la fenêtre principale comporte également un Drawer pour modifier les paramètres. Le tiroir peut être ouvert en cliquant sur le bouton "⋮" de la barre d'outils.

États du cycle de vie dans l'exemple

L'exemple met en œuvre deux façons de modifier l'état du cycle de vie : manuelle et automatique. La méthode manuelle utilise directement la propriété lifecycleState pour modifier l'état du cycle de vie de la vue web, tandis que la méthode automatique est basée sur un minuteur et prend également en compte la propriété recommendedState.

Les titres des onglets dans la barre d'onglets sont codés par couleur, les onglets gelés étant indiqués en bleu et les onglets supprimés en rouge.

Contrôle manuel du cycle de vie

Le contrôle manuel est assuré par des menus contextuels sur les boutons de la barre d'onglets (WebTabButton.qml). Le menu comporte trois boutons radio, un pour chaque état du cycle de vie, l'état actuel étant coché. Certains boutons peuvent être désactivés, soit parce qu'ils représentent des transitions d'état illégales (par exemple, une vue Discarded ne peut pas passer directement à l'état Frozen ), soit parce que d'autres conditions préalables ne sont pas remplies (par exemple, une vue visible ne peut être que dans l'état Active ).

Contrôle automatique du cycle de vie

Le contrôle automatique est mis en œuvre à l'aide d'un Timer dans le composant WebTab (WebTab.qml). La minuterie est déclenchée chaque fois que l'état lifecycleState de la vue web ne correspond pas à l'état recommendedState. Une fois la minuterie déclenchée, l'état du cycle de vie de la vue est défini sur l'état recommandé.

Le délai est utilisé pour éviter de modifier trop rapidement l'état du cycle de vie lorsque l'utilisateur passe d'un onglet à l'autre. Les délais de gel et d'élimination peuvent être modifiés dans le tiroir des paramètres accessible par le bouton "⋮" de la barre d'outils.

Il s'agit d'un algorithme assez simple pour le contrôle automatique du cycle de vie, mais des algorithmes plus sophistiqués pourraient également être conçus et mis en œuvre sur la base de la propriété lifecycleState. Par exemple, le navigateur Chromium utilise expérimentalement un réseau neuronal profond pré-entraîné pour prédire le moment de l'activation du prochain onglet par l'utilisateur, classant essentiellement les onglets en fonction de leur intérêt pour l'utilisateur. L'implémentation d'un tel algorithme est laissée à l'appréciation du lecteur pour l'instant.

Exemple de projet @ code.qt.io