web-dev-qa-db-fra.com

Plusieurs fichiers javascript/css: les meilleures pratiques?

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 problèmes, y compris l'endroit où ils devraient être chargés dans le document. YSlow me dit que les fichiers Javascript devraient être - si possible - inclus à la fin. La fin du corps? Il est mentionné que le délimiteur semble être si elles écrivent le contenu. Tous mes fichiers Javascript sont des fonctions et du code jQuery (tout est prêt quand ready ()), donc ça devrait aller.

Donc, devrais-je inclure un CSS et un fichier Javascript et que ceux-ci incluent le reste? Dois-je concaténer tous mes fichiers en un? Dois-je mettre mes balises Javascript à la toute fin de mon document?

Edit: FWIW oui c'est PHP.

phpjavascriptjqueryhtmlcss
55
cletus

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

Edit: Minify vous permettra également de configurer la demande de manière à pouvoir inclure différents fichiers pour différentes pages. Par exemple, un ensemble principal de fichiers JS avec du code JS personnalisé sur certaines pages ou uniquement les fichiers JS principaux sur d'autres pages.

Pendant le développement, incluez tous les fichiers comme vous le feriez normalement. Lorsque vous vous approcherez du passage en production, réduisez minify et joignez tous les fichiers CSS et JS en une seule requête HTTP. C'est vraiment facile à configurer et à utiliser.

De même, les fichiers CSS doivent être placés en tête et les fichiers JS au bas, car ils peuvent écrire sur votre page et causer des problèmes de délai excessif.

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>

Édition: Vous pouvez également utiliser Cuzillion pour voir comment configurer votre page.

37
Justin Yost

Voici ce que je fais: J'utilise jusqu'à deux fichiers JavaScript et généralement un fichier CSS pour chaque page. Je découvre quels fichiers JS seront communs à toutes mes pages (ou suffisamment d'entre eux pour qu'il soit proche - le fichier contenant jQuery serait un bon candidat), puis je les concaténer et les minimiser avec jsmin-php et puis je cache le fichier combiné. S'il reste des fichiers JS spécifiques à cette seule page, je les concatène, les réduit et les cache également dans un seul fichier. Le premier fichier JS sera appelé sur plusieurs pages, le second uniquement ou peut-être quelques-unes. 

Vous pouvez utiliser le même concept avec CSS si vous préférez avec css-min , même si j’ai l'habitude de n'utiliser qu'un seul fichier pour CSS. Une chose supplémentaire, quand je crée le fichier de cache, je mets un petit code PHP au début du fichier pour le servir en tant que fichier GZipped, qui est en fait celui où vous obtiendrez la plupart de vos économies. de toute façon. Vous voudrez également définir votre en-tête d'expiration afin que le navigateur de l'utilisateur ait également une meilleure chance de mettre en cache le fichier. Je crois que vous pouvez également activer GZipping via Apache.

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

4
VirtuosiMedia

Je ne recommanderais pas l'utilisation d'une solution basée sur JavaScript (telle que PHP Minify) pour inclure votre css car votre page deviendrait inutilisable si le visiteur avait désactivé javascript.

2
jeroen

Vous n'avez pas dit explicitement que vous avez accès à une solution côté serveur, mais en supposant que ce soit le cas, j'ai toujours opté pour une méthode impliquant d'utiliser PHP pour effectuer les opérations suivantes:

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 de code 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 des fonctionnalités précises dont j'ai besoin, je transmets simplement mes exigences sous forme de chaîne de requête ( jquery.js.php? r = core, effets ). Je fais exactement la même chose pour mes exigences CSS si elles sont jamais ramifiées.

2
Hexagon Theory

L'idée de minifier et de combiner les fichiers est excellente.

Je fais quelque chose de similaire sur mes sites mais pour faciliter le développement, je suggère un code qui ressemble à ceci:

if (evironment == production) {
  echo "<style>@import(/Styles/Combined.css);</style>"
} else {
  echo "<style>@import(/Styles/File1.css);</style>"
  echo "<style>@import(/Styles/File2.css);</style>"
}

Cela devrait vous permettre de garder vos fichiers séparés pendant le développement pour une gestion facile et d'utiliser le fichier combiné pendant le déploiement pour un chargement plus rapide des pages. Cela suppose que vous ayez la possibilité de combiner les fichiers et de modifier les variables dans le cadre de votre processus de déploiement.

Envisagez certainement d'inclure votre js en bas et votre css en haut, conformément aux recommandations de YUI, car le fait de garder le JS bas a un effet tangible sur l'apparence du reste de la page et se sent beaucoup plus rapidement.

0
mjallday

J'ai aussi tendance à copier + coller tous mes plugins jquery dans un seul fichier: jquery.plugins.js puis un lien vers

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">

pour la bibliothèque réelle jQuery.

0
Birk