Grand nombre de table Html avec la performance des images

Question

Je construis une page avec un afficheur de type répéteur où il y a des centaines de conteneurs div et chacun est constitué d'une table. Quelque chose comme le suivant, et comme plus de 150 d'entre eux dans une page.

Ma question est comment la page fonctionnerait-elle? Je vois une attente de 1,5 minute d'envoyer la demande à la page est entièrement chargée.

la répondu taille documents (en outil de développement de chrome) est 300KB ish images est d'environ 1,5 Mo

cependant le temps qu'il faut pour obtenir les documents complets de retour est de 1,3 minutes pour charger les images est 8 secondes.

<div style="width:100px; float:left;"> 
<table> 
    <tbody> 
    <tr> 
    <td><img src="server/getImage.aspx?id=xxxxxx"/></td> 
    <td><img src="server/getImage.aspx?id=xxxxxx"/></td> 
    </tr> 
    <tr> 
    <td><img src="server/getImage.aspx?id=xxxxxx"/></td> 
    <td><img src="server/getImage.aspx?id=xxxxxx"/></td> 
    </tr> 
    </tbody> 
</table> 
</div> 

Answer 1

1. Définissez les dimensions de l'image dans le balisage ou CSS. Si vous ne le faites pas, il y aura une refusion de page chaque fois qu'une nouvelle image commence à s'afficher.

   • Remplacez vos tables par DIVs. Les tables ajoutent des éléments inutiles au DOM et les calculs flow/dimsensions sont beaucoup plus compliqués que les simples DIVs (ou tout élément de niveau bloc)

   • Demander au serveur de générer + stocker des vignettes (tout ce qui est inférieur à 1,5 Mo peut être considéré une vignette). Lorsque l'utilisateur survole, clique, fait défiler ou prend d'autres mesures ... alors vous affichez la version en pleine résolution.

   • Paginate. AUCUNE RAISON d'afficher 150 images par page (au moins lors du premier chargement de la page). Si vous paginez déjà, abaissez votre "limite" à quelque chose de plus gérable.

   • Utilisez des espaces réservés pour toutes les images qui apparaîtraient «sous le pli» (en dehors de la partie visible de la fenêtre). Il existe un certain nombre de bibliothèques JS qui permuteront le code SRC pour un autre attribut et rempliront le SRC avec un petit espace réservé. Ensuite, lorsque vous faites défiler les images dans la vue, les espaces réservés sont remplacés par des URL d'image réelles.

   jQuery: http://www.appelsiini.net/projects/lazyload

   YUI2: http://developer.yahoo.com/yui/imageloader/

   YUI3: http://developer.yahoo.com/yui/3/imageloader/

   • images de charge dans le temps d'inactivité (je suppose qu'il ya une raison que vous chargez 150 images haute résolution).

En savoir des produits existants:

http://images.google.com

est un bon exemple. Sur pageload, il y a quelques dizaines d'images. Au fur et à mesure que vous faites défiler vers le bas, il se pré-récupère avant de les voir dans la fenêtre d'affichage (en gros morceaux d'environ 50).

Answer 2

En général, vous ne voulez pas faire ce genre de chose parce que l'expérience utilisateur en souffre, car vous trouvez.

Trouvez un moyen de retravailler le flux de production afin d'afficher moins de dom et de charger moins de choses.

En outre, peut-être certaines choses peuvent être mises en cache côté client?

Answer 3

Chaque requête a une surcharge, de sorte que la performance de votre page souffrira du nombre d'éléments à charger. La meilleure solution serait de réduire le nombre de charges nécessaires, vous pourriez envisager d'utiliser des sprites css pour réduire le nombre réel d'images qui doivent être chargées.

Il peut être utile d'activer les connexions persistantes sur votre serveur Web, car cela réduirait le nombre de connexions à négocier. Gardez également à l'esprit que de nombreux systèmes imposent une limite au nombre de connexions simultanées pouvant être effectuées vers un hôte. Il se peut donc que vous ne téléchargiez que deux de ces images à la fois.

Il peut également être possible de réorganiser votre application afin que ces nombreuses images ne soient pas nécessaires, mais nous aurions besoin d'en savoir plus sur l'application. En général, cependant, je vous encourage à mettre en cache ces images, car essayer de générer autant d'images sur chaque chargement de pages va tuer votre serveur (s). Je vous encourage également à utiliser Firebug (l'interface est un peu plus facile que celle de l'outil Chrome [IMHO]), afin de mieux comprendre le temps passé à chaque étape du processus de chargement.