web-dev-qa-db-fra.com

Quel est l'impact du thème fluide sur les performances de rendu?

Je suis novice en conception réactive et je suis en train de refaire un modèle pour le rendre plus réactif. Cela implique de redéfinir de nombreuses polices et largeurs fixes en pourcentage dépendant du contexte (% ou em) au lieu de pixels dans css.

Je me demande donc comment tous ces nouveaux calculs ajoutés affectent le temps de rendu des pages, sachant que la plupart des valeurs des éléments doivent maintenant être calculées, et que les processeurs mobiles qui sont les périphériques cibles sont beaucoup moins puissants qu'un processeur de bureau typique. L'effet sera-t-il sensible sur la plupart des appareils? Si oui, combien? Je vous serais reconnaissant de bien vouloir me renvoyer aux références/études pertinentes. Merci

cssperformancethemeresponsive-webdesign
3
alfish

Vous pouvez utiliser les outils de développement Google Chrome pour évaluer le rendu du navigateur (peinture et reflux) ainsi que les appels javascript et leur incidence. Je suis sûr qu'il existe d'autres outils sophistiqués, mais c'est l'outil le plus pratique et le plus accessible pour moi.

Excellentes vidéos/tutoriels sur ce sujet:

Vous pouvez également tester vos conceptions Web à l'aide de http://www.webpagetest.org/ et comparer les vitesses de vos différentes conceptions. En prime, le graphique en cascade comprend des graphiques d'utilisation du processeur.

2
Anthony Hatzopoulos

Je n'ai pas vu de repère à ce sujet (je serais curieux de savoir s'il en était ainsi), mais j'imagine que l'effet est effectivement nul.

Le navigateur effectue tous ses calculs lors du chargement de la page. Ainsi, que vous indiquiez au navigateur font-size: 0.8em; ou font-size: 10px; ou font-size: 80%; ne devrait pas faire assez de différence pour être perceptible par tout utilisateur et devrait se charger aussi rapidement qu'une page conçue pour les appareils mobiles uniquement vs un responsive.

J'imagine que l'effet est le même lorsque vous changez d'orientation (de portrait en paysage), cela ne devrait prendre que le temps qu'il faudrait normalement lorsque la page se charge.

Le plus grand effet sur le temps de chargement est la complexité générale du document, des plug-ins, de javascript ou des images chargés, plutôt que de déterminer si une div a une largeur définie en pourcentage ou une taille de pixel fixe.

1
elconejito