RenderingNG

Prêt pour la nouvelle génération de contenu Web

Chris Harrelson
Chris Harrelson

RenderNG est une architecture de rendu nouvelle génération qui offre des performances nettement supérieures aux précédentes. La conception de RenderingNG a été réalisée sur plus de huit ans et est le fruit du travail collectif de nombreux développeurs Chromium dévoués. Elle ouvre la voie à un contenu Web rapide, fluide, fiable, réactif et interactif.

Croquis des différents éléments de RenderingNG
RenderingNG

Vous allez découvrir ce que nous avons créé, pourquoi nous l'avons créé et comment il fonctionne.

Objectif de l'étoile polaire

L'objectif principal de RenderingNG est que la mise en œuvre du moteur du navigateur et la richesse de ses API de rendu ne soient pas un facteur limitant de l'expérience utilisateur sur le Web.

Vous ne devriez pas avoir à vous inquiéter des bugs du navigateur qui rendent les fonctionnalités peu fiables ou qui perturbent l'affichage de votre site.

Les performances ne devraient pas vous paraître mystérieuses. De plus, vous ne devriez pas avoir à contourner les fonctionnalités intégrées manquantes.

Cela devrait fonctionner.

RenderNG est un grand pas en avant vers l'étoile polaire. Avant RenderNG, nous pouvions (et avons fait) ajouter des fonctionnalités de rendu et améliorer les performances, mais nous avions du mal à les rendre fiables pour les développeurs, et les performances étaient nombreuses. Nous disposons désormais d'une architecture qui élimine systématiquement un grand nombre de ces problèmes et débloque également des fonctionnalités avancées qui n'étaient pas considérées comme réalisables auparavant.

  • Il offre des fonctionnalités de base à la pointe de la technologie pour différentes combinaisons de plates-formes, d'appareils et de systèmes d'exploitation.
  • Il offre des performances prévisibles et fiables.
  • Optimisation de l'utilisation des capacités matérielles (cœurs, GPU, résolution d'écran, fréquences d'actualisation, API matricielles de bas niveau).
  • Effectue uniquement le travail nécessaire à l'affichage du contenu visible.
  • Il est compatible avec les modèles courants de conception visuelle, d'animation et de conception d'interactions.
  • Fournit des API aux développeurs pour gérer facilement les coûts de rendu.
  • Fournit des points d'extension du pipeline de rendu pour les modules complémentaires du développeur.
  • Optimise tous les contenus (HTML, CSS, Canvas 2D, canevas 3D, images, vidéos et polices).

Comparaison avec d'autres moteurs de rendu de navigateur

Gecko et Webkit ont également implémenté la plupart des fonctionnalités architecturales décrites dans ces articles de blog et, dans certains cas, les ont même ajoutées avant Chromium.

Tout navigateur qui devient plus rapide et plus fiable est un événement à célébrer et a un réel impact. L'objectif ultime est d'améliorer la référence pour tous les navigateurs, afin que les développeurs puissent s'y fier.

La pyramide du succès

Selon moi, la réussite passe d'abord par la fiabilité, l'évolutivité des performances et enfin l'extensibilité.

Pyramide avec libellés Fiabilité à la base,
Performances au milieu, extensibilité en haut

Comme pour une pyramide du monde réel, chaque niveau constitue une base solide pour le niveau supérieur.

Fiabilité

Croquis montrant comment ajouter des fonctionnalités avec RenderingNG sans trop de frustration

Pour proposer des expériences utilisateur riches et complexes, la première chose dont nous avons besoin est une plate-forme robuste. Les fonctionnalités essentielles doivent fonctionner correctement et continuer à fonctionner au fil du temps. Il est tout aussi important que ces fonctionnalités soient bien rédigées et qu'elles ne présentent pas de comportement étrange ni de bug.

Le croquis montre la nature circulaire de l'ajout de fonctionnalités, de l'obtention de commentaires et de l'amélioration de la fiabilité

Pour cette raison, la fiabilité est l'élément le plus important de RenderingNG. La fiabilité est le résultat de tests, de boucles de rétroaction qualité, de métriques et de modèles de conception logicielle.

Pour vous donner une idée de l'importance de la fiabilité, nous avons passé la majeure partie des huit dernières années Tout d'abord, nous avons acquis une connaissance approfondie du système, en nous appuyant sur les rapports de bugs indiquant les points faibles et en les corrigeant, en amorçant des tests complets et en comprenant les besoins en performances des sites et les limites des performances de Chromium. Ensuite, nous avons soigneusement conçu et déployé des modèles de conception et des structures de données clés. Ce n'est qu'alors que nous étions prêts à ajouter des primitives véritablement nouvelle génération pour le responsive design, l'évolutivité et la personnalisation du rendu.

