Scripts: async, defer
La carga eficiente de páginas es fundamental para el rendimiento web. JavaScript debe gestionarse cuidadosamente para optimizar los tiempos de carga y mejorar la experiencia del usuario. Este artículo cubre técnicas de carga asíncrona de scripts, específicamente los atributos async y defer en las etiquetas <script>. Implementarlos correctamente controla cómo y cuándo se cargan los archivos JavaScript, acelerando significativamente tu sitio web.
Comprender el atributo async
¿Qué es el atributo async?
Cuando agregas el atributo async a una etiqueta <script>, le indicas al navegador que cargue el script de forma asíncrona junto con el resto de la página. Esto significa que el script se descargará en segundo plano sin bloquear la renderización de la página. Una vez descargado, se ejecuta inmediatamente, lo cual puede ocurrir antes de que se analice completamente el documento HTML.
Nota: Tanto async como defer solo funcionan con scripts externos que incluyen el atributo src.
Ejemplo de código: Uso de async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Example</title>
</head>
<body>
<h1>Testing Async</h1>
<script async src="https://example.com/async-script.js"></script>
</body>
</html>Beneficios de usar async
- No bloqueante: El proceso de análisis de HTML continúa mientras se descarga el script.
- Velocidad: Puede reducir el tiempo de carga percibido, ya que el script se maneja en segundo plano.
Aprovechar el atributo defer
¿Qué es el atributo defer?
El atributo defer, cuando se usa en una etiqueta <script>, también permite que el script se cargue de forma asíncrona. Sin embargo, a diferencia de los scripts con el atributo async, los scripts diferidos se ejecutan solo después de que el documento HTML haya sido analizado por completo. Los scripts diferidos se ejecutan después de que finaliza el análisis, pero antes de que se dispare el evento DOMContentLoaded. Esto es ideal para scripts que necesitan que todo el DOM esté disponible y no afectan la estructura del documento.
Ejemplo de código: Uso de defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Example</title>
</head>
<body>
<h1>Testing Defer</h1>
<script defer src="https://example.com/defer-script.js"></script>
</body>
</html>Beneficios de usar defer
- DOM listo: Garantiza que todo el documento HTML se analice antes de la ejecución.
- Orden mantenido: Los scripts se ejecutan en el orden en que aparecen en el documento, lo cual es crucial para scripts que dependen entre sí.
Cuándo usar async vs defer
Elegir entre async y defer depende en gran medida de tus necesidades específicas:
- Usa
asynccuando el script no dependa de otros scripts o elementos del DOM. - Usa
deferpara scripts que necesitan todo el DOM o cuando el orden de ejecución de los scripts es importante.
Ejemplo práctico: Decisiones de carga de scripts
Considera un escenario en el que necesitas cargar una biblioteca de utilidades (como lodash) y tu archivo JavaScript principal que depende de esta biblioteca. Así es como podrías decidir cargar estos scripts:
<script defer src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
<script defer src="script.js"></script>En esta configuración, ambos scripts se cargan de forma asíncrona, pero no se ejecutarán hasta que se analice por completo la página, y lo harán en el orden en que aparecen.
Conclusión
El uso efectivo de los atributos async y defer en las etiquetas de script es crucial para el desarrollo web moderno. Al comprender y aplicar correctamente estos atributos, los desarrolladores pueden garantizar cargas de página más rápidas y una mejor experiencia de usuario. La carga asíncrona de scripts se trata de la optimización del rendimiento y la creación de aplicaciones web eficientes centradas en el usuario.
Práctica
¿Cuáles son los usos de los atributos 'async' y 'defer' en JavaScript?