Un lector escribió recientemente y (esencialmente) me preguntó:
¿Hay alguna razón para usar el async atributo cuando el script ya está en la parte inferior de la página?
No soy un maestro en estas cosas, pero así es como lo entiendo…
De lo que hablaba era de esto:
<script async src="https://css-tricks.com/js/script.js"></script>
</body>Hemos cubierto esto antes un poco. Sin embargo, es muy interesante volver a visitarlo ahora, porque el async El atributo ahora es realmente la única forma recomendada de hacer scripts asíncronos.
Entonces, ¿hay alguna razón para usar el async atributo cuando el script ya está en la parte inferior de la página?
Respuesta corta
No.
Respuesta más larga
Lo que está tratando de prevenir con el async el atributo es el bloqueo del analizador. Si usas el async atributo, está diciendo: No quiero que el navegador deje de hacer lo que está haciendo mientras descarga este script. Sé que este script realmente no depende de que nada esté listo en el DOM cuando se ejecuta y tampoco necesita ejecutarse en ningún orden en particular.
Si carga el script en la parte inferior de la página, el analizador ya está hecho, por lo que bloquearlo no es un gran problema. Esencialmente, ya estás aplazando el guión, que es un poco como un asíncrono más duro. Ver comparación.
Incluso podría ser un poco peligroso.
Si solo estuviera operando bajo la suposición de que asíncrono = bueno, podría hacer algo como:
<script async src="https://css-tricks.com/js/libs.js"></script>
<script async src="/js/page.js"></script>
</body>Eso podría ser una mala noticia, porque es probable que “libs.js” tenga dependencias para “page.js”, pero ahora no hay garantía del orden en que se ejecutan (mal).
Es sobre todo cosa de terceros.
Los scripts de terceros son el gran caso de uso para los scripts asíncronos. Ellos (los terceros) no pueden controlar dónde coloca ese script en su página, por lo que generalmente están diseñados para funcionar sin importar cuándo/dónde se carguen de todos modos. Tampoco puede controlar a terceros (eso es lo que es un tercero, Wayne), por lo que lo ideal es asegurarse de que no ralenticen su sitio.
¿Hay otros casos de uso?
Supongo que si realmente quisiera iniciar la descarga en uno de sus propios scripts de inmediato, y no importaba cuándo se ejecutó, podría ponerlo en el <head> y sincronizarlo.
Podría estar un poco equivocado.
Tiendo a estropear estas publicaciones de consejos de JavaScript, así que si lo hice, hablemos de ello en los comentarios y me aseguraré de que el contenido de esta publicación refleje la mejor información.