Cuando empecé a hacer páginas web había que incluir el javascript, ya sea los ficheros o el código, en la sección head de la página web. Tiempo después la cosa cambio y se empezó a poner justo antes del cierre del body para que diese tiempo a cargar el DOM de la página y no hubiese problemas, había que hacerlo así porque atributo defer no existía (o existía pero Internet Explorer no lo soportaba). Pero ahora se puede hacer usando los atributos async y defer.
El navegador, al encontrar una etiqueta script, se interrumpe la carga para procesar y ejecutar el jvascript, ya que no puede realizar ambas cosas a la vez. Con dichos atributos se puede definir como se va a comportar el navegador y cuando debe procesar el javascript. Los atributos async y defer indican como se va a comportar el navegador al encontrarse el código javascript.
- Defer: Es un atributo booleano que indica que el script se ejecuta cuando la página ha terminado de analizarse. Hay tener en cuenta que solamente se puede utilizar en scripts externos, es decir, los ficheros javascript que se incluyen en la web como por ejemplo
. - Async: Es un atributo booleano, y solamente se puede utilizar en scripts externos como por ejemplo
. La diferencia fundamental con respecto al anterior es que el script se carga en paralelo al análisis de la página y se ejecuta tan pronto como esté disponible, de manera que si el script está descargado por completo, el análisis de la página se interrumpe, se ejecuta el script y luego continúa el resto de la página.
- Si en la etiqueta script aparece el atributo async, la secuencia de comandos se ejecuta mientras la página está analizando, es decir, de manera asíncrona.
- Si en la etiqueta script aparece el atributo defer, el script se ejecuta cuando la página ha terminado de analizarse.
- Si no hay ninguno de los dos atributos, async o defer, el script se ejecuta inmediatamente, antes de que el navegador analice la página.