¿Es necesario colocar scripts en la parte inferior de una página cuando se utiliza el atributo "aplazar"?

Siempre pongo mis etiquetas de scripts en la parte inferior de la página, ya que es una buena práctica cargar scripts después de que cosas como HTML/CSS y texto hayan terminado de cargarse. Acabo de enterarme del atributo diferir que básicamente hace lo mismo, es decir, espera hasta que la página haya terminado de cargarse antes de ir a buscar y ejecutar scripts.¿Es necesario colocar scripts en la parte inferior de una página cuando se utiliza el atributo "aplazar"?

Entonces, si usa el atributo defer es necesario colocar físicamente las etiquetas de script en la parte inferior de la página vs dentro de la etiqueta de encabezado?

Me resulta mejor para la legibilidad para mantener las etiquetas de secuencia de comandos dentro de la sección de la cabeza.

<script src="script.js" defer="defer"></script>

<script defer="defer"> 

// do something 

</script>

Fuente

2012-09-13 TK123

Su segundo ejemplo no se pospondrá. 'defer' solo funciona en scripts externos. – millimoose

Sí. Todos odiamos esperar. – Tchoupi

¿No sería redundante poner la secuencia de comandos al final _y_ estableciendo que diferir? En cuanto a si usar o no 'defer', ¿quieres ignorar la cuota de mercado de Opera? (Aparentemente, Opera no es compatible con el atributo html5 'async' tampoco). Es posible que desee considerar algo como [yepnope.js] (http://yepnopejs.com/). – nnnnnn

¿La mejor práctica que hace? Usar scripts diferidos

¿Por qué? Los scripts colocados en la parte inferior de la página pueden funcionar bien porque los scripts normalmente bloquean 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 dice al navegador que continúe renderizando.

Here is a better description of using the defer attribute that can be rendered for moz

Fuente

2012-09-13 23:49:44

Los navegadores ya pueden y renderizarán HTML parcialmente cargado incluso sin una pista sobre si un elemento específico generará o no contenido. Para decirlo de otra manera, si agrega un '

Aunque estoy de acuerdo con usted en que el uso de 'retrasar' y la colocación de guiones en la cabecera va a mejorar la legibilidad, este atributo todavía no está apoyada por tanto de escritorio como Opera Mobile (marque this table de detalles).

Fuente

2012-09-13 23:42:42 raina77ow

se usa Opera en algún lugar aparte de xUSSR? – zerkms

El escritorio de Opera ahora es totalmente compatible. Seguro de usar, excepto para los usuarios de Opera móvil (ambos). – Rap

En primer lugar, el atributo defer no es compatible con todos los navegadores (y algunos que sí lo admiten simplemente lo ignoran). Poner el script en la parte inferior de la página garantiza que todos los elementos HTML que se encuentran arriba 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.

Fuente

2012-09-13 23:43:39 Will

Onload y domready son diferentes, creo. Onload se disparará una vez que todo en una página haya terminado de cargarse mientras que el domready se dispara tan pronto como el dom esté listo para ser manipulado incluso si algunas cosas no han terminado de cargarse. – TK123

'onload/ready' no es una alternativa, ya que aún requiere que el script se cargue antes de continuar con la página. – zzzzBov

A partir de 2/2015, el aplazamiento es compatible con todos los navegadores, computadoras de escritorio y dispositivos móviles, excepto Opera Mini. Por favor comienza a usarlo. – Rap

Existen diferentes razones por las que el uso de aplazar en una secuencia de comandos en la parte inferior del HTML tiene sentido:

No todos los navegadores soportan "diferir". Si coloca el script en HEAD con defer y el navegador no admite el aplazamiento, 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 la secuencia de comandos 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 demora" bloquea la representación progresiva. Probado en Google Chrome 36 e IE11 (ver comentario abajo)

Es importante saber que cada navegador maneja cosas como "diferir" y también los indicadores de ocupado un poco diferente.

La mejor práctica debería ser: Coloque las secuencias de comandos en la parte inferior con diferir.

Además del aspecto de legibilidad solo veo ventajas al colocar las secuencias de comandos en la parte inferior con diferir en comparación con "Script in Head with defer" o "Script in the bottom without defer".

Fuente

2014-08-21 07:25:52 BITS

Aquí también puede ver la clara diferencia entre "Secuencia de comandos en la parte inferior sin diferir" y "Secuencia de comandos en la parte inferior con aplazamiento" en Google Chrome. En esta prueba, el "Script en la parte inferior sin diferir" está bloqueando la representación progresiva en un punto específico. http://www.webpagetest.org/video/compare.php?tests=140821_W4_A3K,140821_DY_9R6,140821_97_9PB,140821_MM_9N0 – BITS

Las secuencias de comandos * pueden * ir en el cuerpo de acuerdo con W3C, pero semánticamente pertenecen a la cabeza. #soapBox #nitPicking – Rap

@BITS - tu enlace está muerto – vsync

Las mejores prácticas se han modificado desde que se escribieron estas respuestas, porque el soporte para el atributo defer ha crecido hasta 95% globally.

A menos que necesite optimizar la velocidad para navegadores más antiguos, debe colocar el script en el encabezado y marcar como diferir. Esto 1) mantiene todas las referencias de scripts en un solo lugar (más fácil de mantener) y 2) hace que el navegador tenga más en cuenta el script, lo que le permite comenzar a priorizar los recursos antes.

La diferencia en la diferencia de rendimiento debería ser insignificante para la mayoría de las páginas, ya que el pre-loader del navegador probablemente no comenzará a descargar un script diferido hasta que el documento completo sea analizado de todos modos. Pero no debería doler, y deja más trabajo para el navegador, que generalmente es el mejor ...

Fuente

2018-02-26 14:13:50 mac9416

Cuestiones relacionadas

¿Es necesario colocar scripts en la parte inferior de una página cuando se utiliza el atributo "aplazar"?

Respuesta

Cuestiones relacionadas