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 desarrollado 3 principales puntos para optimizar la carga de JavaScript para nuesra Web:
- Creamos 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.
- Introducimos el primer Javascript el final de la página, justo antes de cerrar la etiqueta <body>.
- Justo después creamos un segundo tag <script> en donde llamaremos al/los fichero/s necesarios.
HTML
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);
}
Con esta optimización mejoramos la carga de las Webs con Javascript. Ya no solo sirve para una carga más rapida de la página ,sino para realizar algunas funciones en el cuerpo de la página una vez cargada dicha página.
Fuente: anieto2k
No tengo mucha idea de Javascript, pero ¿ésta es mejor solución que cargar los js al final de todo? y más importante, ¿sigue siendo una solución no intrusiva?
Por lo que entiendo si, pero me gustaría estár seguro.
Pues intrusivo si es ya que se cargar externamente los archivos .js y no modificamos el HTML para interactuar con el script.
Con esto lo que conseguimos es agilizar la carga de una página con JavaScript. Es como si no pusieramos el script en la cabecera. Es decir, primero carga el cuerpo de la página y luego los scripts. Puedes también leer es otro artículo sobre la carga asíncrona de JavaScript.