Contenido

Cargando javascript asincronamiente

19 mar

+ 9

Hace unos meses, Steve Souders publicó un artículo realmente interesante en el que nos mostraba técnicas para mejorar el rendimiento de carga de nuestros ficheros javascript.

En el artículo nos comenta el problema de cargar ficheros Javascript en el <head /> de nuestras páginas web.

sorttable-normal-577x69

En la imagen vemos el problema, y es que hasta que el fichero no esté correctamente cargado no sigue renderizando la página lo que significa unos milsegundos (o segundos) de carga sin mostrar nada de la página. Por ello nos propone desplazar estas llamadas al pié de la página, justo encima de </body> para mostrar el contenido, imagenes y demás y posteriormente cargar el javascript y aplicarlo.

De esta forma, además de mostrar algo al usuario nos evitamos problema con el window.onload() y los problemas de intentar llamar mediante javascript a elementos aún no pintados.

Esta solución, solventa el problema visual, pero no mejora el tiempo de carga de los ficheros ya que estos se ejecutan secuencialmente uno detrás de otro. Para solventar esto nos propone 2 opciones:

Asynchronous Script Loading

Mediante el uso del tag <script />, nos propone generar dicho tag directamente en javascript, ejecutado en nuestro <head /> para que este se cargue de forma asíncrona.

<head>
<script type="text/javascript">
	var script = document.createElement('script');
	script.src = "sorttable-async.js";
	script.text = "sorttable.init()";
	document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>

De esta forma, al pasar por aquí el navegador ejecuta las sentencias y genera el tag <script /> cargando el Javascript. Mediante la propiedad text, insertamos la llamada que deseamos ejecutar mediante el sistema Degrading Script Tags de John Resig, para más información sobre el tema os recuerdo este artículo que escribí hace unos meses.

sorttable-async-529x69

Como podemos ver en la imagen, conseguimos nuestro objetivo. Cargar el script y la imagen a la vez, mejorándo el tiempo de carga (comparar con imagen anterior).

Lazy Loading

Entonces, el problema ya estaba resuelto, pero aún se podía mejorar. Para ello se ha hecho uso del método  onload() del objeto window para cargar el fichero una vez la página este completamente cargada.

<head>
<script type="text/javascript">
    window.onload = function() {
       var script = document.createElement('script');
       script.src = "sorttable-async.js";
       script.text = "sorttable.init()";
       document.getElementsByTagName('head')[0].appendChild(script);
    }
</script>
</head>

De esta forma el contenido de la página se carga antes y obtenemos unos milisegundos realmente interesantes.

sorttable-lazyload-519x69

Conclusiones

Programar puede programar cualquiera. Preocuparse por unos milisegundos de carga de nuestro javascript cuando  unos iluminados nos hacen poner imagenes de varios megas de tamaño no puede soportarlo todo el mundo ;)

Echarle un vistazo a los tiempos en la página que Steve Souders montó de ejemplo:

Actualización

Acabo de ver que hace 81 días comentamos algo sobre el tema. Sorry.

  • Souders tiene 2 Google Techtalks en YouTube, sobre rendimiento y velocidad de carga de sitios web.

    Precisamente en la 2ª charla propone esas técnicas y las compara con un buen puñado de otras, son bastante interesantes.

    Los títulos de las charlas son:
    – High performance websites and YSlow
    – Life’s too short write fast code (part 2)

  • hola, buenas noches. Me parece muy bueno el artículo. Hay una cosa que no veo clara, esto como lo mezclo con

    
     google.load("jquery", "1.3");            
    

    ?¿?¿??¿?

    Por ejemplo yo tengo esto en el head y luego pongo:

    
    $(document).ready(function() {
                        $("#bottom").fadeIn(2000);
                    });
    

    y siempre me da error diciéndome que no existe esta funciona. En cambio si lo pongo delaten del pues funciona ok.

    hay alguna forma de poder solucionar esto o hacerlo más eficiente?

    gracias.

  • @cdrman: Deberías usar google.setOnLoadCallback(), así te la encontrará perfectamente.

    Echale un vistazo al código de la página incial de Google Ajax Libreries.

  • Muy interesante, lo he probado y va muy bien, aunque no se si es del todo compatible… supongo que si… pero….
    La única pega es que si la pagina se basa en el funcionamiento del script, tendras una sensación de mas tiempo de espera..

    @cdrman: lo que sucede es que aun no tienes cargado el jquery. Eso debes ponerlo en un archivo separado del html y llamarlo luego del jquery.

  • Si no me equivoco, window.onload se espera a cargar todo el contenido de la pagina, incluidas imagenes en el tag img y etc…

    Quiere decir esto que si tenemos un menu que funciona con javascript (por decir algo) este menu no funcionaria hasta que no se cargara la totalidad del documento??

  • @Jordi: Depende del navegador.

    Si no te recuerdo mal, en IE espera hasta la carga de las imagenes, mientras que los demás asumen en onload a la carga completa del DOM de la página.

    Revisa esto a ver si te ayuda.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.