2011-09-12 3 views
0

Est-ce que quelqu'un sait comment les images sont chargées par navigateur? Pour les images en ligne, deux appels à la même image déclenchent-ils deux demandes de serveur ou une seule? Comment les appels ultérieurs à une image téléchargée ont-ils été traités?Optimisation de sprite?

Pour les images CSS, toutes les images sont-elles appelées dans votre fichier CSS lorsque le fichier CSS est appelé ou est-ce lorsque des classes individuelles appelant les images sont utilisées? À titre d'exemple extrême, si j'ai un fichier CSS qui appelle 200 images distinctes mais qu'une seule de ces images est appelée sur le premier chargement de la page, est-ce que les 200 sont appelées ou seulement l'une? Comment le chargement diffère-t-il selon le navigateur?

+0

Changé le titre de ceci comme il a évolué dans une discussion plus sur la façon d'optimiser les sprites. –

Répondre

1

image urls doivent faire un seul coup sur le serveur par page. Pour ce hit d'une page, le navigateur peut supposer que l'image sera inchangée, même si l'image apparaît plusieurs fois sur la page

Pour la page suivante, le navigateur aura tendance à faire un "if-modified-since" demande pour l'image et n'obtient une nouvelle image que si elle a été modifiée depuis cette nuit. Mais encore une fois, il ne le fera qu'une seule fois par page. Une fois que l'image a été téléchargée et mise en cache, vous ne verrez probablement que 200 requêtes get et 304 réponses non modifiées jusqu'à ce que l'image tombe du cache.

+0

Donc pour la deuxième partie de ma question, toutes les images référencées dans le fichier CSS provoquent-elles un coup de serveur ou juste celles être utilisé sur la page actuelle? –

+0

autant que je sache, n'importe quelle référence url() dans css fera que cette URL sera touchée. Peut-être y at-il un navigateur qui optimise les choses en ne récupérant que ceux qui sont réellement utilisés dans la page, mais qui sait. –

+0

La raison pour laquelle je demande est que je voudrais déterminer s'il est préférable d'utiliser un sprite maître ou plusieurs sprites plus petits. Par exemple, si j'ai 10 images que je fais dans un sprite et 5 de ces images ne sont utilisées que sur un tiers de mon site, alors est-il préférable de deux sprites? Si toutes les images dans un fichier CSS sont téléchargées sur le chargement de la page alors je pense que non, mais si seulement les images dans les classes appelées par la page sont téléchargées alors je pense que oui. Pensées? –

1

Vous faites vraiment un appel à chaque image, c'est pourquoi il est conseillé d'utiliser CSS sprites lorsque cela est approprié

+0

Donc, même si l'image est appelée par une classe qui n'est pas utilisée sur la page, elle sera toujours chargée car elle se trouve dans le fichier CSS? –

+0

Et comment sont traités les appels suivants à la même image? Est-ce important que j'appelle le même sprite 20 fois ou devrais-je corder les classes ensemble et appeler seulement le sprite une fois? –

+0

le navigateur n'appelle pas le sprite 20 fois, 1 fois suffit, puisque la prochaine fois il sera déjà chargé –