En este artículo, aprenderemos cómo ejecutar un script de forma asíncrona en una página web. Esto se puede usar en situaciones en las que es importante cargar el contenido, ya que los scripts pesados pueden hacer que la página espere a que se cargue, lo que hace que la página parezca incompleta. La carga asincrónica resolvería este problema de bloquear la representación DOM.
La etiqueta de secuencia de comandos se utiliza para implementar secuencias de comandos externas y externas dentro de la página web. Para hacer que los scripts se ejecuten de forma asíncrona, tenemos dos atributos, el primero es asíncrono y el segundo es diferido . Estos son atributos de tipo booleano y ambos cargan scripts de forma asíncrona sin bloquear la representación DOM.
La principal diferencia entre ambos es que los atributos asíncronos ejecutan de forma asíncrona la secuencia de comandos justo después de cargar sin esperar a que el DOM termine de renderizarse, pero el atributo diferido ejecuta la secuencia de comandos cuando el contenido del DOM está completamente cargado. El atributo asíncrono no es compatible con los navegadores más antiguos, pero los navegadores más antiguos sí lo admiten.
Cuando se usan async y defer , el navegador ignora el atributo defer . Sin embargo, si el navegador es antiguo y async no es compatible, el atributo de aplazamiento funcionará .
Ejemplo 1: En este ejemplo tenemos cuatro elementos, el primero es un elemento <p> que es el contenido antes del script, el segundo es el elemento <script> que contiene el script a cargar, el tercero es otro <p> que es el contenido después del script, y el cuarto es el elemento <button> para actualizar la página. Cargaremos el script de forma asíncrona y lo pondremos en medio del código para ver si está bloqueando la representación del DOM o no.
HTML
<html> <body> <p>Content before script</p> <script async src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <p>Content after script</p> <button onclick="window.location.reload()"> Refresh </button> </body> </html>
Producción:
-
Sin usar el atributo asíncrono, el segundo elemento <p> se carga después de un tiempo:
-
Con el atributo asíncrono, el script se carga de forma asíncrona sin bloquear la representación del DOM.
Ejemplo 2: este ejemplo es el mismo que el anterior, sin embargo, estamos usando defer en lugar de async . En este caso, el script se carga después de que se procesa todo el contenido DOM.
HTML
<html> <body> <p>Content before script</p> <script defer src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <p>Content after script</p> <button onclick="window.location.reload()"> Refresh </button> </body> </html>
Producción:
-
Sin usar el atributo defer, el segundo elemento <p> se carga después de un tiempo:
-
Usando el atributo defer, la secuencia de comandos se carga después de que finaliza la representación DOM:
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA