¿Cómo funciona exactamente <script defer = "defer">?

Tengo algunos <script>elementos, y el código en algunos de ellos depende del código en otros <script>elementos. Vi que el deferatributo puede ser útil aquí ya que permite que los bloques de código se pospongan en la ejecución.

Para probarlo, ejecuté esto en Chrome: http://jsfiddle.net/xXZMN/ .

<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>

Sin embargo, alerta 2 - 1 - 3. ¿Por qué no alerta 1 - 2 - 3?

ACTUALIZADO: 19/02/2016

Considere esta respuesta desactualizada. Consulte otras respuestas en esta publicación para obtener información relevante para la versión más nueva del navegador.

Básicamente, aplazar le dice al navegador que espere "hasta que esté listo" antes de ejecutar el javascript en ese bloque de script. Por lo general, esto ocurre una vez que el DOM ha terminado de cargar y document.readyState == 4

El atributo de aplazamiento es específico de Internet Explorer. En Internet Explorer 8, en Windows 7, el resultado que veo en su página de prueba de JS Fiddle es 1 - 2 - 3.

Los resultados pueden variar de un navegador a otro.

http://msdn.microsoft.com/en-us/library/ms533719(v=vs.85).aspx

Contrariamente a la creencia popular, IE sigue los estándares con más frecuencia de lo que la gente dice, en realidad el atributo "diferir" se define en la especificación DOM Nivel 1 http://www.w3.org/TR/REC-DOM-Level-1/level -one-html.html

La definición de aplazamiento del W3C: http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer :

"Cuando se establece, este atributo booleano proporciona una pista al agente de usuario de que el script no generará ningún contenido del documento (por ejemplo, no" document.write "en javascript) y, por lo tanto, el agente de usuario puede continuar analizando y procesando".

Algunos fragmentos de la especificación HTML5: http://w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async

Los atributos de aplazamiento y asíncrono no deben especificarse si el atributo src no está presente.

Hay tres modos posibles que se pueden seleccionar usando estos atributos [async y diferir]. Si el atributo asíncrono está presente, el script se ejecutará de forma asíncrona tan pronto como esté disponible. Si el atributo asíncrono no está presente pero el atributo de aplazamiento está presente, entonces el script se ejecuta cuando la página ha finalizado el análisis. Si ninguno de los atributos está presente, la secuencia de comandos se obtiene y ejecuta inmediatamente, antes de que el agente de usuario continúe analizando la página.

Los detalles de procesamiento exactos para estos atributos son, por razones históricas, algo no triviales, que involucran una serie de aspectos de HTML. Por lo tanto, los requisitos de implementación están necesariamente dispersos en la especificación. Los algoritmos a continuación (en esta sección) describen el núcleo de este procesamiento, pero estos algoritmos hacen referencia y son referenciados por las reglas de análisis para las etiquetas de inicio y finalización del script en HTML, en contenido externo y en XML, las reglas para el documento. () método, manejo de scripting, etc.

Si el elemento tiene un atributo src, y el elemento tiene un atributo diferido, y el elemento ha sido marcado como "insertado por analizador", y el elemento no tiene un atributo asíncrono:

El elemento debe agregarse al final de la lista de scripts que se ejecutarán cuando el documento haya finalizado el análisis asociado con el Documento del analizador que creó el elemento.

La verdadera respuesta es: porque no puedes confiar en diferir.

En concepto, diferir y asíncrono difieren de la siguiente manera:

async permite que el script se descargue en segundo plano sin bloquear. Luego, en el momento en que finaliza la descarga, el procesamiento se bloquea y se ejecuta ese script. El procesamiento se reanuda cuando el script se ha ejecutado.

aplazar hace lo mismo, excepto las afirmaciones para garantizar que los scripts se ejecuten en el orden en que se especificaron en la página, y que se ejecutarán una vez que el documento haya finalizado el análisis. Por lo tanto, algunas secuencias de comandos pueden finalizar la descarga y luego sentarse y esperar a que se descarguen más tarde pero aparecieron antes que ellas.

Desafortunadamente, debido a lo que realmente es una pelea de gatos estándar, la definición de diferir varía de especificación a especificación, e incluso en las especificaciones más recientes no ofrece una garantía útil. Como lo demuestran las respuestas aquí y este problema , los navegadores implementan diferir de manera diferente:

