Comment puis-je réduire les coûts de chargement de grandes bibliothèques JS?


23

Si j'utilise une grande bibliothèque Javascript pour ma page, comment puis-je m'assurer que cela n'empêche pas l'utilisateur d'utiliser le site?

Réponses:


25

Vous pouvez faire 4 choses.

  1. Réduisez votre fichier JS. Cela supprime tous les commentaires et espaces pour réduire sa taille.
  2. Combinez vos fichiers JS sur chaque page afin qu'il n'y ait qu'un seul fichier.
  3. Utilisez un package pour compresser vos fichiers lorsque vous les envoyez. Cela les rendra encore plus petits
  4. Mettez Javascript qui n'est pas requis immédiatement en bas de la page pour qu'il se charge à la fin. Cela permettra à l'utilisateur de voir et d'utiliser la page avant même que le JS ne soit complètement chargé.

Et d'autres personnes ont suggéré:

  • Apache gérera automatiquement la compression (et la mise en cache du contenu compressé), ce qui simplifie considérablement la gestion des fichiers
  • Rendre JavaScript correctement compatible avec le cache apportera de grands avantages.
  • Les domaines génériques (avec plusieurs URI) permettront plus de connexions simultanées. La prélecture n'est pas seulement pour les images /

Il y a plus de choses que vous pouvez faire et de meilleures façons de les faire. Apache gérera automatiquement la compression (et la mise en cache du contenu compressé), ce qui simplifie considérablement la gestion des fichiers. Rendre javascript correctement mis en cache vous apportera de gros avantages. Les domaines génériques (avec plusieurs URI) permettront plus de connexions simultanées. La pré-extraction n'est pas seulement pour les images /
symcbean

21

Si vous utilisez des bibliothèques communes (telles que jQuery, Prototype ou Dojo), vous pouvez décharger le fichier sur Google et les faire servir , cela vous offre plusieurs avantages:

  • Vous n'avez pas à vous soucier de la réduction et de la fermeture éclair, etc.
  • Ce n'est pas votre bande passante
  • Ces fichiers proviennent d'un domaine différent, vous pouvez donc (au moins partiellement) contourner la limite de 2 demandes parallèles par nom d'hôte
  • Si vous êtes chanceux, l'utilisateur a déjà visité un autre site qui a utilisé la même bibliothèque du même fournisseur, il l'a donc déjà dans le cache du navigateur.

Remarque: La version que vous demandez peut avoir un impact important sur les caractéristiques de mise en cache: demander jQuery 1.4.2 vous donnera un fichier qui peut être mis en cache pendant un an, mais 1.4 ne peut être mis en cache que pendant une heure.


1
+ 1 pour CDN et scriptsrc.net pour le rendre encore plus facile;)
Agos

1
Pouvez-vous développer votre «note»? Pourquoi y a-t-il une différence dans le temps de mise en cache?
theycallmemorty

2
@theycallmemorty: Même si je n'ai pas vérifié les documents, je suppose que c'est parce qu'en spécifiant 1.4.2 que vous êtes très précis sur la version que vous voulez, tout en demandant 1.4, vous dites essentiellement "donnez-moi le plus version récente sous 1.4 ", donc ils ne la cachent pas autant.
Zhaph - Ben Duguid

Il convient également de noter que Microsoft met à disposition certaines bibliothèques JS (jQuery et certaines MS spécifiques) sur leur CDN qui prend également en charge https (que de nombreux autres CDN de script ne prennent pas en charge) asp.net/ajaxlibrary/cdn.ashx
Bert Lamb

6

Vous pouvez mettre la bibliothèque entière dans un fichier js et compresser le fichier. Cependant, cela n'a vraiment d'importance que pour le premier chargement d'une page. Après cela, votre fichier js sera mis en cache dans le navigateur, en particulier si vous définissez l'expiration du cache assez longtemps. Par conséquent, tout coup consécutif ne chargera plus votre fichier js.


+1 pour vous pouvez mettre toute la bibliothèque dans un fichier et la compresser. Je n'y ai pas pensé.
Gordon Gustafson

4

En plus des réponses ci-dessus, vous pouvez utiliser le compilateur Google Closure pour compresser et optimiser automatiquement votre JS tout en intégrant avec d'autres bibliothèques tierces (jQuery, YUI, mootools, etc.)


0

Si vous disposez d'un certain nombre d'éléments de page et d'un accès à un domaine distinct, vous pouvez envisager d'héberger tous les fichiers statiques, y compris le gros fichier JS sur le deuxième domaine.

Comme le note Steve Souders dans son blog sur les sites Web de haute performance -

... dans certaines situations, il vaut la peine de prendre un tas de ressources qui sont téléchargées sur un seul domaine et de les répartir sur plusieurs domaines. J'appelle ce partage de domaine. Cela permet de télécharger plus de ressources en parallèle, ce qui réduit le temps de chargement global de la page.

ailleurs, il écrit ..

Les navigateurs ouvrent un nombre limité de connexions par domaine ... Le fractionnement ou le partitionnement des demandes sur deux domaines, par opposition à un domaine, se traduit par une page plus rapide, en particulier dans IE 6 et 7

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.