javascript - Le front-end de nombreuses pages Web est une image entière découpée avec de nombreux petits éléments tels que des icônes de boutons, etc. Pourquoi cela ? Le développement mobile fonctionnera-t-il également de cette manière ?

Question

Par exemple, cette icône avec la certification v sur Weibo

Pourquoi ne pas laisser l'interface utilisateur être divisée en un lot de fichiers au lieu de les recadrer lors de leur utilisation ?
Au fait, est-ce que cela se fera sur téléphone mobile en développement réel ?

Answer 1

La ressource est petite en taille et grande en quantité. Si elle est divisée en un lot de fichiers, un grand nombre de requêtes http sera générée lors du chargement de la page Web. L'établissement de requêtes http consomme les performances de l'appareil et la bande passante du réseau.

Plutôt que de dire pourquoi il n'est pas divisé en un lot de fichiers, il vaut mieux intégrer des petits fichiers et les publier ensemble afin d'améliorer de nouvelles fonctionnalités.

Answer 2

Vous pouvez rechercher des mots-clés tels que des images de sprite, des images de sprite, des images de sprite

Answer 3

Il s'agit de l'effet sprite CSS.
Principe : Fusionnez les petites icônes et les images d'arrière-plan en une seule image, puis utilisez le positionnement d'arrière-plan CSS pour afficher la partie de l'image qui doit être affichée
Objectif : Réduisez le temps. il faut pour charger les images de la page Web Le nombre de requêtes adressées au serveur augmente la vitesse de chargement de la page
Problème : Lors du premier chargement, la consommation de mémoire est relativement importante et des images ou icônes inutiles seront également chargées. dans la mémoire.

---

Les effets de sprite ne sont généralement pas utilisés sur les téléphones mobiles.
La raison en est que la mémoire du téléphone mobile n'est pas riche et que les ressources des téléphones mobiles sont généralement chargées dans la mémoire lorsqu'elles sont utilisées (chargement paresseux), et l'utilisation de sprites améliorera l'image. maintenance Le coût est que davantage d'opérations CSS sont nécessaires pour afficher l'image spécifiée lors de l'utilisation d'images. En même temps, sous iOS, l'utilisation d'images sprites augmente également la difficulté d'adapter les images aux différents téléphones mobiles .

.