2010-10-18 7 views
1

Je suis intéressé de connaître les possibilités de réduire les requêtes http sur les serveurs en envoyant différents types de contenus dans un seul fichier compressé, puis de décompresser sur le navigateur du client et de placer le contenu (images, css, js) où il devrait être.Décompression du contenu dans le navigateur côté client

J'ai lu quelque part que firefox travaille sur le plan de donner de telles fonctionnalités dans les versions à venir, mais cela n'a pas encore été fait et ce ne serait pas une version standard.

Est-ce que vous proposerez une solution pour cela? Est-ce que Flash peut être utilisé pour décompresser les fichiers compressés du côté client pour une utilisation ultérieure?

Merci

Répondre

2

Nous avons fait plus ou moins ce que vous décrivez sur notre site et sont extrêmement satisfaits du temps de réponse.

Les fichiers originaux sont tous séparés (HTML, CSS, JS, images) et nous développons sur eux.
Ensuite, lors du passage à la production, nous avons un script shell qui:

  • utilisation du compresseur YUI pour compresser CSS et JS
  • toutes les images sont lues et converties en data:image/png;base64,...
  • tous les espaces vides et les commentaires sont retirés de le HTML
  • toutes ces ressources sont mises en ligne dans le code HTML

la page est ~ 300kb et le plus souvent mis en cache.
Le serveur gzip, la taille réelle voyageant sur le réseau est alors inférieure.
Nous n'utilisons aucune compression supplémentaire.

Et puis il y a un deuxième appel pour obtenir les données (JSON pour nous) et commencer à le rendre côté client.

+0

Et vous utilisez des méthodes DOM pour créer des nœuds pour le rendu HTML ou le réglage innerHTML? – Volatil3

+1

Nous utilisons http://beebole.com/pure pour rendre tout le JSON en HTML. PURE utilise 'innerHTML'. J'ai essayé le DOM en premier mais c'était très lent, alors que 'innerHTML' est rapide sur tous les navigateurs. Ceci est particulièrement frappant sur les navigateurs mobiles. – Mic

+0

et le codage base64 est fait à l'exécution ou toutes les images ont été converties sous forme codée? – Volatil3

2

je devais lire quelques fois votre question avant que je sois ce que vous demandiez. Il semble que vous vouliez combiner tous les éléments de votre site dans un seul fichier téléchargeable.

Je suis assez confiant en disant que je ne crois pas que cela soit possible ou souhaitable. Tout d'abord, vous déclarez que vous avez entendu dire que Firefox pourrait prendre en charge cette fonctionnalité. Je n'en ai pas entendu parler, mais même si c'est le cas, comment pourrez-vous utiliser cette fonctionnalité tout en prenant en charge d'autres navigateurs? Mais même si vous pouvez le faire, vous avez étiqueté cela comme «optimisation des performances», au motif que vous allez enregistrer quelques requêtes http. Mais dans votre effort pour sauvegarder les requêtes http pour accélérer les choses, vous devez être prudent afin de ne pas ralentir les choses. La combinaison de tous les fichiers peut vous réduire à une requête http, mais votre site peut alors se charger plus lentement car tout devrait être chargé avant que tout ne soit prêt pour l'affichage (contrairement à un chargement de page normal où le chargement de votre page peut prendre du temps mais au moins une partie peut être prête à être affichée assez rapidement). Ce que vous pouvez faire maintenant, et qui sera utile pour réduire les requêtes http, est de combiner vos feuilles de style en un seul CSS, vos scripts en un seul fichier JS, et des groupes d'images connexes en fichiers image uniques (google CSS Sprites pour plus d'informations sur cette technique).

Même alors, vous devez faire attention aux fichiers que vous combinez - le but de l'exercice est de réduire les requêtes http, vous devez donc utiliser la mise en cache, sinon vous finirez par empirer les choses plutôt que de les améliorer. Les navigateurs ne peuvent mettre en cache que des fichiers identiques sur plusieurs pages. Vous ne devez donc combiner que les fichiers qui ne changeront pas entre les chargements de page. Ainsi, par exemple, ne combinez que les fichiers Javascript qui sont utilisés sur toutes les pages de votre site.

Mon dernier commentaire serait de réitérer ce que j'ai déjà dit: Soyez prudent sur la sur-optimisation au point que vous finissez par ralentir les choses.

+0

Je ne suis pas d'accord avec l'impossibilité et l'opportunité que vous défendez. Nous le faisons sur notre application web, et ne le regrette pas. – Mic

+0

@Mic: il serait intéressant si vous développez votre implémentation avec le monde extérieur – Volatil3

+0

Jetez un oeil à la démo à http://beebole-apps.com?demo – Mic