JavaScript diferir el atributo

Si alguna vez ha buscado el desarrollo web o el diseño del sitio web, entonces es probable que haya oído hablar de HTML. Bueno, HTML significa "Lenguaje de marcado de hipertexto". HTML se usa en combinación con CSS para desarrollar páginas web atractivas y receptivas. JavaScript es un lenguaje de programación que permite que nuestras páginas web y aplicaciones web piensen y actúen y haga que nuestras aplicaciones web sean interactivas. El navegador todo el documento HTML es escaneado primero por CSS, JavaScript o cualquier otro material referenciado, como una imagen y este proceso se llama análisis HTML. El navegador web luego solicita cada uno de los archivos de recursos del servidor si los recursos se encuentran en el HTML. Una vez que el navegador web tiene todos los recursos necesarios, comienza a construir la página.

JavaScript puede ser referenciado por el guion La etiqueta de HTML y JavaScript se llama analizador recurso de bloqueo Porque JavaScript bloquea el análisis HTML. Para resolver este problema el guion La etiqueta de HTML nos ofrece async y aplazar atributos, por lo tanto, nos permiten tener más control sobre cómo y cuándo se recuperan y ejecutan archivos externos. En esta publicación, exploraremos qué es JavaScript diferir el atributo y cómo podemos usar el atributo de diferencias.

Ejecución normal

Echemos un vistazo al impacto de lo que sucede cuando el atributo diferido no está allí. Los archivos de JavaScript, por defecto, pausarán el análisis del texto HTML para que puedan obtenerlo (si no está en línea) y ejecutar.

Digamos que tenemos una etiqueta de script en algún lugar en el medio de una página HTML y hay un código HTML arriba y debajo del guion etiqueta:

El analizador HTML escaneará esta página y cuando llegue a la etiqueta de script, pausará el análisis HTML y obtendrá el JavaScript código.js Archivo en la etiqueta de script y luego ejecute ese archivo. Una vez que se completan la ejecución y la obtención del archivo JavaScript, solo entonces el análisis HTML continúa nuevamente. Este proceso retrasa la representación de HTML y, por lo tanto, ralentiza nuestra página web tomando un tiempo para cargar completamente la página web.

¿Cuál es el atributo de diferir??

La propiedad de diferir solo puede tener un valor verdadero o un valor falso, podemos concluir que es un atributo booleano. Es un atributo que se usa solo para scripts externos. Si se usa esta propiedad, define que el navegador no debe esperar a que se cargue el script. Es decir, en algunos casos, los scripts externos pueden llevar mucho tiempo cargar, esta propiedad simplemente dice cargar el documento antes de cargar en el script. En palabras simples, el atributo de diferir no espera el guion La etiqueta y el procesamiento de HTML continúan, lo que hace que nuestra página web aumente el rendimiento de la carga. La sintaxis para el atributo de diferir es:

Se debería notar que el atributo de diferir solo se puede aplicar a hojas/scripts externos cuando el SRC El atributo está presente en la etiqueta de script. También se debe tener en cuenta que el atributo de diferencias no se puede aplicar al código en línea.

El atributo de diferir es similar al proceso asincrónico, es decir, puede pasar a otra tarea incluso cuando no se completa la primera tarea.

Ejemplo

Estamos utilizando una hoja de JavaScript externa con el nombre de código.JS:

Antes del guión

Después del script: se ejecutará inmediatamente

Iniciamos un pag etiqueta y luego una etiqueta de script que hace referencia al código.js archivo y luego nuevamente un pag etiqueta.

En el código.js archivo, simplemente consolamos.registro Hola Mundo!:

consola.Log ("Hola mundo!");

Veremos la siguiente salida:

Apoyo al navegador

Los números dados en la tabla indican qué versión del navegador fue el primero en implementar el atributo por completo.

Atributo	Mozilla Firefox	Microsoft Edge	Google Chrome	Ópera	Safari
aplazar	3.5	10.0	8.0	15.0	5.0

Conclusión

La ejecución normal de HTML se bloquea cuando hay una etiqueta de script. La etiqueta de script obtiene un archivo o enlace externo y luego lo ejecuta, por lo tanto, bloqueando el análisis normal de HTML. El atributo de infer es la solución como atributo de infer nos ayudará a descargar nuestros scripts lo antes posible sin bloquear el navegador/html, ya que le dice al navegador que no espere el guion etiqueta. En esta publicación, se discutió el atributo de diferencias en JavaScript junto con un ejemplo y la capacidad de apoyo del navegador.