Quel est le meilleur pour le temps de chargement de JavaScript: Compresser tous dans un gros fichier ou charger tous de manière asynchrone?

Question

Une question simple que je ne suis pas sûr si elle a une réponse courte!

Description de
J'ai des fichiers de JavaScript pour être chargés dans un site Web, voici quelques notes sur les:

• Ils sont tous vient du même domaine (pas de chargement de domaine croix nécessaire)
• Ils sont identiques autour du site.
• Il existe plusieurs fichiers, comme jQuery, et 5 autres plugins auxquels s'ajoute mon propre script d'application.
• Leur taille tout comprimé = 224KB, (je combine tous les fichiers dans un seul fichier puis je les compresser à la fois en utilisant YUI Compressor 2

Problème
J'ai entendu dire que 224KB n'est pas idéal pour être dans un fichier! et il devrait être divisé en plusieurs fichiers avec un maximum de 44 Ko chacun. Je ne me souviens pas quand j'ai entendu cela et je ne sais pas si c'est efficace de le diviser en plusieurs fichiers, mais c'est vrai que 224 Ko prend beaucoup de temps à charger pour la première fois, considérez que le site Web est chargé avec des images et css bien sûr

J'ai réduit au minimum la nécessité pour le début de chargement de fichier JavaScript et le mettre sur le fond, jusqu'à c'est un bon progrès, mais je dois le charger assynchounosly avec le code HTML pour gagner du temps Source et decission faire est:

Oui ou non?
Conservez-le dans un gros fichier compressé? ou pour les diviser en plusieurs fichiers compressés et chargés de manière asynchrone (je suis conscient de gérer les problèmes liés à la dépendance)?

Answer 1

Cela dépend du site et de l'importance du premier temps de chargement. Quoi qu'il en soit, je chargerais probablement JQuery et des trucs comme ça à partir d'un CDN public. Un gros avantage est qu'il peut déjà être mis en cache même s'il n'a jamais été sur votre site.

http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

L'équipe Cappuccino est un grand partisan d'un fichier - ils font un framework javascript. Les applications faites avec leur outil devraient avoir du temps de chargement.

http://cappuccino.org/discuss/2009/11/11/just-one-file-with-cappuccino-0-8/

Answer 2

Il n'y a pas de réponse précise à cette question. Cela dépend beaucoup de comment et quand vous utilisez ces fichiers.

Généralement, vous ne voulez télécharger que des fichiers JS sur pageload qui sont universellement requis par l'application Web. Les fichiers JS spécifiques à un module ou à une page ne doivent pas être compressés dans le téléchargement JS principal et devraient idéalement être chargés à la demande. En outre, cette question n'est valide que si vous êtes préoccupé par l'expérience utilisateur pour les utilisateurs débutants. Les fichiers JS seraient mis en cache de toute façon pour chaque autre visite.

Answer 3

Un autre avantage de JQuery de chargement et connexes d'un CDN publique serait l'augmentation des demandes de destination. Je crois que le client est limité à 2 requêtes par domaine, donc en chargeant jquery de google, et un plugin de jquery, et votre code d'application personnalisé de votre propre domaine, le navigateur peut les exécuter simultanément plutôt que d'attendre les deux premiers émettre une troisième demande.

Je suppose que cela ajoute une autre amélioration des performances sur un fichier volumineux. Même si vous divisez simplement ce fichier en 2, il pourrait être récupéré avec 2 demandes simultanées du navigateur, ce qui pourrait améliorer le temps de chargement.

Answer 4

Voici ce que nous avons fait pour rendre notre application web rapide.

Les principaux fichiers JS et CSS sont compressés et mis en ligne avec le balisage HTML.
Les espaces blancs du HTML sont supprimés et les images sont converties en data:image/png par un script shell.

La taille est ~ 400kb mais mise en cache et gzippée.
La version mobile de l'application Web est la même mais à ~ 250kb. Cela signifie que l'application entière est prête à être exécutée, comme un exécutable, dans un seul appel http. Puis un deuxième appel http obtient les données (JSON), et nous utilisons PURE pour le rendre en HTML en utilisant les marquages ​​existants dans la page comme modèles.

L'application est divisée en modules, seuls les modules communs sont préchargés de cette façon.
Les autres arrivent à la demande de l'utilisateur.