Résolution des problèmes de performances courants

Les utilisateurs attendent des pages interactives et fluides. Chaque étape du pipeline de pixels représente une opportunité d’introduire des à-coups (interruptions de rendu). Découvrez des outils et des stratégies permettant d’identifier et de résoudre les problèmes courants qui ralentissent les performances d’exécution.

Résumé

• N’écrivez pas de code JavaScript qui force le navigateur à recalculer la disposition. Séparez les fonctions de lecture et d’écriture et effectuez d’abord les lectures.

• Ne compliquez pas trop votre CSS. Utilisez moins de CSS et gardez vos sélecteurs CSS simples.

• Évitez autant que possible la mise en page. Choisissez un CSS qui ne déclenche pas du tout la mise en page.

• La peinture peut prendre plus de temps que toute autre activité de rendu. Attention aux goulots d’étranglement de la peinture.

JavaScript

Les calculs JavaScript, en particulier ceux qui déclenchent des modifications visuelles importantes, peuvent bloquer les performances de l’application. Ne laissez pas un code JavaScript de longue durée ou inopportun interférer avec les interactions de l’utilisateur.

JavaScript : Outils

Effectuez un enregistrement dans l’outil Performances et recherchez les événements suspects de longueur Evaluate Script .

Si vous remarquez pas mal d’à-coups (interruptions de rendu) dans votre code JavaScript, vous devrez peut-être passer à l’étape suivante de votre analyse et collecter un profil d’UC JavaScript. Les profils de processeur indiquent où le temps d’exécution est passé dans les fonctions de votre page. Découvrez comment créer des profils de processeur dans Accélérer le runtime JavaScript (type de profilage « Allocation sampling »).#

JavaScript : Problèmes

Voici les problèmes JavaScript courants et les solutions possibles.

Problème	Exemple	Solution
Gestionnaires d’entrée coûteux affectant la réponse ou l’animation.	Défilement tactile et parallaxe.	Laissez le navigateur gérer les fonctions tactiles et les défilements, ou lier l’auditeur le plus tard possible. Voir les gestionnaires d’entrée coûteux dans la liste de contrôle des performances d’exécution de Paul Lewis.
JavaScript mal synchronisé affectant la réponse, l’animation et le chargement.	L’utilisateur fait défiler la page à droite après le chargement de la page, setTimeout / setInterval.	Optimisez le runtime JavaScript : utilisez requestAnimationFrame, répartissez la manipulation DOM sur les trames, utilisez des travailleurs web ; voir Utilisation de travailleurs web.
JavaScript de longue durée affectant la réponse.	L’événement DOMContentLoaded se bloque, car il est submergé de travail JavaScript.	Déplacer le travail de calcul pur vers les Web Workers ; voir Utilisation de travailleurs web. Si vous avez besoin d’un accès DOM, utilisez requestAnimationFrame.
Scripts de type « garbage » affectant la réponse ou l’animation.	Le ramassage des ordures peut avoir lieu n’importe où.	Écrivez moins de scripts de déchets. Nettoyage de la mémoire dans les animations dans la liste de contrôle des performances d’exécution par Paul Lewis.

Style

Les modifications de style sont coûteuses, en particulier si elles affectent plusieurs éléments du DOM. Chaque fois que vous appliquez des styles à un élément, le navigateur détermine l’impact sur tous les éléments associés, recalcule la disposition et repeint.

Style : Outils

Effectuez un enregistrement dans l’outil Performances . Vérifiez l’enregistrement pour vérifier s’il n’y a pas d’événements importants Recalculate Style (affichés en violet).

Sélectionnez un Recalculate Style événement pour afficher plus d’informations à son sujet dans le volet d’informations . Si les changements de style prennent beaucoup de temps, c’est un coup de performance. Si les calculs de style affectent un grand nombre d’éléments, c’est un autre domaine pouvant être amélioré.

Pour réduire l’impact des Recalculate Style événements, réduisez l’utilisation des propriétés CSS qui déclenchent la disposition, la peinture et la composition. Ces propriétés ont le plus grand impact sur les performances de rendu. Pour plus d’informations, consultez Éviter les propriétés qui déclenchent la disposition ou le peindre dans Comment créer des animations CSS hautes performances, au web.dev.

Style : problèmes

Le tableau suivant décrit certains problèmes de style courants et les solutions possibles.

