Hace unos meses vimos algunas técnicas para cargar Javascript asincronamente y así evitar el bloqueo del navegador mientras se carga el fichero Javascript. El mayor problema que nos encontramos al cargar Javascript es que el navegador deja de renderizar la página mientras carga el fichero Javascript.
En cambio, si cargamos los ficheros dinámicamente mediante Javascript, evitamos el problema y podemos cargar ficheros Javascript de forma asíncrona sin afectar al renderizado de la página.
Nicholas C. Zakas, ha estado pensando sobre el tema y ha sacado 3 puntos imprescindibles a tener en cuenta para mejorar la carga del javascript de nuestras páginas.
- Crear dos ficheros Javascript. En el primero poner lo necesario para cargar dinámicamente otro ficheros javascript y el segundo con el código necesario para nuestra aplicación.
- Incluye el primer Javascript el final de la página, justo encima de
</body>. - Justo debajo creamos un segundo tag
<script>en donde llamaremos al/los fichero/s necesarios.
Nuestro HTML quedaría más o menos así:
<script type="text/javascript" src="http://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
//initialization code
});
</script>loadScript()
loadScript() es la función encargada de cargar el fichero Javascript de forma dinámica y encargada de ejecutar el código que indiquemos como segundo parámetro en cuando este esté cargado correctamente.
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}Está claro que estas optimizaciones mejoran el resultado, aunque estamos hablando de milisegundos (o pocos segundos en el peor de los casos). Pero es bueno conocer formas de mejorar nuestros scripts y así pulirlos perfectamente.
19 comentarios, 7 referencias
+
#