Prêt pour la nouvelle génération de contenu Web
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.
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é.
Comme pour une pyramide du monde réel, chaque niveau constitue une base solide pour le niveau supérieur.
Fiabilité
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.
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.
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 !
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é.
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.
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:
- Animations de défilement.
- DOM caché, mais inclus dans l'index de recherche et accessible :
- Transitions d'éléments partagés :
- Mise en page personnalisée.
- Composition hors thread principal ; découplage des threads et de la composition.
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.