javascript modernizr html-head

javascript - modernizr 3.5.0 download



¿Debería colocarse el archivo Modernizr en la cabeza? (4)

¿Qué hay de usar condicionales de IE de una manera ligeramente diferente? ¿Qué piensan todos de esta solución?

Dentro de las etiquetas <head></head> :

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

Antes del final de la etiqueta </body> :

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

Esto daría como resultado que Modernizr cargue en la cabeza para IE8 y abajo, y se cargará antes que el resto de navegadores.

Discusión abierta sobre pros y contras bienvenidos en los comentarios.

¿Debería la referencia al archivo JavaScript de Modernizr estar en el encabezado de la página? Siempre trato de colocar todas las secuencias de comandos en la parte inferior de la página y me gustaría conservar esto. Y si necesita estar en la cabeza, ¿por qué?


Paul Irish ahora está sugiriendo que para> 75% de los sitios, no hay ningún beneficio en colocar a Modernizr en la head .

Mover Modernizr a la parte inferior

Tiene más potencial para introducir situaciones inesperadas, sin embargo, es mucho mejor para el usuario simplemente no tener scripts en la cabeza en absoluto.

Apuesto a que> 75% de los sitios no lo necesitan en la cabeza. Prefiero cambiar este valor predeterminado y educar el 25% que mirar mientras ralentizamos todos estos sitios.

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


Yo diría que no: cada script que coloque en el <head> bloqueará la representación y la ejecución del script adicional. Lo único que debe hacer Modernizr en el <head> es el html5shiv integrado, que html5shiv la compatibilidad con etiquetas HTML5 en Internet Explorer 8 y html5shiv anteriores.

Estuve probando esto ayer y encontré que esto es bastante significativo: en el sitio en el que trabajo, que ya está bastante bien optimizado, y agregué que una sola secuencia de comandos para el cabezal retrasó mi tiempo de carga en ~ 100ms en IE9, lo que ni siquiera ¡benefíciate del shiv!

Dado que aproximadamente el 90% de mi tráfico proviene de navegadores que admiten HTML5 de forma nativa y no tengo CSS básico que requiera que las clases modernizr se muestren correctamente en el renderizado inicial, estoy usando este enfoque que coloca el html5shiv en un comentario condicional y cargas modernizr sin la cuña integrada:

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


Si desea que Modernizr descargue y ejecute lo antes posible para evitar un FOUC , FOUC en <head>

De su guía de instalación :

Suelta las etiquetas de script en el <head> de tu HTML. Para un mejor rendimiento, debe hacer que sigan a sus referencias de hojas de estilo. La razón por la que recomendamos colocar Modernizr en la cabeza es doble: el Shiv HTML5 (que habilita elementos HTML5 en IE) debe ejecutarse antes que el <body> , y si está utilizando cualquiera de las clases CSS que Modernizr agrega, usted '' Quiero prevenir un FOUC.