• En ciertas situaciones, algunos navegadores tienen un error que hace que los deferscripts se salgan de orden.
• Algunos navegadores retrasan el DOMContentLoadedevento hasta después de que los deferscripts se hayan cargado, y otros no.
• Algunos navegadores obedecen defera <script>elementos con código en línea y sin un srcatributo, y algunos lo ignoran.

Afortunadamente, la especificación al menos especifica que las anulaciones asincrónicas difieren. Por lo tanto, puede tratar todos los scripts como asíncronos y obtener una amplia gama de compatibilidad con el navegador de esta manera:

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

El 98% de los navegadores en uso en todo el mundo y el 99% en los EE. UU. Evitarán el bloqueo con este enfoque.

(Si necesita esperar hasta que el documento haya terminado de analizar, escuche el evento del DOMContentLoadedevento o use la práctica .ready()función de jQuery . De todos modos, querrá hacer esto para recurrir con gracia a los navegadores que no se implementan deferen absoluto).

defersolo se puede usar en la <script>etiqueta para la inclusión de script externo . Por lo tanto, se recomienda su uso en las <script>etiquetas en la <head>sección.

Como el atributo diferir solo funciona con la etiqueta de scripts con src. Encontró una manera de imitar diferir para secuencias de comandos en línea. Utilice el evento DOMContentLoaded.

<script defer src="external-script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    // Your inline scripts which uses methods from external-scripts.
});
</script>

Esto se debe a que el evento DOMContentLoaded se desencadena después de que los scripts atribuidos diferidos se cargan por completo.

El atributo de aplazamiento es solo para scripts externos (solo debe usarse si el atributo src está presente).

También se debe tener en cuenta que puede haber problemas en IE <= 9 cuando se usa script deferen ciertas situaciones. Más sobre esto: https://github.com/h5bp/lazyweb-requests/issues/42

Eche un vistazo a este excelente artículo. Sumérjase en las aguas turbias de la carga de guiones del desarrollador de Google Jake Archibald escrito en 2013.

Citando la sección relevante de ese artículo:

Aplazar

<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>

La especificación dice : Descargar juntos, ejecutar en orden justo antes de DOMContentLoaded. Ignore "diferir" en los scripts sin "src".

IE <10 dice : podría ejecutar 2.js a la mitad de la ejecución de 1.js. ¿No es divertido?

Los navegadores en rojo dicen : No tengo idea de qué es esta cosa de "aplazamiento", voy a cargar los scripts como si no estuviera allí.

Otros navegadores dicen : Ok, pero no podría ignorar "aplazar" los scripts sin "src".

_{(Agregaré que las primeras versiones de Firefox activan DOMContentLoaded antes de que los deferscripts terminen de ejecutarse, según este comentario ).}

Los navegadores modernos parecen admitir asynccorrectamente, pero debe estar bien con los scripts que se ejecutan fuera de servicio y posiblemente antes de DOMContentLoaded.

Este atributo booleano está configurado para indicar a un navegador que el script debe ejecutarse después de que se haya analizado el documento. Dado que esta característica aún no ha sido implementada por todos los demás navegadores principales, los autores no deben suponer que la ejecución del script se aplazará. Nunca llame a document.write () desde un script diferido (desde Gecko 1.9.2, esto eliminará el documento). El atributo de aplazamiento no debe usarse en scripts que no tengan el atributo src. Desde Gecko 1.9.2, el atributo de aplazamiento se ignora en los scripts que no tienen el atributo src. Sin embargo, en Gecko 1.9.1, incluso los scripts en línea se difieren si se establece el atributo de aplazamiento.

diferir funciona con Chrome, Firefox, es decir,> 7 y Safari

ref: https://developer.mozilla.org/en-US/docs/HTML/Element/script

El atributo de aplazamiento es un atributo booleano.

Cuando está presente, especifica que el script se ejecuta cuando la página ha terminado de analizar.

Nota: El atributo de aplazamiento es solo para scripts externos (solo debe usarse si el atributo src está presente).

Nota: Hay varias formas de ejecutar un script externo:

Si está presente la sincronización: la secuencia de comandos se ejecuta de forma asíncrona con el resto de la página (la secuencia de comandos se ejecutará mientras la página continúa el análisis) Si la sincronización no está presente y el aplazamiento está presente: la secuencia de comandos se ejecuta cuando la página ha finalizado el análisis. ni asíncrono ni aplazamiento está presente: el script se recupera y ejecuta inmediatamente, antes de que el navegador continúe analizando la página