Réduire les requêtes HTTP de 1000 images?
https://stackoverflow.com/questions/4543743
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je sais que cette question peut sembler un peu fou, mais je TOUGH que peut-être quelqu'un pourrait venir avec une idée intelligente:
Imaginez que vous avez 1000 images miniatures sur une seule page HTML.
La taille de l'image est d'environ 5-10 kb.
Est-il possible de charger toutes les images dans une seule requête? zip D'une certaine façon toutes les images dans un seul fichier ...
Ou avez-vous d'autres suggestions dans le sujet?
Autres options déjà que je connais:
sprites CSS
charge Lazy
Définir les en-têtes Expirez
images Téléchargements à travers différents noms d'hôte
La solution
Il n'y a que deux autres options que je peux penser donné votre situation:
- Utilisez les « données: » protocole et l'écho d'une version base64 encodée de vos vignettes directement dans la page HTML. Je ne recommanderais pas cela car vous ne pouvez pas alors mettre en cache les images sur le navigateur de l'utilisateur.
- Utilisation de stockage Web HTML5 de stocker toutes les images sous forme d'enregistrements avec les données d'image codées en base64 stockées sous forme de BLOB dans une colonne. Une fois que la base de données a téléchargé sur la machine de l'utilisateur, utiliser Javascript pour parcourir tous les enregistrements et créer les vignettes sur la page en utilisant dynamiquement quelque chose comme jQuery. Avec cette option, vous devrez attendre jusqu'à ce que la base de données complète a été effectuée sur le téléchargement des utilisateurs finaux navigateur, et ils auront besoin d'un navigateur assez moderne.
Je pense que votre meilleur pari est une combinaison de chargement paresseux, la mise en cache avec les en-têtes et expires au service des images de plusieurs noms de domaine.
Si les images peuvent être regroupées logiquement, sprites CSS peut également travailler pour vous, en plus de tout ce qui précède. Par exemple, si vos vignettes sont pour les images téléchargées sur un certain jour ... vous pourriez être en mesure de créer un fichier unique pour chaque jour qui pourraient ensuite être mises en cache sur le navigateur des utilisateurs.
Autres conseils
Ceci est fait en utilisant ce qu'on appelle un sprite CSS; une seule image avec toutes les autres images à l'intérieur, avec la partie particulière qui est recherché dans le code HTML sélectionné par css.
Voir un tutoriel http://css-tricks.com/css-sprites
On dirait que vous voulez quelque chose comme de SPDY
Vous pouvez essayer la commande montage de ImageMagick pour créer une seule image.
