7 conseils de performance pour les animations JavaScript Jank-free –

Le rôle de l'animation web a évolué de simple bourre décorative à servant des objectifs concrets dans le contexte de l'expérience utilisateur – comme fournir un retour visuel lorsque les utilisateurs interagissent avec votre application, attirer l'attention des utilisateurs objectifs de l'application, en offrant des repères visuels qui aident les utilisateurs à comprendre l'interface de votre application, etc.

Pour que l'animation Web soit à la hauteur de ces tâches cruciales, il est important que le mouvement se déroule au bon moment. , afin que les utilisateurs perçoivent cela comme une aide, plutôt que comme une entrave à toute action qu'ils tentent de mener sur votre application.

Un effet redouté d'une animation mal conçue est jank qui est expliqué sur jankfree.org comme ceci:

Les navigateurs modernes essaient de rafraîchir le contenu à l'écran en synchronisation avec la fréquence de rafraîchissement d'un appareil. Pour la plupart des appareils aujourd'hui, l'écran sera actualisé 60 fois par seconde, ou 60Hz. S'il y a un mouvement à l'écran (tel que le défilement, les transitions ou les animations), un navigateur doit créer 60 images par seconde pour correspondre au taux de rafraîchissement. Jank est un bégaiement, un saccage ou un arrêt brutal que les utilisateurs voient lorsqu'un site ou une application ne suit pas la fréquence de rafraîchissement.

Si les animations sont jovialisées, les utilisateurs finiront par interagir de moins en moins avec votre application sur son succès.

Dans cet article, j'ai rassemblé quelques conseils de performance pour vous aider à résoudre les problèmes liés aux animations JavaScript et à faciliter la réalisation de la cible à 60 fps (image par seconde) pour un mouvement fluide sur le Web.

# 1 Éviter d'animer des propriétés CSS coûteuses

Que vous envisagiez d'animer des propriétés CSS en utilisant CSS Transitions / Images clés CSS ou JavaScript, il est important de savoir quelles sont les propriétés un changement dans la géométrie de la page (mise en page) – ce qui signifie que la position des autres éléments sur la page devra être recalculée, ou que les opérations de peinture seront impliquées. Les tâches de mise en page et de peinture sont très chères pour les navigateurs, en particulier si vous avez plusieurs éléments sur votre page. En conséquence, les performances de l'animation s'amélioreront considérablement si vous évitez d'animer les propriétés CSS qui déclenchent les opérations de mise en page ou de peinture et de coller aux propriétés telles que les transformations et l'opacité, car les navigateurs modernes les optimisent. ] Déclencheurs CSS vous trouverez une liste à jour des propriétés CSS avec des informations sur le travail qu'ils déclenchent dans chaque navigateur moderne, à la fois lors de la première modification et lors des modifications suivantes.

Modifier les propriétés CSS qui ne déclenchent que des opérations composites est à la fois une étape simple et efficace pour optimiser vos performances Web.

Si l'élément que vous voulez animer est sur sa propre couche de compositeur, certains navigateurs modernes utilisent l'accélération matérielle en déchargeant le travail sur le GPU . S'il est utilisé judicieusement, ce mouvement peut avoir un effet positif sur la performance de vos animations.

Pour avoir l'élément sur son propre calque, vous devez le le promouvoir. Une façon de le faire est d'utiliser la propriété CSS will-change . Cette propriété permet aux développeurs d'avertir le navigateur de certaines modifications qu'ils souhaitent effectuer sur un élément, afin que le navigateur puisse effectuer les optimisations requises à l'avance.

Cependant, il est déconseillé de promouvoir trop d'éléments sur leur propre couche ou que vous le faites avec exagération. En fait, chaque couche créée par le navigateur nécessite de la mémoire et de la gestion, ce qui peut être coûteux.

Vous pouvez apprendre les détails de l'utilisation de will-change ses avantages et ses inconvénients. Introduction à la propriété will-change de CSS par Nick Salloum

# 3 Remplacer setTimeOut / setInterval par requestAnimationFrame

Les animations JavaScript ont généralement été codées en utilisant setInterval () ou setTimeout () .

Le code ressemblerait à ceci:

 var timer;
function animateElement () {
  timer = setInterval (function () {
    // Le code d'animation va ici
  }, 2000);
}

// Pour arrêter l'animation, utilisez clearInterval
function stopAnimation () {
  clearInterval (minuterie);
}

Bien que cela fonctionne, le risque de jank est élevé, car la fonction de rappel s'exécute à un certain moment dans le cadre, peut-être à la toute fin, ce qui peut entraîner la perte d'une ou de plusieurs images. Aujourd'hui, vous pouvez utiliser une méthode JavaScript native qui est adaptée pour une animation Web fluide (animation DOM, canevas, etc.), appelée requestAnimationFrame () .

