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

1
2
3
4
5
6

<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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