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

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?

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 /

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.

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.

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.)

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