La référence au fichier JavaScript de Modernizr doit-elle se trouver dans l'en-tête de la page ? J'essaie toujours de placer tous les scripts en bas de la page et j'aimerais préserver cela. Et si elle doit être dans l'en-tête, pourquoi ?
Réponses
Trop de publicités?
Si vous voulez Modernizr à télécharger et à exécuter le plus rapidement possible pour éviter une FOUC et le mettre dans le <head>
De leur guide d'installation :
Abandonnez les balises script dans la section
<head>de votre HTML. Pour une meilleure performance, vous devriez les faire suivre de vos références de la feuille de style. La raison pour laquelle nous recommandons de placer Modernizr dans l'en-tête tête est double : le Shiv HTML5 (qui permet de active les éléments HTML5 dans IE) doit s'exécuter avant le<body>et si vous utilisez l'une des classes CSS que Modernizr ajoute, vous voudrez bien éviter un FOUC.
Chris Adams
Points
2356
Je dirais que non : chaque script que vous placez dans l'espace de travail de l'utilisateur. <head> bloquera le rendu et l'exécution ultérieure du script. La seule chose que Modernizr fait qui doit se produisent dans le <head> est la valeur intégrée html5shiv qui pirate le support des balises HTML5 dans Internet Explorer 8 et antérieur.
I Je l'ai testé hier et j'ai constaté que cela était assez significatif - sur le site sur lequel je travaille, qui est déjà assez bien optimisé, l'ajout de ce seul script à l'en-tête a retardé mon temps de chargement de ~100ms dans IE9, qui ne bénéficie même pas du shivage !
Puisque environ 90% de mon trafic provient de navigateurs qui supportent nativement le HTML5 et que je n'ai pas de CSS de base qui nécessite les classes modernizr pour s'afficher correctement lors du rendu initial, j'utilise cette approche qui place le html5shiv dans un commentaire conditionnel et charge modernizr sans le shim intégré :
<html>
<head>
…
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
…
<script src="modernizr.custom.min.js"></script>
</body>
</html>
David Murdoch
Points
28521
Paul Irish suggère maintenant que pour plus de 75 % des sites, il n'y a aucun avantage à placer Modernizr dans l'arborescence du site. head .
Déplacer Modernizr vers le bas
Il y a plus de possibilités d'introduire des situations inattendues, mais il est bien mieux pour l'utilisateur de ne pas avoir de scripts dans la tête du tout.
Je parie que >75% des sites n'en ont pas besoin dans la tête. Je préfère changer ce défaut et éduquer les 25% plutôt que de voir que nous ralentissons tous ces sites.
Russell
Points
51
Que diriez-vous d'utiliser les conditionnels IE d'une manière légèrement différente ? Que pensez-vous de cette solution ?
Au sein de la <head></head> tags :
<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>Avant la fin de l'année </body> étiquette :
<!--[if gt IE 8]><!-->
<script src="/path/to/modernizr.js"></script>
<!--<![endif]-->
</body>Ainsi, Modernizr se chargera dans l'en-tête pour IE8 et les versions inférieures, et se chargera avant le corps pour tous les autres navigateurs.
Une discussion ouverte sur les avantages et les inconvénients est bienvenue dans les commentaires.
