Maîtriser les performances Web : comprendre le pipeline de pixels

En tant que développeurs Web, et en particulier pour ceux d'entre nous qui se spécialisent dans le développement frontend, il est essentiel de comprendre le fonctionnement des navigateurs, le protocole de communication sur le Web, l'accessibilité du Web, etc.

Dans ce cas, je partage quelque chose à garder à l’esprit pour améliorer les performances de nos sites Web et ainsi améliorer l’expérience utilisateur. Il s’agit du Pixel Pipeline.

Qu'est-ce que le pipeline de pixels ?

Le Pixel Pipeline est un processus qui décrit comment les navigateurs Web convertissent le HTML, le CSS et le JavaScript en éléments visuels affichés à l'écran

Il y a cinq domaines principaux que vous devez connaître et prendre en compte dans votre travail en tant que développeur Web. Ces cinq zones sont ce que vous avez, et chacune représente un point clé dans le pipeline de pixels vers l'écran :

JavaScript : JavaScript est généralement utilisé pour gérer des travaux qui entraîneront des modifications visuelles de l'interface utilisateur. Par exemple, il peut s'agir de la fonction d'animation de jQuery, du tri d'un ensemble de données ou de l'ajout d'éléments DOM à la page

Calculs de style : il s'agit du processus permettant de déterminer quelles règles CSS s'appliquent à quels éléments HTML en fonction des sélecteurs correspondants. Par exemple, .headline est un exemple de sélecteur CSS qui s'applique à tout élément HTML avec une valeur d'attribut de classe contenant une classe de titre.

Mise en page : Une fois que le navigateur connaît les règles qui s'appliquent à un élément, il peut commencer à calculer la géométrie de la page, par exemple l'espace occupé par les éléments et l'endroit où ils apparaissent à l'écran.

Peinture : La peinture est le processus de remplissage des pixels. Il s'agit de dessiner du texte, des couleurs, des images, des bordures, des ombres et essentiellement tous les aspects visuels des éléments après avoir calculé leur disposition sur la page.

Composite : Étant donné que les parties de la page ont été potentiellement dessinées sur plusieurs calques, elles doivent être appliquées à l'écran dans le bon ordre pour que la page s'affiche comme prévu.

Ainsi, connaissant ce qui précède, nous pouvons comprendre les coûts en ressources pour les animations où l'on redimensionne un élément, ce qui impliquera de revenir au processus de mise en page, puis au processus de peinture, et enfin au processus de composition.

En revanche, créer des animations qui impliquent de changer la couleur du texte ou la couleur d'arrière-plan d'un élément nécessitera uniquement de passer par le processus Paint puis de passer au processus Compose.

Recommandations pour améliorer les performances de votre site Web et améliorer l'expérience utilisateur

i) Essayez d'éviter de créer trop d'animations autant que possible.
ii) Si vous souhaitez des animations, limitez-vous aux propriétés de transformation et d'opacité lors de l'animation, car ces propriétés n'auront besoin que de passer par le processus de composition, qui est la dernière étape du Pixel Pipeline. Par exemple : lors de l'animation d'un bouton avec la pseudo-classe hover, il est préférable d'utiliser l'opacité plutôt que de changer sa couleur d'arrière-plan.
iii) Si nous voulons déplacer un élément dans le cadre d'une animation, il est préférable d'utiliser 'will-change' ou la propriété 'transform' avec ses valeurs de traduction.

Sources sur lesquelles j'ai basé ce message :
https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count?hl=es
https://web.dev/articles/rendering-performance

Cours gratuit sur l'optimisation du rendu du navigateur dispensé par Paul Lewis, ingénieur expert dans tout ce qui concerne les performances et créateur de Lighthouse (Google Lighthouse est un outil automatisé open source pour mesurer la qualité des pages Web), un outil au sein les Chrome DevTools :
https://www.udacity.com/course/browser-rendering-optimization--ud860

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!