Ordre de chargement externe des fichiers CSS et JavaScript

Question

J'ai une application tierce qui charge de nombreux fichiers css et javascript, et je veux maintenant optimiser cela en concaténant tous les javascripts en un seul fichier, compressé par le yuicompressor, mais. .. quand nous avons un mélange comme:

<script type="text/javascript" src="script1.js"></script> 
<script type="text/javascript" src="script2.js"></script> 
<link rel="stylesheet" href="style1.css" type="text/css" /> 
<script type="text/javascript" src="script3.js"></script> 
<script type="text/javascript" src="script4.js"></script> 

Est-ce que ça fait qu'il y a un CSS au milieu ici? Dois-je concaténer et yuicompress les 4 javascripts et les charger avant le CSS ou après?

Answer 1

Cela ne devrait pas avoir d'importance.

Answer 2

Cela n'a pas d'importance, bien que si le chargement prenne du temps, l'utilisateur peut voir sa page changer d'apparence et se demander pourquoi. Je mettrais les fichiers CSS en premier lieu pour avoir les définitions de style en place avant toute manipulation DOM, probablement en minimisant la modification visible lors du chargement de la page, mais cela n'a pas vraiment d'importance à la fin.

Answer 3

Cela dépend. Si tout le JS ne fonctionne que sur DOM, la commande n'est pas importante. Cependant, s'il y a un javascript en ligne qui modifie le style CSS des éléments DOM, alors vous aurez des problèmes. Plus pratique- ment, vous devriez probablement mettre le CSS en premier afin que l'utilisateur ait moins de temps pour faire l'expérience d'un contenu non stylé.

Answer 4

Check out Yahoo's Best Practices for Speeding Up Your Web Site, ils recommandent de charger votre css d'abord (de préférence dans l'en-tête), et votre js dernier (après tout le contenu dans le corps). Google's best practices a également recommandé le chargement d'abord CSS.