Javascript Girl
  1. Javascript Girl
  3. Meilleure pratique pour optimiser le chargement javascript
Intereting Posts
Object.defineProperty pour tous les navigateurs? Forme concise de comparer contre plusieurs valeurs Modification du contenu Iframe dans IE – problème de maintien de la sélection de texte Comment gérez-vous vos fichiers Javascript? Quel est le bon moyen de limiter la quantité de commentaires affichés à un utilisateur jusqu'à ce qu'ils choisissent de voir tout? Passer le Javascript de la manière quirks à la norme Comment puis-je désactiver la mise en surbrillance en html ou JS? Désactiver le double clic de la souris en utilisant javascript ou jquery Passer la variable JavaScript à Flask url_for Changer l'img src avec jquery Afficher les options de Hide select en fonction de la liste déroulante précédente de Jquery ou de Javascript Enregistrez et chargez un organigramme sur jsPlumb Pointeurs de fonction dans des objets Trouvez la définition de la fonction JavaScript dans Chrome Rails – créer un lien avec ajax

Meilleure pratique pour optimiser le chargement javascript

J'ai lu quelques articles en ligne sur l'optimisation du chargement javascript. Quelques points clés que j'ai obtenus est de minimiser le nombre de fichiers de script (requêtes http), de minify et d'activer gzip sur le serveur. Actuellement, ce qui est fait de mon côté, c'est que tous les fichiers javascript sont minifiés, et gzip peut être simplement activé.

Partie 1)

Mon problème est que j'ai environ 20 fichiers javascript, il y a un common.js qui a toutes les fonctions principales. En plus, chaque page chargerait au moins un autre fichier qui implémente la fonctionnalité de cette page.

La solution 1 consiste à combiner tous les scripts dans un grand fichier de script et à être chargé une fois pour chaque client, ce qui semble être ce que tout le monde fait. Je suppose que YUI ou JSMin peut être utilisé pour la compression, alors je devrais combiner les fichiers manuellement?

Solution 2, chargement par défaut lorsqu'une fonction requise est nécessaire, je ne sais pas vraiment comment cela fonctionne, mais cela semble être un moyen de le faire, mais nécessite encore plus de requêtes HTTP. J'aimerais entendre des contributions pour cela.

Partie 2)

L'application Web sur laquelle je travaillerais sera déployée sur de nombreux autres ordinateurs, car les javascripts sont assez petits, est-ce une bonne pratique de créer un script qui charge dynamiquement le script le plus récent d'un serveur central, afin que chaque client exécute le script le plus récent ?

Partie 1: Comme vous l'avez dit, il y a deux approches.

  • La solution 1 est valide, et il existe des outils pour le faire, y compris le Compilateur de fermeture de Google . Le problème est dans la plupart des cas, il faut que tous les scripts de votre site soient inclus afin de fonctionner correctement, de sorte que, peu importe ce que votre page pourrait utiliser, elle obtient tout
  • La solution 2 est également valide, mais comme vous l'avez dit, cela n'empêche pas vraiment les multiples demandes HTTP. Mais il est bon qu'il ne charge que ce dont vous avez besoin, lorsque vous en avez besoin et que vous ne créez aucun appel de blocage sur le chargement initial de la page. Head.js est une option qui a été mentionnée, ainsi que Require.js et d'autres.

Partie 2:

  • Il existe des façons de forcer le navigateur à télécharger toujours le dernier fichier javascript, bien que ce type de non-respect des avantages de la mise en cache du navigateur. Une façon courante est d'ajouter une variable get à la fin de l'URL javascript, c'est-à-dire "domain.com/index.js?timestamp=_123123123". Ceci est similaire à ce que fait jQuery lorsque vous désactivez la mise en cache pour ses appels ajax.

Les meilleures pratiques générales sont considérées comme

  1. Fusionner dans autant de fichiers que possible

  2. Minify

  3. Servir gzipé

  4. Servir le plus tard possible (certains peuvent être dans la tête, mais généralement avant ou de manière asynchrone est préféré

Ceci est un conseil général, vous devez le faire et tester pour vous assurer qu'il est juste pour votre cas.

La minimisation des requêtes HTTP est importante, la latence est un tueur de performance …

Vous devez diviser l'optimisation en plusieurs étapes

  1. Optimiser le code source: il existe de bonnes pratiques pour écrire un code JS qui a moins de frais généraux DOM, créant moins de variables et d'éléments DOM en mémoire, boucles efficaces, etc. Ceux-ci ne peuvent généralement pas être optimisés par un compilateur de script.
  2. Minify: ceci comporte deux solutions
    • Fusionner dans un fichier et minimiser. (Utilisez le Compilateur de fermeture de Google, Uglify )
    • Minimiser chaque fichier, puis chargement par défaut. Personnellement, je préfère définir mes modules en utilisant un modèle modulaire AMD . Vous pouvez utiliser un fichier de démarrage pour choisir de compiler dans un fichier ou garder la structure du module et le chargement par défaut, mais chacun des modules est également minifié.
  3. Optimisation du serveur
    • Votre serveur sert-il un javascript gzipé?
    • Essayez d'utiliser <script src='//...' async defer> si possible, si vous avez des dépendances de script, faites attention lorsque vous utilisez Asycn loading. Si vous utilisez le module AMD, cela vous assurera que vos modules dépendants sont chargés à l'avance, et ils ne chargent qu'une fois par page de rafraîchissement.
    • Utilisez un CDN pour servir votre contenu statique, stockez vos images, fichiers, javascript sur un réseau de diffusion de contenu