javascript - google - ¿Cuál es exactamente el beneficio del atributo asíncrono HTML5 en los elementos del script?

script defer

Question

Tengo algo de confusión con respecto al nuevo atributo asíncrono al elemento de script en HTML5 que espero que alguien pueda dar una respuesta clara.

Los navegadores pueden realizar conexiones paralelas, por lo que las imágenes se descargarán en paralelo. Pero cualquier javascript externo no se descarga en paralelo con otro javascript externo e imágenes. Los scripts bloquean la carga de la página hasta que se hayan descargado y ejecutado.

Para descargar un script sin bloquear el resto de la carga de la página, la técnica más común es crear un elemento de script, como hace el fragmento de código de Google Analytics:

var ga = document.createElement(''script'');
ga.type = ''text/javascript'';
ga.src = ''...ga.js'';
ga.async = true;
var s = document.getElementsByTagName(''script'')[0];
s.parentNode.insertBefore(ga, s);

Tampoco estoy seguro de cómo funciona exactamente eso.

• el navegador analiza y presenta la página, luego, una vez que ha finalizado, se da cuenta de que el DOM ha cambiado, lo que da como resultado que el script ga.js se descargue y se ejecute

o

• el navegador comienza a descargar el javascript en paralelo con otros recursos.

Creo que es el último.

El nuevo fragmento asíncrono de Google Analytics incluye el atributo asíncrono HTML5 en el elemento de script que crea. Eso no ayudará al problema de bloqueo de la página, que ya se resolvió con la técnica "Script DOM Element". Entonces, ¿qué agrega async a la imagen? Según w3schools, "si está presente async, el script se ejecuta de forma asíncrona con el resto de la página (el script se ejecutará mientras la página continúa el análisis)".

Y de acuerdo con el sitio de Steve Souders, "el principal beneficio de este [atributo asíncrono] es que le dice al navegador que las secuencias de comandos subsiguientes se pueden ejecutar inmediatamente, no tienen que esperar por ga.js".

Entonces, ¿async y la técnica del elemento Script DOM están resolviendo el mismo problema?

Answer 1

El atributo asíncrono es solo un enfoque más claro (sin ambigüedades muy claro) y más limpio (será, o ya es parte de la respetada especificación HTML5) para resolver el problema. Si su sitio sirve scripts de otro dominio (o CDN), entonces el atributo asíncrono le brinda un poco de confiabilidad (permita al usuario leer al menos el contenido estático), ya que la página no se bloqueará mientras que un script sea lento (posiblemente abajo) ) el host remoto está intentando cargar.

Answer 2

Hubo un gran article de Jake Archibald en html5rocks que aborda este tema.

Answer 3

Según https://www.html5rocks.com/en/tutorials/speed/script-loading/ si se agrega dinámicamente un elemento <script> , es posible que no se ejecute hasta que se DOMContentLoaded . Es decir, algunos agentes de usuario (por ejemplo, MSIE 10) esperarán hasta que DOM esté listo antes de ejecutar elementos <script> agregados dinámicamente.

Supongo que Google quiere que su código de análisis se ejecute más rápido en esos agentes de usuario y, como tal, necesitan agregar una async para indicar al navegador (por ejemplo, MSIE 10) que está bien comenzar a ejecutar el script lo antes posible. Los navegadores compatibles con HTML5 se ejecutarían como si el async verdadero, incluso si no estuviera definido, por lo que se ha agregado async=true solo para mejorar el rendimiento con los navegadores que no son HTML5.

Answer 4

Trabajará:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>$(''body'').append(''Yey'');</script>

No trabajará:

<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>$(''body'').append(''Yey'');</script>