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.
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.
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.
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:
- Normal Script Tags – 487 ms
- Asynchronous Script Loading – 429 ms
- Lazyloading – ~320 ms
Actualización
Acabo de ver que hace 81 días comentamos algo sobre el tema. Sorry.
6 comentarios, 3 referencias
+
#