JavaScript - Etiqueta de script - Async & Difer

Al probar una página web o el sitio, puede haber un requisito para observar el tiempo transcurrido en las funcionalidades de carga. Por ejemplo, agregar las funcionalidades adicionales a un cierto límite. En tales casos, el script etiqueta "asíncrata" y "aplazarLos atributos juegan un papel vital en ayudar al desarrollador en gran medida.

Este artículo describirá la diferencia entre async y diferir los atributos utilizando JavaScript.

JavaScript - Etiqueta de script - Async & Difer

El "asíncrata" y "aplazar"Son los atributos del""Etiqueta, y ambas tienen diferentes funcionalidades:

• El "asíncrataEl atributo "le permite a DOM buscar y ejecutar el script al ejecutar el HTML.
• El "aplazar"El atributo descarga el archivo de script, espera finalizar la ejecución de DOM y luego ejecuta el archivo de script.

Ejemplo
Pasemos por el siguiente ejemplo:

En las líneas de código anteriores:

• Incluir la ""Etiquetas que se refieren a los archivos externos separados"asíncrata.js" y "aplazar.js" dentro de "" etiqueta.
• Después de eso, crearemos "463"Botones codificando"botón hacer clic*463"Y luego presione la pestaña.

Discutamos el "asíncrata"Funcionalidad del atributo:

Dejar asyncValue = documento.QuerySelectorAll ('botón');
consola.Log ('Async Attribute Button Count: $ AsyncValue.longitud');

En la asíncrata.archivo js, ​​aplique los siguientes pasos:

• Acceda a los botones creados usando el "QuerySelectorAll ()" método.
• Después de eso, aplique el "longitud"Propiedad en combinación con el"literales de plantilla"Para mostrar el recuento de los botones de modo que el script se ejecutará mientras la página continúa el análisis.

Ahora, mira el "aplazar"Funcionalidad del atributo:

Dejar diferenciado = documento.QuerySelectorAll ('botón');
consola.LOG ('Recuento de botones de atributo de diferir: $ DeferValue.longitud');

En las líneas de código anteriores, considere los pasos establecidos a continuación:

• Del mismo modo, acceda a los botones creados a través del "QuerySelectorAll ()" método.
• Del mismo modo, repita el procedimiento discutido para devolver el recuento de botones a través del "longitud" propiedad.
• En este escenario, el archivo de script se ejecutará después de que el análisis de DOM esté completamente completado.

Producción

La diferencia entre ambos atributos establecidos se puede analizar con la ayuda del recuento generado.

Conclusión

En el "asíncrata"Atributo, el script se ejecuta mientras la página todavía está analizando, mientras que el"aplazar"El atributo espera hasta que el modelo de objeto de documento (DOM) esté completamente ejecutado. Este artículo declaró las diferencias entre el "asíncrata" y "aplazar"Atributos en JavaScript con la ayuda de ejemplos.