Performances d'affichage

Les utilisateurs remarquent si les sites et les applications ne s'exécutent pas correctement. Il est donc crucial d'optimiser les performances d'affichage.

Les internautes d'aujourd'hui s'attendent à ce que les pages qu'ils consultent soient interactives et fluides. C'est là que vous devez consacrer plus de temps et d'efforts. Les pages doivent non seulement se charger rapidement, mais aussi réagir rapidement aux entrées des utilisateurs tout au long de leur cycle de vie. En fait, cet aspect de l'expérience utilisateur est précisément ce que mesure la métrique Interaction to Next Paint (INP). Un bon INP signifie qu'une page répondait de manière cohérente et fiable aux besoins de l'utilisateur.

Bien que l'un des principaux facteurs permettant de rendre une page dynamique concerne la quantité de code JavaScript que vous exécutez en réponse aux interactions utilisateur, ce que les utilisateurs attendent sont des modifications visuelles de l'interface utilisateur. Les modifications visuelles d'une interface utilisateur sont le résultat de plusieurs types de tâches, souvent collectivement appelées rendu. Ces modifications doivent être effectuées le plus rapidement possible afin que l'expérience utilisateur soit rapide et fiable.

Pour rédiger des pages qui répondent rapidement aux interactions des utilisateurs, vous devez comprendre comment le navigateur gère le code HTML, JavaScript et CSS, et vous assurer que le code que vous écrivez, ainsi que tout autre code tiers que vous incluez, s'exécute aussi efficacement que possible.

Remarque concernant la fréquence d'actualisation des appareils

Aujourd'hui, la plupart des appareils actualisent leur écran 60 fois par seconde. Chaque actualisation produit la sortie visuelle que vous voyez. Elle est communément appelée image. La vidéo suivante illustre le concept d'image:

Bien que l'écran d'un appareil s'actualise toujours à une fréquence constante, il est possible que les applications exécutées sur un appareil ne puissent pas toujours produire suffisamment d'images pour correspondre à cette fréquence d'actualisation. Par exemple, si une animation ou une transition est en cours d'exécution, le navigateur doit correspondre à la fréquence d'actualisation de l'appareil afin de produire une image pour chaque actualisation de l'écran.

Étant donné qu'un affichage type est actualisé 60 fois par seconde, des calculs rapides révèlent que le navigateur dispose de 16,66 millisecondes pour produire chaque image. En réalité, le navigateur a sa propre surcharge pour chaque frame, de sorte que l'ensemble de votre travail doit être effectué en 10 millisecondes. Si vous ne respectez pas ce budget, la fréquence d'images diminue et le contenu de la page s'affiche à l'écran. Ce phénomène est souvent appelé à-coups.

Cependant, vos cibles changent en fonction du type de travail que vous essayez d'effectuer. Atteindre le seuil de 10 millisecondes est crucial pour les animations, où les objets à l'écran sont interpolés sur une série de frames entre deux points. Lorsqu'il s'agit de modifications discrètes dans l'interface utilisateur, c'est-à-dire de passer d'un état à un autre sans aucun mouvement entre les deux, nous vous recommandons d'effectuer ces changements dans un laps de temps qui semblait instantané pour l'utilisateur. Dans de tels cas, une valeur de 100 millisecondes est un chiffre souvent cité, mais le seuil "bon " de la métrique INP est inférieur ou égal à 200 millisecondes afin de prendre en charge un plus grand nombre d'appareils aux capacités variables.

Quels que soient vos objectifs, qu'il s'agisse de produire le nombre d'images requis par les animations pour éviter les à-coups ou simplement de produire une modification visuelle discrète dans l'interface utilisateur le plus rapidement possible, il est essentiel de comprendre le fonctionnement du pipeline de pixels du navigateur.

Le pipeline de pixels

Il existe cinq domaines principaux que vous devez connaître et surveiller dans votre travail de développeur Web. Ces cinq zones sont celles que vous contrôlez le plus et représentent chacune un point clé du pipeline pixels à écran:

• JavaScript:JavaScript est généralement utilisé pour gérer les tâches qui entraînent des modifications visuelles dans l'interface utilisateur. Il peut s'agir, par exemple, de la fonction animate de jQuery, du tri d'un ensemble de données ou de l'ajout d'éléments DOM à la page. Toutefois, JavaScript n'est pas strictement nécessaire pour déclencher des modifications visuelles: les animations CSS, les transitions CSS et l'API Web Animations permettent d'animer le contenu d'une page.
• Calculs de style:ce processus consiste à 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 class contenant une classe headline. Une fois que les règles sont connues, elles sont appliquées et les styles finaux de chaque élément sont calculés.
• 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 leur emplacement à l'écran. Le modèle de mise en page du web signifie qu'un élément peut affecter les autres. Par exemple, la largeur de l'élément <body> affecte généralement les dimensions de ses éléments enfants tout au long de l'arborescence. Le processus peut donc être assez complexe pour le navigateur.
• Peinture:la peinture est le processus de remplissage des pixels. Cela implique de dessiner du texte, des couleurs, des images, des bordures, des ombres et essentiellement tous les aspects visuels des éléments une fois leur mise en page calculée sur la page. Le dessin est généralement effectué sur plusieurs surfaces, souvent appelées "calques".
• Composite:les parties de la page pouvant être 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. Cela est particulièrement important pour les éléments qui en se chevauchent, car une erreur peut entraîner l'apparition incorrecte d'un élément au-dessus d'un autre.