requestAnimationFrame () exécute votre code d'animation au moment le plus approprié pour le navigateur, généralement au début du cadre.

Votre code pourrait ressembler à ceci:

 function makeChange (time) {
  // Logique d'animation ici

  // Appel requestAnimationFrame récursivement à l'intérieur de la fonction de rappel
  requestAnimationFrame (makeChange):
}

// Appelez à nouveau requestAnimationFrame en dehors de la fonction de rappel
requestAnimationFrame (makeChange);

Performance avec requestAnimationFrame de Tim Evko ici sur SitePoint offre une excellente introduction vidéo au codage avec requestAnimationFrame () .

# 4 Découpler les événements des animations dans votre code [19659008] À 60 images par seconde, le navigateur a 16.67ms pour faire son travail sur chaque image. Ce n'est pas beaucoup de temps, donc garder votre code léger pourrait faire la différence dans la fluidité de vos animations.

Découpler le code pour gérer les événements comme le défilement, le redimensionnement, les événements de souris, etc. using requestAnimationFrame () est une excellente façon d'optimiser votre code d'animation pour la performance.

Pour une discussion approfondie de cette astuce d'optimisation et de l'exemple de code, consultez Leaner, Meaner, Faster Animations requestAnimationFrame par Paul Lewis.

# 5 Éviter le code JavaScript de longue durée

Les navigateurs utilisent le thread principal pour exécuter JavaScript, ainsi que d'autres tâches comme les calculs de style, la mise en page et les opérations de peinture. Le code JavaScript de longue durée pourrait avoir un impact négatif sur ces tâches, ce qui pourrait entraîner le saut d'images et des animations janky en conséquence. Par conséquent, simplifier votre code pourrait certainement être un bon moyen de garantir le bon déroulement de vos animations.

Pour les opérations JavaScript complexes qui ne nécessitent pas d'accès au DOM, pensez à utiliser Web Workers . Le thread de travail effectue ses tâches sans impact sur l'interface utilisateur.

Les outils de développement de votre navigateur permettent de contrôler le fonctionnement de votre navigateur pour exécuter votre code JavaScript ou celui d'une bibliothèque tierce. Ils fournissent également des informations utiles sur les fréquences d'images et bien plus encore.

Vous pouvez accéder au Chrome DevTools en cliquant avec le bouton droit sur votre page Web et en sélectionnant Inspecter dans le menu contextuel. Par exemple, l'enregistrement de votre page Web à l'aide des outils Performance vous donnera un aperçu des goulots d'étranglement des performances sur cette page:

Cliquez sur ]puis arrête l'enregistrement après quelques secondes:

A ce stade, vous devriez avoir plein de données pour vous aider à analyser les performances de votre page:

Ce guide Chrome DevTools vous aide à tirer le meilleur parti de DevTools pour analyser les performances et beaucoup d'autres types de données dans votre navigateur Chrome. . Si Chrome n'est pas votre navigateur de prédilection, ce n'est pas un problème, car la plupart des navigateurs modernes sont livrés avec des DevTools puissants que vous pouvez utiliser pour optimiser votre code.

# 7 Utiliser un canevas hors écran pour les opérations de dessin complexes 19659008] Cette astuce concerne spécifiquement l'optimisation du code pour HTML5 Canvas .

Si vos cadres impliquent des opérations de dessin complexes, une bonne idée serait de créer une toile hors écran où vous effectuerez toutes les opérations de dessin ou juste lorsqu'une modification se produit, puis sur chaque image, dessinez simplement le canevas hors écran.

Vous pouvez trouver les détails et les exemples de code relatifs à cette astuce et bien plus encore dans l'article Optimizing Canvas MDN

Conclusion

Optimiser le code de performance est une tâche nécessaire si vous ne voulez pas échouer les attentes des utilisateurs sur le web aujourd'hui, mais ce n'est en aucun cas toujours facile ou direct. Il peut y avoir plusieurs raisons pour lesquelles vos animations ne fonctionnent pas bien, mais si vous essayez les astuces que j'ai énumérées ci-dessus, vous éviterez les pièges les plus courants des performances d'animation, améliorant ainsi l'expérience utilisateur de votre site ou

Maria Antonietta Perna est co-éditrice du canal HTML / CSS de SitePoint et développeur Web frontal. Elle aime bricoler avec les standards CSS et est curieuse d'enseigner des approches pour le code frontal. Lorsqu'elle ne code pas pour le Web ou qu'elle n'écrit pas pour le Web, elle aime les livres de philosophie, les longues marches et la bonne nourriture.