Con HTML5, tenemos dos nuevos atributos booleanos para la etiqueta <script>: async y defer. Async permite la ejecución de scripts de forma asíncrona y defer permite la ejecución sólo después de que todo el documento haya sido analizado.
Estos dos atributos son imprescindibles para aumentar la velocidad y el rendimiento de los sitios web. Permiten eliminar el JavaScript que bloquea la renderización, donde la página tendría que cargar y ejecutar scripts antes de terminar de renderizar la página. Aquí hay un ejemplo de uso:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs Defer
Con async, el archivo se descarga de forma asíncrona y luego se ejecuta tan pronto como se descarga.
Con defer, el archivo se descarga de forma asíncrona, pero se ejecuta sólo cuando el análisis del documento se completa. Con defer, los scripts se ejecutarán en el mismo orden en que son llamados. Esto hace que defer sea el atributo de elección cuando un script depende de otro script. Por ejemplo, si estás usando jQuery así como otros scripts que dependen de él, usarías defer en ellos (jQuery incluido), asegurándote de llamar a jQuery antes que a los scripts dependientes.
Una buena estrategia es usar async cuando sea posible, y luego diferir cuando async no sea una opción.
👉Note que ambos atributos no tienen ningún efecto en los scripts inline.
Soporte del navegador
¿Puedo usar script-async? Datos sobre el soporte de la función script-async en los principales navegadores de caniuse.com.