7 conseils de performances pour les animations JavaScript sans Jank

Points clés

• Pour obtenir de meilleures performances d'animation et éviter l'animation des propriétés CSS qui déclenchent des opérations de publication ou de dessin, utilisez des propriétés qui ont été optimisées par les navigateurs modernes, tels que transform et opacity.
• Les éléments à animer peuvent être promus sur leurs propres couches à l'aide de l'attribut CSS will-change, mais cela devrait être fait avec prudence, car il nécessite de la mémoire et de la gestion.
• Remplacer requestAnimationFrame par setTimeout/setInterval pour réduire le risque de décalage et assurer des animations plus lisses, car cette méthode exécute le code d'animation au meilleur moment pour le navigateur.
• Pour les opérations de dessin complexes dans une toile HTML5, utilisez une toile hors écran pour améliorer les performances en effectuant toutes les opérations de dessin sur la toile hors écran, puis en dessinant une toile hors écran sur chaque trame.

Le rôle de l'animation Web est passé de simples effets décoratifs à des rôles spécifiques dans l'expérience utilisateur - par exemple, en fournissant des commentaires visuels lorsque les utilisateurs interagissent avec votre application, guidant les utilisateurs pour se concentrer pour atteindre les objectifs de l'application, fournissez des conseils visuels pour vous aider Les utilisateurs comprennent l'interface d'application, etc.

Pour s'assurer que les animations Web sont compétentes pour ces tâches critiques, il est important que le mouvement doit être effectué en douceur au bon moment afin que les utilisateurs puissent le voir comme une aide plutôt que tout ce qui les empêche d'essayer de jouer sur l'application .

Une mauvaise conception d'animation peut conduire à un effet ennuyeux - Jank, qui s'explique par Jankfree.org:

Les navigateurs modernes essaient de rafraîchir le contenu sur l'écran de manière synchrone avec la vitesse de rafraîchissement de l'appareil. Pour la plupart des appareils aujourd'hui, l'écran actualise 60 fois par seconde, ou 60 Hz. S'il y a un certain mouvement à l'écran (comme le défilement, les transitions ou l'animation), le navigateur doit créer 60 images par seconde pour correspondre au taux de rafraîchissement. Un bégaiement est un bégaiement, une gigue ou une pause simple qu'un utilisateur voit lorsqu'un site Web ou une application ne parvient pas à suivre le taux de rafraîchissement.

Si l'animation est bloquée, les utilisateurs finiront par interagir avec votre application de moins en moins, ce qui affectera négativement son succès. De toute évidence, personne ne veut ça.

Dans cet article, j'ai collecté quelques conseils de performance pour vous aider à résoudre des problèmes d'animation JavaScript et à atteindre plus facilement des objectifs de 60 images par seconde (cadres par seconde), permettant un mouvement fluide sur le réseau.

1.

Que vous prévoyez d'utiliser les images clés CSS Transition / CSS ou JavaScript pour animer les propriétés CSS, comprendre quelles propriétés provoquent la modification de la géométrie de la page (mise en page) - ce qui signifie que l'emplacement des autres éléments de la page doit être recalculé, ou il sera Impliquez des opérations de dessin - c'est très important. Les tâches de mise en page et de dessin sont très coûteuses à gérer pour les navigateurs, en particulier lorsqu'il y a plusieurs éléments sur la page. Donc, si vous évitez d'animer les propriétés CSS qui déclenchent des opérations de publication ou de dessin et de vous en tenir à des propriétés telles que transform et opacity, vous verrez une amélioration significative des performances d'animation, car les navigateurs modernes optimisent ces attributs sont très bien effectués.

Sur les déclencheurs CSS, vous pouvez trouver une dernière liste de propriétés CSS qui contiennent des informations sur les actions qu'ils déclenchent dans chaque navigateur moderne, y compris les premiers changements et suivants.

La modification des propriétés CSS qui déclenchent uniquement les opérations de synthèse est une étape simple et efficace que vous pouvez suivre pour optimiser les performances d'animation Web.

2. Si l'élément à animer est sur sa propre couche de synthétiseur, certains navigateurs modernes utiliseront l'accélération matérielle pour décharger le travail au GPU. S'il est utilisé correctement, cela peut avoir un impact positif sur les performances de l'animation.

Pour faire reposer un élément sur sa propre couche, vous devez le mettre à niveau. Une façon consiste à utiliser la propriété CSS

. Cette propriété permet aux développeurs d'avertir le navigateur à l'avance qu'ils souhaitent apporter des modifications à l'élément afin que le navigateur puisse faire des optimisations nécessaires à l'avance.

will-change Cependant, il n'est pas recommandé de soulever trop d'éléments sur leurs propres couches, ou de le faire de manière gonflée. En fait, chaque couche créée par un navigateur nécessite de la mémoire et de la gestion, ce qui peut être coûteux.

Vous pouvez en savoir plus sur la façon d'utiliser

, ses avantages et ses inconvénients dans l'introduction de Nick Salloum aux attributs de CSS.

will-change

3.

Les animations JavaScript sont généralement codées à l'aide de ou requestAnimationFrame. setTimeout/setInterval Le code est le suivant:

setInterval() Bien que cela fonctionne, le risque de décalage est élevé, car la fonction de rappel s'exécute à un moment donné du cadre, ce qui peut à la fin, ce qui peut entraîner une ou plusieurs cadres manquants. Aujourd'hui, vous pouvez utiliser une méthode JavaScript native conçue pour les animations Web lisses (animations DOM, toiles, etc.), appelé setTimeout().

Exécutez votre code d'animation au meilleur moment pour le navigateur, généralement au début du cadre.

var timer;
function animateElement() {
  timer = setInterval(function() {
    // 动画代码在此处
  }, 2000);
}

// 要停止动画，请使用 clearInterval
function stopAnimation() {
  clearInterval(timer);
}

Votre code peut ressembler à ceci: requestAnimationFrame()

var timer;
function animateElement() {
  timer = setInterval(function() {
    // 动画代码在此处
  }, 2000);
}

// 要停止动画，请使用 clearInterval
function stopAnimation() {
  clearInterval(timer);
}

"Performances de mise à jour de Tim Evko avec DequestanimationFrame" sur SitePoint fournit une excellente introduction vidéo sur le codage à l'aide de requestAnimationFrame().

4. Avec 60 images par seconde, le navigateur n'a que 16,67 ms par image pour faire son travail. Il n'y a pas beaucoup de temps, donc garder votre code rationalisé peut avoir un impact sur la maîtrise de votre animation.

Découplage du code qui gère le défilement, le redimensionnement, les événements de souris et d'autres événements du code qui utilise

pour gérer les mises à jour d'écran est un bon moyen d'optimiser les performances du code d'animation.

requestAnimationFrame() Pour une discussion approfondie de cette astuce d'optimisation et de son exemple de code connexe, consultez des animations plus maigres, plus puissantes et plus puissantes de Paul Lewis.

5.

Le navigateur utilise le thread principal pour exécuter JavaScript, ainsi que d'autres tâches telles que les calculs de style, les dispositions et les opérations de dessin. Le code JavaScript à long terme peut affecter négativement ces tâches, ce qui peut faire sauter les trames et provoquer un bégaiement d'animation. Donc, simplifier votre code est certainement un excellent moyen de vous assurer que vos animations fonctionnent bien. Pour les opérations JavaScript complexes qui ne nécessitent pas d'accès au DOM, envisagez d'utiliser des travailleurs Web. Un fil de travail effectue ses tâches sans affecter l'interface utilisateur.

6.

Les outils de développeur du navigateur offrent un moyen de surveiller la difficulté du navigateur exécutant votre code JavaScript ou vos bibliothèques tierces. Ils fournissent également des informations pratiques sur les fréquences d'images et plus encore.

Vous pouvez accéder à Chrome Devtools en cliquant avec le bouton droit sur la page Web et en sélectionnant Vérifier le menu contextuel. Par exemple, l'utilisation d'outils de performances pour enregistrer votre page Web vous permettra de comprendre les goulots d'étranglement des performances sur cette page:

Cliquez sur le bouton "Enregistrer" et arrêtez d'enregistrer après quelques secondes:

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

Ce guide Chrome Devtools vous aidera à tirer le meilleur parti de Devtools pour analyser les performances et de nombreux autres types de données dans votre navigateur Chrome. Si Chrome n'est pas votre navigateur de choix, c'est OK, car la plupart des navigateurs modernes sont aujourd'hui livrés avec de puissants Devtools que vous pouvez utiliser pour optimiser votre code.

7. Cette technique est spécifiquement liée à l'optimisation du code de toile HTML5.

Si votre trame implique des opérations de dessin complexes, une bonne idée est de faire toutes les opérations de dessin une ou une seule fois une fois lorsque des modifications se produisent, puis de dessiner uniquement la toile hors écran sur chaque cadre.

Vous pouvez trouver des informations détaillées et des exemples de code et plus sur cette astuce dans l'article d'optimisation de MDN.

Conclusion

L'optimisation des performances du code est une tâche nécessaire si vous ne voulez pas répondre aux attentes des utilisateurs sur le réseau d'aujourd'hui, mais ce n'est en aucun cas facile. Il peut y avoir plusieurs raisons à vos mauvaises performances d'animation, mais si vous essayez d'utiliser les conseils énumérés ci-dessus, vous ferez un grand pas pour éviter les pièges à performances d'animation les plus courants, améliorant l'expérience utilisateur de votre site Web ou de votre application.

FAQ (FAQ) sur les animations javascript sans décalage

Quel est le concept de "bégaiement" dans l'animation JavaScript?

"bégaiement" fait référence à tout bégaiement, gigue ou pause simple qu'un utilisateur voit lorsqu'un site Web ou une application ne parvient pas à suivre le taux de rafraîchissement. Dans les animations JavaScript, des retards peuvent se produire lorsque la fréquence d'images est inférieure aux 60 images standard par seconde. Cela peut entraîner une animation moins fluide et moins visuellement engageante, ce qui peut affecter négativement l'expérience utilisateur.

Comment assurer des animations JavaScript lisses?

Faire de l'animation JavaScript Smooth implique d'optimiser le code pour maintenir 60 images stables par seconde. Cela peut être réalisé en utilisant la méthode requestAnimationFrame, ce qui permet au navigateur d'optimiser les animations. Vous pouvez également utiliser des transitions ou des animations CSS pour des animations simples, car elles sont généralement plus efficaces que JavaScript. De plus, la gigue de mise en page est évitée en regroupant les opérations de lecture et d'écriture DOM ensemble.

requestAnimationFrame Quel est son rôle dans l'animation JavaScript?

La méthode requestAnimationFrame en JavaScript est un outil clé pour créer des animations lisses. Il indique au navigateur que vous souhaitez que l'animation soit exécutée et demande au navigateur d'appeler la fonction spécifiée pour mettre à jour l'animation avant la prochaine repeinte. Cette méthode permet au navigateur d'optimiser les animations, ce qui entraîne des animations plus lisses et plus efficaces.

Pourquoi les transitions ou animations CSS peuvent-elles être plus efficaces que JavaScript?

Les transitions et les animations

CSS peuvent être plus efficaces que JavaScript car elles sont traitées par le thread de synthétiseur du navigateur et sont séparées du thread JavaScript principal. Cela signifie que même si le fil principal est occupé avec d'autres tâches, ils peuvent fonctionner en douceur. De plus, certaines propriétés peuvent être animées dans CSS sans provoquer de redémarrage, ce qui les rend particulièrement efficaces.

Qu'est-ce que la gigue de mise en page et comment l'éviter dans les animations javascript?

La gigue de mise en page fait référence à JavaScript en lisant et en écrivant à plusieurs reprises le DOM, ce qui a fait recalculer le navigateur à plusieurs reprises, entraînant des animations inefficaces et bégayées. Cela peut être évité en lotant les opérations de lecture et d'écriture ensemble. Par exemple, vous pouvez faire toutes les lectures, puis toutes les écritures au lieu de lectures et d'écrits entrelacés.

Comment utiliser will-change Attribut Optimization JavaScript Animation?

La propriété

dans CSS vous permet d'informer le navigateur à l'avance les types de modifications que vous pourriez souhaiter apporter à l'élément afin qu'il puisse définir les optimisations appropriées avant qu'elle n'ait besoin. Cela peut améliorer considérablement les performances de l'animation. Cependant, utilisez-le avec prudence, car la surutilisation peut amener le navigateur à passer trop de temps à optimiser. will-change Que signifie les propriétés

et transform dans les animations JavaScript? opacity Les propriétés

et

dans transform CSS sont particulièrement efficaces pour les animations. En effet, les modifications de ces propriétés peuvent être gérées par le fil de synthétiseur du navigateur sans disposition ni dessin. Cela signifie qu'ils peuvent fonctionner en douceur même si les threads JavaScript principaux sont occupés. opacity

Comment utiliser les travailleurs du Web pour améliorer les performances des animations JavaScript?

Les travailleurs Web de JavaScript vous permettent d'exécuter des scripts en arrière-plan, séparés du fil d'exécution principal. Cela signifie qu'ils peuvent gérer les tâches à forte intensité de calcul sans bloquer le fil principal et provoquer un décalage. Cependant, ils ont certaines limites, telles que l'incapacité d'accéder au DOM ou à certaines API Web.

Qu'est-ce que l'animation "non-fil" et comment cela profite-t-il à l'animation JavaScript?

"L'animation" non-Main Thread "fait référence à l'exécution d'une animation sur un thread séparé séparé du thread JavaScript principal. Cela peut améliorer considérablement les performances des animations, car elle leur permet de fonctionner en douceur même lorsque le fil principal est occupé. Cela peut être réalisé en utilisant des animations CSS, des travailleurs Web ou des API d'animations Web.

Comment créer des animations JavaScript efficaces à l'aide de l'API des animations Web?

L'API des animations Web fournit un moyen de créer des animations à l'aide de JavaScript, qui fonctionne aussi efficacement que les animations CSS. Il vous permet de contrôler et de manipuler les animations directement à partir de JavaScript, vous offrant une plus grande flexibilité que les animations CSS. Cependant, il s'agit toujours d'une technologie expérimentale et n'est pas entièrement soutenu par tous les navigateurs.

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!