Un graphique en croquis montre l'amélioration de la fiabilité, des performances et de l'extensibilité au fil du temps

Cela ne veut pas dire que Chromium n'a rien amélioré au fil du temps. En fait, c'est l'inverse qui est vrai ! Ces années ont connu une augmentation constante et soutenue de la fiabilité et des performances, à mesure que nous procédions à la refactorisation et au déploiement de chaque amélioration étape par étape.

Tests et métriques

Au cours des huit dernières années, nous avons ajouté des dizaines de milliers de tests unitaires, de performances et d'intégration. En outre, nous avons développé des métriques complètes qui mesurent de nombreux aspects du comportement du rendu de Chromium lors de tests en local, d'analyses comparatives des performances et sur des sites réels, avec des utilisateurs et des appareils réels.

Mais quel que soit le niveau de qualité de RenderingNG (ou d'un autre moteur de rendu de navigateur), il sera difficile de développer pour le Web s'il existe de nombreux bugs ou des différences de comportement entre les navigateurs. Pour résoudre ce problème, nous optimisons également l'utilisation des tests de plate-forme Web. Chacun de ces tests consiste à vérifier un modèle d'utilisation de la plate-forme Web que tous les navigateurs doivent essayer de réussir. Nous surveillons également de près les métriques pour réussir plus de tests au fil du temps et améliorer la compatibilité de base.

Les tests de la plate-forme Web sont le fruit d'une collaboration. Par exemple, les ingénieurs Chromium n'ont ajouté qu'environ 10% du nombre total de tests WPT pour les fonctionnalités CSS. Les autres fournisseurs de navigateurs, contributeurs indépendants et auteurs de spécifications contribuent au reste. Il faut tout un village pour mettre en place un Web interopérable !

Tests réussis dans différents moteurs
Source : wpt.fyi/compat2021, mesure du taux de réussite des WPT pour les fonctionnalités principales

Bons modèles de conception logicielle

La fiabilité de la livraison de logiciels de qualité est, à son tour, beaucoup plus facile si le code est facile à comprendre et conçu de manière à réduire le risque de bugs. Nous aurons beaucoup plus à dire sur la conception logicielle de RenderingNG dans les articles de blog suivants.

Performances évolutives

Améliorer les performances (vitesse, mémoire et consommation d'énergie) constitue le deuxième aspect le plus important de RenderingNG. Nous souhaitons que les interactions avec tous les sites Web soient fluides et réactives, sans compromettre la stabilité de l'appareil.

Mais nous ne voulons pas seulement des performances, nous voulons des performances évolutives, une architecture qui fonctionne de manière fiable et fiable sur les machines d'entrée de gamme et de haut de gamme, ainsi que sur toutes les plates-formes de système d'exploitation. C'est ce que j'appelle le scaling à la hausse, qui consiste à exploiter tout ce que le dispositif matériel peut accomplir, et à effectuer un scaling à la baisse, en maximisant l'efficacité et en réduisant la demande sur le système si nécessaire.

Pour y parvenir, nous avons dû exploiter au maximum la mise en cache, l'isolation des performances et l'accélération matérielle du GPU. Examinons chacun d'entre eux l'un après l'autre. Et pour rendre les choses concrètes, réfléchissons à la manière dont chacun d'entre eux contribue à la performance d'une interaction extrêmement importante sur les pages Web: le défilement.

Mise en cache

Dans une plate-forme d'interface utilisateur dynamique et interactive telle que le Web, la mise en cache est le moyen le plus important d'améliorer considérablement les performances. Le type de mise en cache le plus connu dans un navigateur est le cache HTTP, mais le rendu comporte également de nombreux caches. Le cache le plus important pour le défilement est la mise en cache des textures GPU et des listes d'affichage, qui permettent un défilement extrêmement rapide tout en minimisant la décharge de la batterie et en fonctionnant correctement sur divers appareils.

La mise en cache améliore l'autonomie de la batterie et la fréquence d'images de l'animation pour le défilement, mais il est encore plus important qu'elle débloque l'isolation des performances du thread principal.

Isolation des performances

Sur les ordinateurs de bureau modernes, vous n'avez jamais à craindre que les applications en arrière-plan ralentissent celle sur laquelle vous travaillez. Cela est dû au multitâche préventif, qui est lui-même une forme d'isolation des performances : s'assurer que les tâches indépendantes ne se ralentissent pas les unes les autres.

Sur le Web, le défilement est le meilleur exemple d'isolation des performances. Même sur les sites Web comportant beaucoup de code JavaScript lent, le défilement peut être très fluide, car il s'exécute sur un thread différent qui ne dépend pas du JavaScript ni du thread de mise en page. Nous avons déployé beaucoup d'efforts sur RenderingNG pour nous assurer que chaque défilement possible est organisé en fils, grâce à une mise en cache qui va bien au-delà d'une simple liste d'affichage pour des situations plus complexes. Il peut s'agir, par exemple, de code représentant des éléments positionnés fixes et fixes, des écouteurs d'événements passifs et un rendu de texte de haute qualité.

Sketch montre qu'avec RenderingNG, les performances restent stables même lorsque JavaScript est très lent.

Accélération GPU

Un GPU accélère considérablement la génération des pixels et le dessin sur l'écran. Dans de nombreux cas, chaque pixel peut être dessiné en parallèle avec tous les autres pixels, ce qui augmente considérablement la vitesse. Les trames GPU sont un composant clé de RenderingNG, qui permettent de dessiner partout. Ce système utilise le GPU sur toutes les plates-formes et tous les appareils afin d'accélérer le rendu et l'animation du contenu Web. Cela est particulièrement important sur les appareils d'entrée de gamme ou très haut de gamme, qui ont souvent un GPU beaucoup plus performant que d'autres parties de l'appareil.

Le croquis montre que les performances de RenderingNG ne se dégradent pas autant.

Extensibilité: des outils adaptés à chaque tâche

Une fois que nous aurons obtenu des performances fiables et évolutives, nous sommes prêts à nous appuyer sur de nombreux outils pour aider les développeurs à étendre les parties intégrées de HTML, CSS et Canvas, et de manière à ne pas sacrifier ces performances et cette fiabilité durement acquises.

Cela inclut des API intégrées et exposées en JavaScript pour les cas d'utilisation avancés du responsive design, de l'affichage progressif, de la fluidité et de la réactivité, et de l'affichage en threads.

Les API Web ouvertes suivantes, préconisées par Chromium, ont été rendues possibles grâce à RenderingNG, mais étaient auparavant considérées comme irréalisables.

Ils ont tous été développés avec des spécifications ouvertes et une collaboration avec des partenaires Web ouverts (ingénieurs pour d'autres navigateurs, experts et développeurs Web). Dans les prochains articles de blog, nous examinerons chacun de ces éléments et expliquerons comment RenderingNG les rend possibles.

  • content- visibility : permet aux sites d'éviter facilement l'affichage du contenu hors écran et l'affichage du cache pour les vues d'application monopage qui ne sont pas affichées actuellement.
  • OffscreenCanvas: permet d'exécuter le rendu du canevas (à la fois avec l'API Canevas 2D et WebGL) sur son propre thread pour d'excellentes performances. Ce projet est également une autre étape majeure pour le Web : il s'agit de la toute première API Web qui permet à JavaScript (ou WebAssembly) d'afficher un document de page Web à partir de plusieurs threads.
  • Requêtes de conteneur: elles permettent à un seul composant de s'afficher de manière responsive, afin de débloquer tout un univers de composants prêts à l'emploi (actuellement une implémentation expérimentale).
  • Isolation de l'origine: permet aux sites d'activer une meilleure isolation des performances entre les iFrames.
  • Worklets de peinture hors thread principal: permet aux développeurs d'étendre la façon dont les éléments sont peints, avec du code exécuté sur le thread du compositeur.

En plus des API Web explicites, RenderingNG nous a permis de proposer plusieurs "fonctionnalités automatiques" très importantes qui profitent à tous les sites:

  • L'isolation de sites : place les iFrames multi-origines dans différents processus de processeur, pour une meilleure sécurité et une meilleure isolation des performances.
  • Vulkan, D3D12 et Metal: exploitent des API de niveau inférieur qui utilisent les GPU plus efficacement qu'OpenGL.
  • Plus d'animations composées : SVG, couleur d'arrière-plan.

Voici d'autres fonctionnalités qui seront débloquées par RenderingNG, et dont nous sommes ravis:

Principaux projets de RenderingNG

Voici une liste des principaux projets dans RenderingNG.

CompositeAfterPaint

CompositeAfterPaint distingue la composition du style, de la mise en page et de la peinture, ce qui offre une fiabilité nettement améliorée, des performances prévisibles, un débit supérieur et une utilisation de moins de mémoire sans sacrifier les performances.

Year Progression
2015 Expédition des listes d'affichage.
2017 Expédiez la nouvelle invalidation.
2018 Arborescences de navires, partie 1.
2019 Arborescences de navires, partie 2.
2021 Envoi du projet terminé.

LayoutNG

Réécriture complète de tous les algorithmes de mise en page, pour une fiabilité considérablement améliorée et des performances plus prévisibles.

En savoir plus sur LayoutNG.

Year Progression
2019 Procédure d'expédition groupée.
2020 Livraison flexible, édition
2021 Expédiez tout le reste.

BlinkNG

Nous avons refactorisé et nettoyé le moteur de rendu Blink en phases de pipeline parfaitement séparées. Cela permet une meilleure mise en cache, une plus grande fiabilité et des fonctionnalités d'affichage réentrant ou retardé, telles que la visibilité du contenu et les requêtes de conteneur.

L'accélération du GPU partout

L'accélération GPU permet d'accélérer considérablement la plupart des contenus, car chaque pixel peut être traité en parallèle. Il s'agit également d'une méthode efficace pour améliorer les performances sur les appareils d'entrée de gamme, qui disposent généralement d'un GPU.

Year Progression
2014 Compatibilité avec les canevas. Envoyé sur le contenu nécessitant une autorisation d'utilisation sur Android.
2016 Expédier sur Mac.
2017 Le GPU est utilisé sur plus de 60% des pages vues sur Android.
2018 Expédié sous Windows, ChromeOS et Android Go.
2019 Rastérisation GPU par thread
2020 Expédier le contenu Android restant

Défilement par threads, animations et décodage

Effort à long terme pour déplacer toutes les animations de défilement, qui ne provoquent pas de mise en page et le décodage d'images en dehors du thread principal. Il est en cours.

Year Progression
2011 Prise en charge initiale du défilement linéaire et de l'animation.
2015 Écrasement des couches.
2016 Défilement par dépassement universel.
2017 L'image est décodée sur le thread du compositeur.
2018 Images animées sur le fil de discussion du compositeur.
2020 Il s'agit toujours d'une position fixe composite.
2021 Animations de transformation de pourcentage, animations SVG.

Visualisation

Processus centralisé de dessin et de trame pour Chromium qui augmente le débit, optimise la mémoire et permet une utilisation optimale des fonctionnalités matérielles. Elle présente d'autres avantages moins visibles pour les développeurs Web, mais très visibles pour les utilisateurs, tels que le déblocage de l'isolation de sites et le découplage du pipeline de rendu du rendu de l'interface utilisateur du navigateur.

Year Progression
2018 OOP-R est disponible sur Android, Mac et Windows.
2019 OOP-D expédié. OOP-R expédié partout (sauf Canvas). SkiaRenderer est disponible sous Linux.
2020 SkiaRenderer est disponible sur Windows et Android. Vulkan expédié sur Android.
2021 SkiaRenderer sera disponible sur Mac (et bientôt sur ChromeOS).

Définitions des termes dans le tableau ci-dessus:

POD-D
Composeur d'affichage hors processus. La composition d'écran correspond au même type d'activité qu'un compositeur d'OS. Hors processus signifie le faire dans le processus de visualisation plutôt que dans le processus de rendu de la page Web ou le processus de l'UI du navigateur.
OOP-R
Trame hors processus. La trame convertit les listes d'affichage en pixels. Hors processus signifie le faire dans le processus de visualisation plutôt que dans le processus d'affichage de la page Web.
SkiaRenderer
Nouvelle implémentation du compositeur d'affichage pouvant prendre en charge l'exécution sur différentes API GPU sous-jacentes telles que Vulkan, D3D12 ou Metal.

Rendu du canevas avec threads et accélération

C'est le projet qui a rendu OffscreenCanvas possible.

Year Progression
2018 Expédiez OffscreenCanvas.
2019 Envoi du contexte ImageBitmapRenderingContext.
2021 Expédiez la commande OOP-R.

VideoNG

VideoNG est une initiative à long terme visant à offrir une lecture vidéo efficace, fiable et de haute qualité sur le Web.

Year Progression
2014 Introduction d'un framework de rendu basé sur Mojo.
2015 Project Butter et superpositions vidéo envoyés pour un rendu vidéo plus fluide.
2016 Pipelines de décodage et de rendu unifiés pour Android et pour ordinateur de bureau.
2017 Le format HDR et le rendu vidéo avec correction des couleurs ont été fournis.
2018 Pipeline de décodage vidéo basé sur Mojo.
2019 Pipeline de rendu vidéo basé sur une surface expédié
2021 Compatibilité avec le rendu de contenu protégé 4K sur ChromeOS.

Définitions des termes dans le tableau ci-dessus:

Mojo
Un sous-système d'IPC nouvelle génération pour Chromium.
Surface
Concept qui fait partie de la conception du projet Viz.

Illustrations d'Una Kravets.