Performances de repaint/reflow du navigateur: utilisation des dégradés CSS3 par rapport aux dégradés PNG

Question

Je travaille sur une application qui provoque de nombreux rediffusions sur les navigateurs. La performance est un problème clé ici. Du point de vue des performances Est-il préférable d'utiliser un dégradé CSS3 ou un dégradé d'image pour certains éléments DOM? Est-ce qu'une page qui utilise des ombres et des dégradés de texte CSS aura une refusion plus lente en tant que page qui utilise des images pour obtenir ces effets visuels? De plus, y a-t-il des tests de refusion que je peux utiliser?

Answer 1

Pour le dessin, les dégradés CSS et les ombres affectent davantage le processeur que les images. La performance était plutôt mauvaise, ces jours-ci, ils sont acceptables. Si vous avez une tonne de gradients/ombres, vous devez simplement les implémenter et faire les tests dans votre environnement réel. Si vous n'en avez que quelques-uns, je ne m'en soucierais pas.

Answer 2

Cela dépend beaucoup de la façon dont le navigateur le rend, mais pour la plupart, ces choses vont ralentir. De plus, vous aurez un affichage moins parfait dans les anciens navigateurs. Cependant, cela sert également à segmenter votre public, car généralement ceux avec des navigateurs mis à jour ont aussi des ordinateurs mis à jour. Donc, c'est un compromis qui peut fonctionner en votre faveur pour essentiellement servir une version dépouillée de votre site à ceux qui ne seraient pas en mesure de le gérer. Ce n'est pas garanti, mais j'ai trouvé que ça s'équilibre plutôt bien.

Dans l'ensemble, les tests réels sont la solution. Construisez-le, voyez si cela fonctionne et résolvez les problèmes de performance une fois que vous les avez trouvés. Je n'hésiterais pas juste parce qu'il y a une chance que cela ne fonctionne pas. Si ça marche très bien et que vous ne l'essayez pas, vous ne le saurez jamais!