Performances d'affichage

Les utilisateurs remarquent que les sites et les applications ne fonctionnent pas bien. Il est donc essentiel d'optimiser les performances d'affichage.

Les internautes d'aujourd'hui s'attendent à ce que les pages qu'ils consultent soient interactives et fluide, et c'est là que vous devez de plus en plus consacrer votre temps et vos efforts. Les pages ne doivent pas simplement se charger rapidement : elles doivent également réagir rapidement aux entrées utilisateur. tout au long de leur cycle de vie. En fait, cet aspect de l'expérience utilisateur correspond précisément à ce que mesure la métrique Interaction to Next Paint (INP). Un bon INP signifie qu'une page était réactive de manière cohérente et fiable par rapport aux besoins.

Pour qu'une page semble dynamique, l'une des principales composantes le code JavaScript que vous exécutez en réponse à des interactions avec les utilisateurs ; anticipent sont les modifications visuelles de l'interface utilisateur. Modifications visuelles pour un utilisateur sont le résultat de plusieurs types de tâches, souvent appelées en tant qu'affichage. Ce travail doit être effectué le plus rapidement possible afin que l'expérience utilisateur semble rapide et fiable.

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

Remarque sur les fréquences 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 frame. Dans la vidéo suivante, le concept des images est présenté:

Si l'écran d'un appareil s'actualise toujours à une fréquence constante, les applications qui exécutés sur un appareil ne seront pas forcément toujours en mesure de produire suffisamment d'images pour à cette fréquence d'actualisation. Par exemple, en présence d'une animation ou d'une transition, le navigateur doit correspondre à la fréquence d'actualisation de l'appareil à chaque actualisation de l'écran.

Étant donné qu'un écran classique s'actualise 60 fois par seconde, quelques calculs rapides révèle que le navigateur a 16,66 millisecondes pour produire chaque image. En réalité, le navigateur a sa propre surcharge pour chaque frame, donc tous votre travail doit être terminé en 10 millisecondes ; Si vous ne parvenez pas à si vous respectez ce budget, la fréquence d'images diminue et le contenu de la page apparaît saccadé. Ce est souvent appelé à-coups.

Cependant, vos cibles changent en fonction du type de travail que vous essayez de faire. Atteindre le seuil de 10 millisecondes est essentiel pour les animations, où la valeur des objets à l'écran sont interpolés sur une série de frames entre deux points. Concernant les changements discrets de l'interface utilisateur, passer d'un état à un autre sans aucun mouvement entre les deux, c'est nous vous recommandons d'effectuer ces modifications dans un délai qui semble instantané l'utilisateur. Dans de tels cas, 100 millisecondes est un chiffre souvent cité, mais la métrique INP est « bonne » est de 200 millisecondes ou moins prendre en charge un plus large éventail d'appareils aux capacités variables.

Quels que soient vos objectifs, qu'il s'agisse de produire les nombreuses images requises pour éviter les à-coups, ou simplement produire un changement visuel discret dans l'interface utilisateur le plus rapidement possible, c'est-à-dire comprendre comment fonctionne le pixel le fonctionnement du pipeline est essentiel à votre travail.

Le pipeline de pixels

Il y a cinq domaines principaux que vous devez connaître et garder en tête dans votre je travaille en tant que développeur Web. Ces cinq domaines sont ceux que vous avez le plus chacun d'eux représente un point clé du pipeline "pixels à l'écran" :

• JavaScript:JavaScript est généralement utilisé pour gérer les tâches qui entraînent de modifications visuelles de l'interface utilisateur. Il peut s'agir, par exemple, de la bibliothèque la fonction animate, le tri d'un ensemble de données ou l'ajout d'éléments DOM à la page. JavaScript n'est pas indispensable pour déclencher des modifications visuelles: CSS les animations, les transitions CSS et l'API Web Animations : pour animer le contenu d'une page.
• Calculs de style:il s'agit du processus qui 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 à n'importe quel élément HTML. avec une valeur d'attribut class contenant une classe de headline. De une fois les règles connues, elles sont appliquées. Le style final de chaque règle sont calculés.
• Mise en page:une fois que le navigateur sait quelles règles s'appliquent à un élément, il peut commencer à calculer la géométrie de la page, par exemple la quantité d'espace des éléments prennent et où elles apparaissent à 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 <body> a généralement une incidence sur les dimensions de ses éléments enfants et le bas de l'arborescence, ce qui peut être assez complexe pour le navigateur.
• Peinture:la peinture désigne le processus consistant à remplir des pixels. Cela implique de dessiner texte, couleurs, images, bordures, ombres et essentiellement tous les éléments visuels aspect des éléments après le calcul de leur mise en page sur la page. Le dessin est généralement réalisé sur plusieurs surfaces, souvent appelées calques.
• Composite:les parties de la page pouvant être dessinées sur plusieurs calques, ils doivent être appliqués à l’écran dans le bon ordre afin de que la page s'affiche comme prévu. Ceci est particulièrement important pour les éléments qui en chevauchent un autre, car une erreur peut entraîner l’apparition d’un élément par-dessus une autre de manière incorrecte.

