Javascript Girl
  1. Javascript Girl
  3. Mettre javascript et css en ligne dans un seul fichier html minifié pour améliorer les performances?
Intereting Posts
Cliquez sur une entrée ou un bouton désactivé Phonegap prend-il en charge WebRTC? Effets de survol sur des polygones irréguliers en CSS Comment insérer des lignes de table et des colonnes avec un tableau 2d Virgule séparée séparée par e-mail en javascript seulement Node.js avec Handlebars.js sur le serveur et le client Alert Box dans IE Tester Exception de soumission d'événements envoyée par un serveur flasque Comment puis-je arrêter un processeur de script Web Audio et effacer le tampon? Voulez-vous rafraîchir un div après avoir soumis le formulaire? Comment afficher la boîte lumineuse après la finition vidéo? BlobBuilder détruit les données binaires Enregistrement des données utilisateur pour le plan thermique avec JavaScript Comment puis-je multiplier chaque membre d'un tableau par un scalaire en javascript? Problème de raclage javascript généré du contenu avec Selenium et Python

Mettre javascript et css en ligne dans un seul fichier html minifié pour améliorer les performances?

Un site Web typique se compose d'un fichier index.html et d'un tas de fichiers javascript et css. Pour améliorer les performances du site, on peut:

  • Minimisez les fichiers javascript et css, afin de réduire la taille des fichiers.
  • Concaténer les fichiers javascript dans un fichier et similaire pour les fichiers css, pour réduire le nombre de requêtes au serveur. Pour les bibliothèques couramment utilisées (et partagées) comme jquery, il est logique de les laisser externes, ce qui permet au navigateur de cacher la bibliothèque et de la réutiliser dans différentes applications Web.

Je me demande s'il est logique de mettre le javascript concaténé et le fichier css en ligne sur un fichier html unique, ce qui réduira encore le nombre de demandes. Est-ce que cela améliorera les performances de votre site? Ou sera-t-il inversé, ce qui rend impossible au navigateur de mettre en cache tout?

Concrètement, vos fichiers CSS et JS dans un seul fichier réduiront le nombre de requêtes et le chargeront plus rapidement. Mais, comme on l'a commenté, cela n'aura aucun sens à moins d'avoir un site d'une page et le temps de chargement de cette page est très critique. Vous êtes donc mieux de séparer CSS de Javascript à mon avis.

Voici un livre où vous pouvez en apprendre plus sur le sujet:

Sites Web haute performance

Ce n'est pas une bonne idée pour les raisons suivantes:

  1. Vous ne profiterez pas du cache

  2. Vous allez charger des ressources inutiles dans toutes vos pages

  3. Vous allez avoir de la difficulté à développer votre site web en raison de gros fichiers avec des branches de code non liées

  4. Si vous travaillez dans une équipe, vous devrez toujours travailler avec vos coéquipiers sur les mêmes fichiers, ce qui signifie que vous aurez beaucoup de conflits de fusion.

Cela réduirait le nombre de requêtes, mais cela ne signifierait pas non plus la mise en cache de celles utilisées sur d'autres pages. Pensez à définir un fichier externe comme une façon de dire au navigateur "et cette section du site est réutilisable". Vous allez prendre cette capacité et le CSS et le JS seront chargés. Comme les jackwanders, c'est génial si vous avez une seule page.

Ces outils peuvent vous aider. Transforme votre page Web en un seul fichier HTML avec tout inlined – parfait pour appcache manifeste sur les appareils mobiles que vous souhaitez réduire ces requêtes http.

https://github.com/remy/inliner

Vous pouvez avoir un CSS unique pour toutes vos pages et, puisqu'il sera mis en cache, les pages suivantes le référeront du cache sans envoyer de demande supplémentaire.

Cependant, mettre tous les fichiers Javascript dans un seul est contextuel. Très probablement, vous pouvez utiliser des bibliothèques comme jQuery et les plugins pertinents. Ce «pourrait» lancer des problèmes contradictoires entre les plugins. Donc, avant de l'essayer tout à la fois, essayez de fusionner quelques fichiers en même temps et vérifiez si l'erreur apparaît ou non.