30 diciembre, 2008

Carga asíncrona de scripts

Es un hecho conocido que cada carga de un archivo de script de la forma habitual (<script src="...">) bloquea todos las descargas (imágenes, CSS, scripts) y elementos que aparezcan a continuación (Demo). La forma de remediarlo es cargar los scripts de forma asíncrona, aunque eso genera un nuevo problema, el que coordinar las referencias a código que puede no haberse terminado de cargar todavía y del que habría que comprobar la disponibilidad antes de utilizarlo.

Para solucionarlo se puede optar por varias posibilidades: usar el evento onload de la ventana, que tiene el problema de no ejecutar el código tan pronto como sería posible; usar el evento onreadystatechange del script de forma que se ejecute sólo cuando el código referenciado esté disponible, aunque resulta más complejo de implementar; y usar una llamada a una función callback anunciando la disponibilidad al final de la carga del código referenciado, pero exige tener el control del código que se va a cargar para posibilitar esa llamada.

Sin embargo, aprovechando la técnica de reaprovechar tags script que John Resig descubrió, es posible acercar el código que va a referenciar al objeto que se está cargando en el instante en que está disponible. Recordemos la técnica:

<script type="text/javascript" src="circular/jquery-1.2.3.min.js" onload="eval(this.innerHTML)">
alert($); // se ejecuta sólo cuando jQuery ya está disponible
</script>


Si la petición de carga de esos objetos se realiza una vez que la página ya está cargada (lazy loading) los tiempos mejoran drásticamente manteniendo la funcionalidad. Para ello, hay que lanzar la petición de carga en el evento onload de la página (cuando el usuario percibe la página como ya cargada):

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


Esta técnica de Steve Souders se explica en High Performance Web Sites. Via Ajaxian.

1 comentarios:

Enrique Salvador dijo...

Hola me encanta este blog y lo seguire. Esto de la forma sicrona es terrible, aunque no llego a comprender porque mi web la veo tan rapida y sin embargo google speed le da una nota de 60 de 100...... Me he bajado el archivo LOAD, pero algo debo de estar haciendo mal porque no carga ninguno de los archivos css. Existiria alguna otra manera de realizar esta carga igual de rapida ? La web es rapida es : http://www.significadodelosnombresonline.com Un saluddo

Publicar un comentario en la entrada

Últimos links en indiza.com