J'ai donc été à la recherche à la facebook HTML avec firebug, et je me trouvai sur cette image et est venu à la conclusion que facebook utilise cette grande image (avec délicate, à l'image de positionnement à code) plutôt que de nombreuses petites pour ses éléments graphiques. Est-ce plus efficace que de stocker de nombreuses petites images?
Quelqu'un peut-il donner des indices quant à pourquoi facebook de le faire.
Ceux-ci sont appelés les sprites CSS, et oui, ils sont plus efficaces - l'utilisateur n'a qu'à télécharger un fichier, ce qui réduit le nombre de requêtes HTTP pour charger la page. Voir cette page pour plus d'info.
La théorie derrière cela est expliqué ici: http://css-tricks.com/css-sprites/, ont également un coup d'oeil ici, comme il le souligne pourquoi avez-vous vraiment besoin d'une plus grande image. J'ai aussi dire que tout l'article est intéressant :)
Le problème avec le pro-point de vue des performances, c'est qu'il semble toujours à présenter le "Pourquoi" (performance), souvent sans le "Comment", et jamais "Pourquoi Pas".
Les Sprites CSS n' ont un impact positif sur la performance, pour des raisons que d'autres affiches ici ont disparu en détail. Cependant, ils ont un inconvénient: la maintenabilité; suppression, de la modification, et en particulier le redimensionnement d'images devient de plus en plus difficile, surtout à cause des modifications qui doivent être apportées à la background-position criblés de la feuille de style le long de chaque changement de la taille d'un sprite, ou à la forme de la carte.
Je pense que c'est un point de vue minoritaire, mais je crois fermement que la maintenabilité des préoccupations devraient l'emporter sur la problématique de la performance dans la grande majorité des cas. Si la performance est nécessaire, puis aller de l'avant, mais être conscients des coûts.
Cela dit, l'impact sur les performances est énorme, en particulier lorsque vous utilisez des survols et veulent éviter que l'effet que vous obtenez lorsque vous mouseover une image puis le navigateur va demander le renouvellement. Il convient de revoir vos images dans une image-objet de la carte une fois que vos besoins sont installés - en particulier si votre site va être sous trafic lourd (et certainement les grands exemples de gens ont été en tirant sur - facebook, amazon, yahoo - tout ajustement de profil).
Il ya quelques cas où vous pouvez utiliser avec pratiquement aucun coût. Le temps que vous êtes de découpage d'une image, à l'aide d'une seule image et background-position des balises est probablement moins cher. De tout temps, vous avez un ensemble de icônes - surtout si elles sont de taille uniforme et peu susceptible de changer. De Plus, bien sûr, en tout temps, lorsque la performance est vraiment important, et vous avez le budget pour couvrir les coûts d'entretien.
Si possible, utilisez un outil et d'un document de votre utilisation de celui-ci afin que celui qui doit maintenir vos sprites sait à ce sujet. http://csssprites.org/ est le seul outil que j'ai regardé en détail, mais http://spriteme.org/ regarde sérieusement génial.
Depuis que les autres utilisateurs ont répondu à cette question, déjà, voici comment le faire, et une autre façon est d'ici.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
