scripts con defer

Ya en HTML4 se definía un atributo para los tags script llamado defer. El atributo defer indica que el script no va a modificar el DOM y por lo tanto su carga se puede realizar posteriormente a crear el árbol del DOM.

script con defer

El atributo defer no está ampliamente soportado en todos los navegadores por lo que su uso necesita de un testeo de las necesidades del desarrollo en concreto.

Un script con defer se puede incluir en cualquier parte del documento. El fichero empezará a descargarse en el punto en el que se encuentra en el código, pero no se ejecutará hasta que el DOM esté completado, justo antes de lanzarse el evento onload.

La descarga del fichero se realiza de forma no bloqueante y otras descargas pueden realizarse en paralelo, disminuyendo así el tiempo de carga de la página.

<html>
<head>
<meta charset="utf-8">
<title>Script con defer. Test</title>
</head>
<body>
<script type="text/javascript" defer>
alert("defer");
</script>
<script type="text/javascript">
alert("script");
</script>
<script type="text/javascript">
window.onload = function(){
alert("load");
}
</script>
</body>
</html>

view raw
testScriptDefer.html
hosted with ❤ by GitHub

El código de arriba muestra 3 alertas. Si el navegador soporta scripts en modo defer el orden de éstas será:

  1. “script”
  2. “defer”
  3. “load”

Pero como comentaba, es una pena que una vez más, el poco consenso entre navegadores no permita utilizar sin previos tests el uso del atributo defer.

scripts con defer

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s