Vous découvrirez comment les composants de RenderingNG sont configurés et comment le pipeline de rendu les traverse.
En commençant par le niveau le plus élevé, les tâches de rendu sont les suivantes:
- Affichez le contenu en pixels à l'écran.
- Animez les effets visuels sur les contenus d'un état à un autre.
- Défilement en réponse à une entrée.
- Acheminez efficacement les entrées vers les bons endroits afin que les scripts de développement et les autres sous-systèmes puissent y répondre.
Les contenus à afficher sont un arbre de cadres pour chaque onglet du navigateur, ainsi que l'interface du navigateur. Et un flux d'événements d'entrée bruts provenant d'écrans tactiles, de souris, de claviers et d'autres appareils matériels.
Chaque frame comprend les éléments suivants:
- État du DOM
- CSS
- Canevas
- Ressources externes, telles que des images, des vidéos, des polices et des fichiers SVG
Un frame est un document HTML, ainsi que son URL. Une page Web chargée dans un onglet de navigateur comporte un frame de premier niveau, des frames enfants pour chaque iFrame incluse dans le document de premier niveau et leurs descendants iFrame récursifs.
Un effet visuel est une opération graphique appliquée à un bitmap, comme le défilement, la transformation, le découpage, le filtre, l'opacité ou le mélange.
Composants de l'architecture
Dans RenderingNG, ces tâches sont réparties de manière logique sur plusieurs étapes et composants de code. Les composants se retrouvent dans différents processus, threads et sous-composants de CPU au sein de ces threads. Chacun joue un rôle important pour assurer la fiabilité, les performances évolutives et l'extensibilité de tous les contenus Web.
Structure du pipeline de rendu
Le rendu se déroule dans un pipeline avec un certain nombre d'étapes et d'artefacts créés en cours de route. Chaque étape représente du code qui effectue une tâche bien définie dans le rendu. Les artefacts sont des structures de données qui sont des entrées ou des sorties des étapes.
Les étapes sont les suivantes:
- Animation:modifiez les styles calculés et modifiez les arborescences de propriétés au fil du temps en fonction de chronologies déclaratives.
- Style:appliquez le CSS au DOM et créez des styles calculés.
- Mise en page:détermine la taille et la position des éléments DOM à l'écran, et crée l'arborescence de fragments immuable.
- Pré-peinture:calculez les arborescences de propriétés et invalidez toutes les listes d'affichage et tuiles de texture GPU existantes, le cas échéant.
- Défilement:modifiez le décalage de défilement des documents et des éléments DOM à faire défiler en modifiant les arbres de propriétés.
- Paint:calcule une liste d'affichage qui décrit comment rasteriser les tuiles de texture du GPU à partir du DOM.
- Commit:copie des arborescences de propriétés et de la liste d'affichage dans le thread du compositeur.
- Coucher:divisez la liste d'affichage en une liste de calques composée pour une rastérisation et une animation indépendantes.
- Worklets de rastérisation, de décodage et de peinture:convertissez respectivement les listes d'affichage, les images encodées et le code du worklet de peinture en tuiles de texture de GPU.
- Activer:créez un cadre de composition représentant comment dessiner et positionner les tuiles GPU à l'écran, ainsi que les éventuels effets visuels.
- Agrégation:combinez les frames du compositeur de tous les frames de compositeur visibles en un seul frame de compositeur global.
- Dessin:exécutez le frame du compositeur agrégé sur le GPU pour créer des pixels à l'écran.
Les étapes du pipeline de rendu peuvent être ignorées si elles ne sont pas nécessaires. Par exemple, les animations d'effets visuels et de défilement peuvent ignorer la mise en page, la pré-peinture et la peinture. C'est pourquoi l'animation et le défilement sont marqués par des points jaunes et verts dans le diagramme. Si la mise en page, la pré-peinture et la peinture peuvent être ignorées pour les effets visuels, elles peuvent être exécutées entièrement sur le thread du compositeur et ignorer le thread principal.
Le rendu de l'interface utilisateur du navigateur n'est pas représenté directement ici, mais peut être considéré comme une version simplifiée de ce même pipeline (et en fait, son implémentation partage une grande partie du code). La vidéo (qui n'est pas non plus représentée directement) est généralement affichée à l'aide d'un code indépendant qui décode les frames en tuiles de texture GPU qui sont ensuite connectées aux frames du compositeur et à l'étape de dessin.
Structure des processus et des threads
Processus de processeur
L'utilisation de plusieurs processus de processeur permet d'assurer l'isolation des performances et de la sécurité entre les sites et l'état du navigateur, ainsi que la stabilité et l'isolation de la sécurité par rapport au matériel du GPU.