web-dev-qa-db-fra.com

faut-il placer le fichier Modernizr en tête?

La référence au fichier JavaScript Modernizr doit-elle figurer en tête de page? J'essaie toujours de placer tous les scripts en bas de la page et je voudrais conserver cela. Et si ça doit être dans la tête, pourquoi?

javascriptmodernizrhtml-head
61
amateur

Si vous souhaitez Modernizr télécharger et exécuter dès que possible pour éviter un FOUC , placez-le dans le <head>

De leur guide d'installation :

Déposez les balises de script dans le <head> de votre code HTML. Pour de meilleures performances, vous devez les faire suivre vos références de feuille de style. La raison pour laquelle nous recommandons de placer Modernizr dans la tête est double: le HTML5 Shiv (qui active les éléments HTML5 dans IE) doit s'exécuter avant le <body>, et si vous utilisez l'une des classes CSS ajoutées par Modernizr, vous souhaiterez empêcher un FOUC.

71
Wesley Murch

Je dirais non: chaque script que vous placez dans le <head> bloquera le rendu et l'exécution du script. La seule chose que Modernizr fait qui doit se produire dans le <head> est l'intégré html5shiv , qui pirate la prise en charge des balises HTML5 dans Internet Explorer 8 et versions antérieures.

J'ai je testais cela hier et j'ai trouvé cela assez important - sur le site sur lequel je travaille, qui est déjà assez bien optimisé, l'ajout d'un seul script à la tête a retardé mon temps de chargement de ~ 100 ms IE9, qui ne bénéficie même pas du shiv!

Étant donné qu'environ 90% de mon trafic provient de navigateurs qui prennent en charge nativement HTML5 et je n'ai pas de CSS de base qui nécessite que les classes modernizr s'affichent correctement sur le rendu initial, j'utilise cette approche qui place le html5shiv dans un commentaire conditionnel et charge modernizr sans la cale intégrée:

<html>
    <head>
        …
        <!--[if lt IE 9]>
            <script src="html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        …
        <script src="modernizr.custom.min.js"></script>
    </body>
</html>
54
Chris Adams

Paul Irish suggère maintenant que pour> 75% des sites, il n'y a aucun avantage à placer Modernizr dans le head.

Déplacer Modernizr vers le bas

Il a plus de potentiel pour introduire des situations inattendues, mais il est préférable pour l'utilisateur de ne pas avoir de scripts dans la tête.

Je parie que> 75% des sites n'en ont pas besoin dans la tête. Je préfère changer cette valeur par défaut et éduquer les 25% plutôt que de regarder pendant que nous ralentissons tous ces sites.

https://github.com/h5bp/html5-boilerplate/issues/1605

34
David Murdoch

Que diriez-vous d'utiliser IE conditions d'une manière légèrement différente? Que pense tout le monde de cette solution:

Dans le <head></head> Mots clés:

<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>

Avant la fin du </body> tag:

<!--[if gt IE 8]><!-->
<script src="/path/to/modernizr.js"></script>
<!--<![endif]-->
</body>

Cela entraînerait un chargement de Modernizr dans la tête pour IE8 et inférieur, et il se chargera avant le corps pour tous les autres navigateurs.

Discussion ouverte sur les avantages et les inconvénients bienvenus dans les commentaires.

15
redfox05