En su página web, dos cosas están sucediendo en su navegador:
- Análisis de HTML
- Carga de los scripts
Supongamos que el navegador está cargando su página web. En ese momento, su navegador está analizando el documento HTML línea por línea y de repente encuentra una etiqueta de secuencia de comandos. Luego, el navegador deja de analizar en ese momento cuando ve la etiqueta del script que obtiene el script de la red, ingresa a su navegador y luego ejecuta ese script. Ahora, el navegador comienza a analizar nuevamente después de esa etiqueta de secuencia de comandos. Esta situación crea una naturaleza de bloqueo que resulta en una carga lenta.
Para superar esta situación, la etiqueta del script ha introducido dos atributos booleanos: Defer y Async.
Aplazar: este atributo garantiza que todos los scripts se descarguen, pero no se ejecutará hasta que el DOM esté listo.
El proceso de carga de la página web usando el atributo defer
Nota: el atributo Defer cargará los scripts en el orden especificado. Le permite estructurar qué guión viene primero.
Sintaxis:
<script src="" defer></script>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>async and defer</title> <link rel="stylesheet" href="./style.css"> </head> <body> <script src="./script.js" defer></script> <script src="./script1.js"></script> <script src="./script2.js"></script> </body> </html>
En el código anterior, hemos creado tres archivos javascript (script 0, script 1, script 2). Cada archivo tiene algunas funciones. Agrego el atributo diferido en el archivo ‘script.js’. Ahora, veamos el resultado de este código.
Producción:
La salida del código anterior (diferir)
En la imagen anterior de la consola, el script 0 (que contiene el atributo diferido) se procesa al final, lo cual es bueno si desea cambiar el orden del procesamiento y mejorarlo.
Asíncrono: se prefiere este atributo cuando los scripts incluidos en la página no dependen unos de otros. También es muy útil para cargar scripts en medio del DOM que ya están allí.
el proceso de carga de la página web utilizando el atributo asíncrono
Nota: Async no garantiza el pedido. Suponga que hay seis scripts, cualquier script puede ejecutarse en cualquier momento.
Sintaxis:
<script src="" async></script>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>async and defer</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <script src="./script.js" async></script> <script src="./script1.js" async></script> <script src="./script2.js" async></script> </body> </html>
En el código anterior, he creado tres archivos javascript (secuencia de comandos 0, secuencia de comandos 1, secuencia de comandos 2). Cada archivo tiene algunas funciones. Agrego el atributo asíncrono en todos los archivos javascript. Ahora, veamos el resultado de este código.
Producción:
La salida del código anterior (async)
En la imagen anterior de la consola, los scripts se ejecutan de forma asíncrona y han ejecutado la información anterior.
Publicación traducida automáticamente
Artículo escrito por deekshashukla03102001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA