Introduction de l'article de wulin.com (www.vevb.com): Avantages et inconvénients des sprites CSS.
Pour les avantages et les inconvénients des sprites CSS
En ce qui concerne cette technologie, les plus grands avantages sont les suivants:
1. Réduisez le nombre de demandes HTTP lorsque la page Web se charge. Cette situation semble s'appliquer uniquement aux cas où les ressources doivent être réapprovisionnées du côté serveur, comme le chargement initial. Mais quoi qu'il en soit, il est toujours très utile pour une page Web avec un trafic élevé ou un rechargement fréquent.
2. Lors de la création d'une image d'arrière-plan pour le lien, il peut empêcher le scintillement d'arrière-plan causé par le chargement de l'image d'arrière-plan lorsqu'il a: planer. Je pense personnellement que cela a une certaine importance à améliorer l'expérience utilisateur.
3. Les images sont faciles à gérer. La prémisse est que les photos des coutures ont certaines règles. Comme indiqué dans l'image ci-dessous, il s'agit d'une image de l'arrière-plan du bouton utilisé par tous les sites Web. Cela vous permet de voir intuitivement tous les styles de bouton dans le site Web. (J'aime personnellement épeler des images en fonction de certains attributs de l'image. Une image est une icône ou un arrière-plan BTN ... de cette manière, les images peuvent être gérées par le chemin, et les images avec certaines règles peuvent être suivies, qui sont plus faciles à organiser ensemble. Bien sûr, vous ne choisirez pas également de la structure modulaire: appelez un module et appelez l'image au-dessus. appelé.
CSS Sprites Portée de l'application:
1. L'accélération de la page Web doit être complétée en réduisant le nombre de demandes HTTP.
2. La page Web contient un grand nombre de petites icônes. Ou, certaines icônes sont très polyvalentes.
3. Il y a des images qui doivent être préchargées sur la page Web. Il est principalement lié à l'image d'arrière-plan A et A: en survol. Si les images d'arrière-plan de A et A: survolment sont chargées séparément, la souris de l'utilisateur se déplacera vers un bouton et que l'arrière-plan du bouton disparaîtra soudainement puis apparaîtra, provoquant un flash. Si la couleur du texte du bouton est identique ou similaire à l'arrière-plan, elle sera encore plus embarrassante, ce qui peut faire sentir les gens que le bouton a disparu.
Conditions à remplir
Dans les pages Web, il est préférable d'avoir une règle pour les images qui sont assemblées grâce à cette technologie. Régler la largeur ou la hauteur. Il est préférable de définir la largeur et la hauteur. Les images qui nécessitent des carreaux ne conviennent évidemment pas pour Sprite.
Comme indiqué dans l'image ci-dessus, les boutons sont déterminés par la situation de largeur et de hauteur fixes.
Dans le cas de la largeur fixe, plusieurs petites images peuvent être disposées en parallèle. Lorsque la hauteur est définie, les petites images sont disposées verticalement.
Si l'arrière-plan n'est ni la largeur fixe ni la hauteur fixe, il est facile d'utiliser la technologie CSS Sprites dans le cas de largeur fixe ni de hauteur fixe, il est facile de produire l'état des images qui ne devraient pas apparaître sur la page. Si la hauteur est définie de force, elle sera très défavorable pour la maintenance future.
Résumer
Que cette technologie soit bonne ou mauvaise ne peut pas être généralisée. Cela dépend de la situation spécifique du site Web. Lors de l'analyse, décidez d'abord si vous en avez besoin ou non, et intégrez également de manière approfondie les coûts de développement, les coûts de maintenance et d'autres problèmes. Trouvez un plan qui convient à la situation réelle avant de prendre une décision. Utilisez des sprites dans le temps, et il est recommandé de ne pas placer des images de différentes tailles, alignements et utilisations de manière extrême pour les maintenir. Ces extrêmes peuvent ne pas réduire le nombre de demandes HTTP, mais pose plutôt des dangers cachés pour la maintenance future.