Chacune de ces parties du pipeline de pixels représente une opportunité d'introduire des à-coups dans les animations ou de retarder le rendu des images, même pour des changements visuels discrets de l'interface utilisateur. Il est donc important de comprendre exactement quelles parties du pipeline sont déclenchées par votre code et de déterminer si vous pouvez limiter vos modifications aux seules parties du pipeline de pixels nécessaires à leur rendu.

Vous avez peut-être entendu le terme "rastériser" utilisé conjointement avec "peindre". En effet, la peinture comporte en réalité deux tâches:

1. Créer une liste d'appels de dessin
2. Remplir les pixels.

Cette dernière s'appelle la "rastérisation". Par conséquent, chaque fois que vous voyez des enregistrements "paint" dans les outils de développement, considérez qu'il s'agit d'une rastérisation. Dans certaines architectures, la création de la liste des appels de dessin et de la rastérisation est effectuée sur différents threads, mais cela n'est pas sous votre contrôle en tant que développeur.

Vous ne toucherez pas toujours chaque partie du pipeline sur chaque image. En fait, le pipeline se déroule normalement pour une image donnée lorsque vous apportez une modification visuelle, que ce soit avec JavaScript, CSS ou l'API Web Animations.

1. JS / CSS > Style > Layout > Paint > Composite (Style > Mise en page > Peinture > Composite)

Si vous modifiez une propriété de "mise en page", par exemple une propriété qui modifie la géométrie d'un élément, comme sa largeur, sa hauteur ou sa position (comme les propriétés CSS left ou top), le navigateur doit vérifier tous les autres éléments et ajuster la page. Toutes les zones concernées devront être repeintes, et les derniers éléments peints devront être recomposés.

2. JS / CSS > Style > Peinture > Composite

Si vous avez modifié une propriété "paint-only" pour un élément en CSS, par exemple des propriétés telles que background-image, color ou box-shadow, l'étape de mise en page n'est pas nécessaire pour valider une mise à jour visuelle de la page. En omettant l'étape de mise en page, dans la mesure du possible, vous évitez les tâches de mise en page potentiellement coûteuses qui auraient pu contribuer à une latence importante lors de la génération du frame suivant.

3. JS / CSS > Style > Composite

Si vous modifiez une propriété qui ne nécessite ni de mise en page ni de dessin, le navigateur peut passer directement à l'étape de composition. Il s'agit du chemin le moins cher et le plus souhaitable dans le pipeline de pixels pour les points de pression élevés dans le cycle de vie d'une page, tels que les animations ou le défilement. Fait intéressant: Chromium optimise le défilement de la page de sorte qu'il s'affiche uniquement sur le fil de discussion du compositeur, dans la mesure du possible. Ainsi, même si une page ne répond pas, vous pouvez toujours la faire défiler et voir les parties qui étaient précédemment affichées à l'écran.

Les performances Web consistent à éviter les tâches, tout en augmentant l'efficacité des tâches nécessaires autant que possible. Dans de nombreux cas, il s'agit de travailler avec le navigateur, pas contre lui. Notez que le travail précédemment présenté dans le pipeline diffère en termes de coût de calcul. Certaines tâches sont intrinsèquement plus coûteuses que d'autres.

Examinons de plus près les différentes parties du pipeline. Nous allons passer en revue les problèmes courants, et découvrir comment les diagnostiquer et les résoudre.

Optimisations de l'affichage dans le navigateur

Les performances sont importantes pour les utilisateurs. Pour offrir une expérience utilisateur de qualité, les développeurs Web doivent concevoir des sites Web qui réagissent rapidement aux interactions des utilisateurs et s'affichent correctement. Paul Lewis, expert en performances, est là pour vous aider à supprimer les à-coups et à créer des applications Web qui maintiennent des performances de 60 images par seconde. Vous quitterez ce cours avec les outils dont vous avez besoin pour profiler les applications et identifier les causes des performances d'affichage non optimales. Vous explorerez également le pipeline de rendu du navigateur et découvrirez des modèles qui facilitent la création de sites Web rapides que les utilisateurs trouveront agréables à utiliser.

Ce cours est proposé sans frais via Udacity et vous pouvez le suivre à tout moment.