benchmark de performance CSS Animations

Question

J'ai une application web avec des tonnes d'effets spéciaux, principalement des transformations CSS et des changements d'opacité, qui semblent douces et professionnelles, mais pour certains utilisateurs, c'est un peu problématique. Je reçois des tickets qui sur certaines machines (la plupart du temps plutôt anciennes) ces animations scintillent et au lieu de donner du plaisir à l'œil, elles sont agaçantes.

Ici, je demande la façon la plus efficace de tester les performances de l'utilisateur, donc je serais en mesure de déclencher une classe sur la balise body qui va simplifier certains, voire désactiver ces animations pour les machines plus anciennes.

Mon idée pour l'instant est d'utiliser un benchmark js open source (un test qui utilise canvas et ne prend pas plus de 200ms) et des résultats de cache dans localStorage. Le problème est que lorsque j'ouvre mon application dans un onglet caché, ce benchmark montre des résultats erronés. Comment dire à l'utilisateur aura une expérience de 50-60fps sans prendre trop de temps à tester et à avoir des résultats les plus fiables?

Merci

Answer 1

Comment dire l'utilisateur aura l'expérience 50-60fps en douceur, sans prendre trop de temps pour tester et d'avoir des résultats plus fiables?

Je ne pense pas qu'il existe un moyen de le faire. Potentiellement, vous pouvez commander un service pour cela (comme CrossBrowserTesting ou Leaptest) pour obtenir l'enregistrement vidéo pour ces appareils et voir par vous-même. Par expérience personnelle - nous avons supprimé toutes les animations CSS3 de fantaisie pour les tablettes Android et les appareils iOS car ceux-ci se bloquaient de manière inattendue sur notre application.

Évitez d'avoir de grandes couches avec des animations d'opacité, comme les fenêtres modales toile de fond, etc.

En général, - vérifier la videos et articles sur repaint & reflow dans les navigateurs et déboguer votre application pour voir ce qui est ou pourrait être à l'origine des problèmes pour les utilisateurs .

Espérons que ça aide.