Fichiers javascript/css multiples : quelles sont les bonnes pratiques ?

Question

J'ai maintenant environ 7 fichiers Javascript (grâce à divers plugins jQuery) et 4-5 fichiers CSS. Je suis curieux de savoir quelle est la meilleure pratique pour traiter ces fichiers, y compris l'endroit du document où ils doivent être chargés. YSlow me dit que les fichiers Javascript devraient être - si possible - inclus à la fin. A la fin du corps du texte ? Il mentionne que le critère semble être de savoir s'ils écrivent du contenu. Tous mes fichiers Javascript sont des fonctions et du code jQuery (tous exécutés lorsque ready()), donc cela devrait aller.

Dois-je donc inclure un fichier CSS et un fichier Javascript et faire en sorte qu'ils incluent le reste ? Dois-je concaténer tous mes fichiers en un seul ? Dois-je placer mes balises Javascript à la toute fin de mon document ?

Edita: FWIW oui, il s'agit de PHP.

Answer 1

Je suggère d'utiliser PHP Minify qui vous permet de créer une requête HTTP unique pour un groupe de fichiers JS ou CSS. Minify gère également le GZipping, la compression et les en-têtes HTTP pour la mise en cache côté client.

Edit : Minify vous permet également de configurer la requête de manière à ce que vous puissiez inclure différents fichiers pour différentes pages. Par exemple, un ensemble de fichiers JS de base avec du code JS personnalisé sur certaines pages ou seulement les fichiers JS de base sur d'autres pages.

Pendant le développement, incluez tous les fichiers comme vous le feriez normalement, puis, lorsque vous vous rapprochez du passage à la production, exécutez minify et réunissez tous les fichiers CSS et JS en une seule requête HTTP. C'est vraiment facile à mettre en place et à utiliser.

Par ailleurs, les fichiers CSS doivent être placés dans l'en-tête et les fichiers JS servis en bas de page, car les fichiers JS peuvent écrire dans votre page et causer d'énormes problèmes de dépassement de temps.

Voici comment inclure vos fichiers JS :

</div> <!-- Closing Footer Div -->
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
</body>
</html>

Edit : Vous pouvez également utiliser Cuzillion pour voir comment votre page doit être configurée.

Answer 2

Voici ce que je fais : J'utilise jusqu'à deux fichiers JavaScript et généralement un fichier CSS pour chaque page. Je détermine quels fichiers JS seront communs à toutes mes pages (ou suffisamment pour que ce soit proche - le fichier contenant jQuery serait un bon candidat), puis je les concatène et les minifie à l'aide de jsmin-php puis je mets en cache le fichier combiné. S'il reste des fichiers JS spécifiques à cette seule page, je les concatène, les minifie et les mets en cache dans un seul fichier également. Le premier fichier JS sera appelé sur un certain nombre de pages, le second uniquement sur cette page ou sur quelques autres.

Vous pouvez utiliser le même concept avec CSS si vous le souhaitez avec css-min Bien que je n'utilise généralement qu'un seul fichier pour le CSS. En outre, lorsque je crée le fichier cache, j'insère un petit code PHP au début du fichier pour le servir en tant que fichier GZippé, ce qui est en fait l'endroit où vous ferez le plus d'économies de toute façon. Vous devez également définir votre en-tête d'expiration pour que le navigateur de l'utilisateur ait plus de chances de mettre le fichier en cache. Je crois que vous pouvez également activer GZipping via Apache.

Pour la mise en cache, je vérifie si l'heure de création du fichier est antérieure à la durée que j'ai définie. Si c'est le cas, je recrée le fichier cache et je le sers, sinon je récupère le fichier cache existant.

Answer 3

Il est probablement utile de mentionner que j'ai écrit des tutoriels sur les meilleures pratiques en la matière : La dynamisation de Javascript en PHP y La surcharge des CSS en PHP . Ils couvrent les questions de minification, de gzippage et de mise en cache.

Answer 4

Vous n'avez pas dit explicitement que vous aviez accès à une solution côté serveur, mais en supposant que ce soit le cas, j'ai toujours opté pour une méthode impliquant l'utilisation de PHP pour faire ce qui suit :

jquery.js.php :

<?php
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata');
foreach($jquery as $file)
 {
echo file_get_contents('jquery.' . $file . '.js');
 }
?>

Avec l'extrait ci-dessus en place, j'appelle le fichier comme je le ferais normalement :

<script type="text/javascript" src="jquery.js.php"></script>

et ensuite, si je suis conscient de la fonctionnalité précise dont j'ai besoin, je transmets mes exigences sous la forme d'une chaîne de requête ( jquery.js.php?r=core,effects ). Je fais exactement la même chose pour mes besoins en CSS s'ils sont aussi ramifiés.

Answer 5

Je ne recommande pas l'utilisation d'une solution basée sur le javascript (comme PHP Minify) pour inclure vos css car votre page deviendra inutilisable si le visiteur a désactivé le javascript.