En este artículo, conoceremos cómo ejecutar un script después de que se haya terminado de analizar una página.
Cuando incluye cualquier secuencia de comandos externa utilizando la etiqueta <script> , tiene la opción de hacer que la secuencia de comandos se cargue y se ejecute después de que la página HTML haya terminado de cargarse y, para lograrlo, puede utilizar el aplazamientopalabra clave como atributo en la etiqueta del script. Esto es útil cuando se incluye una gran secuencia de comandos externa que podría bloquear la representación de la interfaz de usuario de la página; mediante el uso del atributo diferido en la etiqueta de la secuencia de comandos, puede cargar el HTML primero y, cuando finalice la representación de la interfaz de usuario, la secuencia de comandos enorme comenzará a ejecutarse. .
El aplazamiento es un atributo booleano. Carga el script de forma asíncrona y lo ejecuta después de que se haya cargado el HTML. La palabra clave defer debe usarse solo con scripts externos , lo que significa que el atributo src debe estar presente. Carga el script cuando el contenido del DOM está listo, pero antes de que DOMContentLoaded se haya activado.
Los scripts que se incluyen mediante las palabras clave defer se denominan scripts diferidos .
Sintaxis:
<script src="example.js" defer></script>
Ejemplo:
En este ejemplo, incluimos un script pesado (script jQuery) y mostramos cómo las dos salidas son diferentes. Aquí puede ver que en el primer resultado no estamos usando la palabra clave defer y en el segundo resultado, estamos usando la palabra clave defer.
HTML
<!DOCTYPE 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:
- Salida sin aplazamiento (el segundo <p> se carga después de que el script se cargó por completo)
- Salida con aplazamiento (el script se carga después de que el contenido DOM se haya cargado por completo)
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