javascript - example - ¿Es necesario colocar scripts en la parte inferior de una página cuando se usa el atributo "diferir"?
javascript html ejemplos (5)
¿La mejor práctica que pides? Usar scripts diferidos
¿Por qué? Los scripts colocados en la parte inferior de la página pueden funcionar muy bien porque los scripts normalmente bloquean las descargas paralelas, como se especifica en las especificaciones HTML / 1.1, pero el uso de este atributo alternativo indica que el script no contiene document.write y le indica al navegador que continúe la representación.
Siempre coloco mis etiquetas de script en la parte inferior de la página, ya que es una buena práctica cargar scripts después de que se hayan cargado HTML, CSS y texto. Me acabo de enterar del atributo de aplazamiento que básicamente hace lo mismo, es decir, espera hasta que la página haya terminado de cargarse antes de buscar y ejecutar scripts.
Entonces, si usar el atributo de aplazamiento, ¿es necesario colocar físicamente las etiquetas de script en la parte inferior de la página frente a la etiqueta principal?
Me parece mejor, por legibilidad, mantener las etiquetas de script dentro de la sección principal.
<script src="script.js" defer="defer"></script>
o
<script defer="defer">
// do something
</script>
En primer lugar, el atributo de aplazamiento no es compatible con todos los navegadores (y algunos que lo admiten simplemente lo ignoran). Al colocar el script en la parte inferior de la página, se garantiza que todos los elementos HTML que se encuentran sobre él se hayan cargado en el DOM antes de que se ejecute el script. Una alternativa es usar el método onload o usar la función DOM ready de jQuery.
Hay diferentes razones por las que usar deferir en un script en la parte inferior del HTML tiene sentido:
- No todos los navegadores soportan "diferir". Si coloca el script en HEAD con diferido y el navegador no lo admite, el script bloquea la descarga paralela de los siguientes elementos y también bloquea la representación progresiva de todo el contenido debajo del script.
- Si solo coloca el script en la parte inferior sin diferir, el navegador continuará mostrando un indicador de ocupado hasta que la página haya terminado de analizar el JavaScript.
- En algunos casos, el "script en la parte inferior sin diferir" bloquea la representación progresiva. Probado en Google Chrome 36 e IE11 (vea el comentario a continuación)
Es importante saber que todos los navegadores manejan cosas como "diferir" y también los indicadores de ocupado un poco diferentes.
La mejor práctica debería ser: poner los scripts en la parte inferior con aplazamiento.
Además del aspecto de legibilidad, solo veo ventajas al poner los scripts en la parte inferior con diferir en comparación con "Script in Head with defer" o "Script en la parte inferior sin diferir".
Las mejores prácticas han cambiado desde que se escribieron estas respuestas, porque el soporte para el atributo de defer ha crecido a 95% a nivel mundial .
A menos que necesite optimizar la velocidad para navegadores más antiguos, debe colocar el script en la cabecera y marcarlo como diferido. Este 1) mantiene todas las referencias de su script en un lugar (más mantenible) y 2) hace que el navegador se dé cuenta del script antes, lo que le permite comenzar a priorizar los recursos antes.
La diferencia de rendimiento debe ser despreciable para la mayoría de las páginas, ya que el pre-loader del navegador probablemente no comenzará a descargar una secuencia de comandos diferida hasta que se analice todo el documento de todos modos. Pero, no debería doler, y deja más trabajo para el navegador, que generalmente es el mejor ...
Si bien estoy de acuerdo con usted en que el uso de ''diferir'' y la colocación de scripts en el encabezado mejorarán la legibilidad, este atributo todavía no es compatible con Opera tanto para el escritorio como para el móvil (consulte esta tabla para obtener más información).