¿<script defer> frente a <script async>?

Opciones

1. Son idénticos en cómo cargan y se ejecutan
2. defer espera al parseo, en orden; async no (Opción correcta)
3. async bloquea el parseo del HTML hasta ejecutarse
4. defer solo funciona con scripts inline

Respuesta

defer se ejecuta tras parsear el HTML, en el orden del documento; async se ejecuta en cuanto se descarga, sin orden garantizado

Por qué

Un <script> normal detiene al navegador en la lectura del HTML hasta que se descarga y se ejecuta.

Ambos atributos descargan en segundo plano:

• defer: se ejecuta cuando el HTML está totalmente parseado, en el orden en que aparecen los scripts. Lo mejor para el código de tu app.
• async: se ejecuta en cuanto llega, en cualquier orden. Válido para scripts independientes como analítica.

Recuerda

Scripts de tu app → defer. Scripts independientes de terceros → async.

Términos clave

• Scripts defer / async
• HTML
• JavaScript
• DOM
• Core Web Vitals
• HTTP