Problème	Exemple	Solution
Calculs de style coûteux affectant la réponse ou l’animation.	Toute propriété CSS qui modifie la géométrie d’un élément, comme la largeur, la hauteur ou la position ; Le navigateur vérifie tous les autres éléments et recalcule la disposition.	Évitez les CSS qui déclenchent les dispositions.
Sélecteurs complexes affectant la réponse ou l’animation.	Les sélecteurs imbriqués forcent le navigateur à tout savoir sur tous les autres éléments, y compris les parents et les enfants.	Faites référence à un élément de votre CSS avec juste une classe.

Disposition

La mise en page (ou redistribution dans Firefox) est le processus par lequel le navigateur calcule les positions et les tailles de tous les éléments d’une page. Le modèle de mise en page du Web signifie qu’un élément peut en affecter d’autres ; Par exemple, la largeur de l’élément <body> affecte généralement la largeur de tous les éléments enfants, etc., tout en haut et en bas de l’arborescence. Le processus peut être assez compliqué pour le navigateur.

En règle générale, si vous demandez une valeur géométrique au DOM avant qu’une image ne soit terminée, vous allez vous retrouver avec des « mises en page synchrones forcées », qui peuvent être un gros goulot d’étranglement des performances si elles sont répétées fréquemment ou effectuées pour une grande arborescence DOM.

Disposition : outils

Le volet Performances identifie quand une page entraîne des dispositions synchrones forcées. Ces Layout événements sont signalés par des barres rouges.

Le « layout thrashing » est une répétition de conditions de mise en page synchrones forcées. Cela se produit lorsque JavaScript écrit et lit à partir du DOM à plusieurs reprises, ce qui oblige le navigateur à recalculer la disposition encore et encore. Pour identifier le chevauchement de disposition, recherchez un modèle de plusieurs avertissements de disposition synchrones forcés. Voir la figure précédente.

Mise en page : problèmes

Le tableau suivant décrit certains problèmes courants de mise en page et les solutions possibles.

Problème	Exemple	Solution
Mise en page synchrone forcée affectant la réponse ou l’animation.	Forcer le navigateur à effectuer la mise en page plus tôt dans le pipeline de pixels, ce qui entraîne la répétition d’étapes dans le processus de rendu.	Commencez par lire votre style par lots, puis rédigez-le.
Manipulation de la disposition affectant la réponse ou l’animation.	Une boucle qui place le navigateur dans un cycle de lecture-écriture-lecture-écriture, forçant le navigateur à recalculer la disposition encore et encore.	Effectuez automatiquement des opérations de lecture-écriture par lots à l’aide de la bibliothèque FastDom.

Peinture et composite

Peindre est le processus de remplissage des pixels. C’est souvent la partie la plus coûteuse du processus de rendu. Si vous avez remarqué que votre page ne fonctionne pas comme prévu, il est probable que vous ayez des problèmes de peinture.

Le compositing consiste à assembler les parties peintes de la page pour les afficher à l’écran. Dans l’ensemble, si vous vous en tenez aux propriétés du compositeur et évitez complètement la peinture, vous devriez remarquer une amélioration majeure des performances, mais vous devez faire attention au nombre excessif de couches.

Peinture et composite : outils

Pour savoir combien de temps ou à quelle fréquence la peinture a lieu :

1. Dans DevTools, dans l’outil Performances, cliquez sur le bouton Paramètres de capture ( puis cochez la case Activer l’instrumentation de rendu avancée.

2. Effectuer un enregistrement.

Si vous passez la plupart de votre temps de rendu à peindre, vous avez des problèmes de peinture. Pour plus d’informations, voir Activer l’instrumentation avancée de peinture dans la référence des fonctionnalités de performance.

Peinture et composite : problèmes

Le tableau suivant décrit certains problèmes courants liés aux peintures et aux composites ainsi que les solutions possibles.

Problème	Exemple	Solution
Des tempêtes de peinture affectant la réponse ou l’animation.	Grandes zones de peinture ou peintures coûteuses affectant la réponse ou l’animation.	Évitez de peindre, faites la promotion des éléments qui se déplacent vers leur propre calque, utilisez des transformations et de l’opacité.
Explosions de couches affectant les animations.	La surpromotion d’un trop grand nombre d’éléments translateZ(0) affecte grandement les performances d’animation.	Promouvez en couches avec parcimonie, et seulement lorsque vous savez qu’il offre des améliorations tangibles.

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page originale se trouve ici et est écrite par Kayce Basques et Meggin Kearney.

Ce travail est sous licence Creative Commons Attribution 4.0 International.