• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Cursos online y materiales digitales para estudiantes y desarrolladores web

  • CURSOS
  • BLOG
  • QUIÉN SOY
  • FAQ
  • ACCEDER
  • CONTACTO

¿Qué diferencias hay entre defer y async?

Publicado el 14/10/2022 por Ada Leave a Comment

Hay dos atributos que nos permiten decidir el momento de carga de nuestros scripts. Son los atributos defer y async, y se indican en la propia etiqueta de <script> de nuestra página web.

¡Vamos a verlos!

Defer

El atributo defer es un atributo booleano que indica que el script se ejecuta cuando la página ha terminado de analizarse.

Es muy importante tener en cuenta que solamente se puede utilizar en scripts externos, es decir, en los que indicamos la ruta a través del atributo scr.

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

Async

El atributo async tiene muchas similitudes con el atributo defer. También es booleano, y solamente se puede utilizar en scripts externos.

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.

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

Modos de ejecutar un script externo

Podemos encontrarnos varios modos de ejecutar un script externo:

  • 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, el script se ejecuta inmediatamente, antes de que el navegador analice la página.

Y para verlo de una manera super gráfica os dejo este gráfico de la web https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html que no tiene desperdicio:

Fuente: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

¿Conocías estos dos atributos? 😉


Filed Under: Tips & Tricks Tagged With: javascript

Reader Interactions

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

Footer

Didacticode

Cursos para estudiantes y docentes del mundo de la informática.
Retos: retos resueltos de programación.
Tips&Tricks: trucos y consejos.
Boleticodes: boletines de noticias.
Quiénes somos: Ada, Edu... y Laura.
Contacto¡Contacta conmigo!

Legal

Aviso legal
Política de privacidad
Cookies

Redes Sociales

Youtube
Twitter
Instagram
Facebook
Twitch
LinkedIn
Gitlab
Github

Didacticode © 2023

¡Cómo no! Este sitio también utiliza cookies para mejorar la experiencia de tu visita.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
Didacticode

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.