Chacune de ces parties du pipeline de pixels représente une opportunité d'introduire des à-coups dans les animations ou retarder la peinture des images, même pour des éléments visuels discrets des modifications à apporter à l'interface utilisateur. Il est donc important de comprendre exactement les parties du pipeline que votre code déclenche, et déterminer si vous pouvez de limiter vos modifications aux seules parties du pipeline de pixels nécessaires les afficher.

Vous avez peut-être déjà entendu le terme "rastériser" utilisé conjointement avec "peinture". Ce est que la peinture représente en réalité deux tâches:

1. Créer une liste d'appels de dessin
2. Remplissage des pixels.

Cette technique s'appelle la "rastérisation". Ainsi, chaque fois que vous voyez des enregistrements de peinture Pour les outils de développement, considérez qu'il inclut la rastérisation. Dans certains la liste des appels de dessin et la rastérisation est effectuée threads différents, mais cela n'est pas sous votre contrôle en tant que développeur.

Vous ne toucherez pas toujours toutes les parties du pipeline sur chaque frame. En fait, le pipeline se déroule normalement de trois façons un cadre lorsque vous apportez un changement visuel, que ce soit à l'aide de JavaScript, de CSS ou API Animations.

1. JS / CSS > Style > Mise en page > Peindre > Composite

Si vous modifiez une "mise en page" d'un élément, telle que celle qui modifie géométrie comme la largeur, la hauteur ou sa position (comme le code CSS left ou top) propriétés), le navigateur doit vérifier tous les autres éléments et effectuer un "reflow" la . Vous devrez repeindre toutes les zones affectées éléments doivent être reconstitués ensemble.

2. JS / CSS > Style > Peindre > Composite

Si vous avez modifié d'un élément CSS (par exemple, telles que background-image, color ou box-shadow (l'étape de mise en page) n'est pas nécessaire pour effectuer une mise à jour visuelle de la page. En omettant la mise en page vous évitez, dans la mesure du possible, les tâches de mise en page potentiellement coûteuses sinon il a contribué à une latence importante lors de la production de la trame suivante.

3. JS / CSS > Style > Composite

Si vous modifiez une propriété qui ne nécessite ni ni mise en page, ni peinture, le navigateur vous pouvez passer directement à l'étape de composition. C'est l'option la moins chère et chemin souhaitable à travers le pipeline de pixels pour les points à haute pression d'une du cycle de vie d'une page, comme les animations ou le défilement. Fait intéressant: Chromium optimise défilement de la page de sorte qu'il se produise uniquement sur le fil de discussion du compositeur, c'est-à-dire que même si une page ne répond pas, vous pouvez toujours faire défiler la page et voir les parties qui étaient précédemment dessinées à l'écran.

Les performances Web consistent à éviter tout travail, tout en augmentant l'efficacité de tout travail nécessaire autant que possible. Dans de nombreux cas, il s’agit de travailler avec le navigateur, et non contre elle. Il convient de garder à l'esprit que le travail précédemment indiqué dans le pipeline diffère en termes de coût de calcul. un peu tâches sont intrinsèquement plus chères que d'autres !

Examinons les différentes parties du pipeline. Nous examinerons les problèmes courants, ainsi que comment les diagnostiquer et les résoudre.

Optimisations de l'affichage dans le navigateur

Les performances sont importantes pour les utilisateurs, et pour créer des expériences utilisateur de qualité, les développeurs Web vous devez créer des sites Web qui réagissent rapidement aux interactions des utilisateurs et s'affichent. en douceur. 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 découvrirez également le rendu du navigateur du pipeline et de découvrir des modèles qui facilitent la création de sites Web rapides les utilisateurs trouveront agréable à utiliser.

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