Otro punto importante, es que la posibilidad de reducir el fichero concatenado a un fichero mucho menor. La reducción puede ser tal, que según que librerías pueden llegar a reducirse un 80% del total de su peso. Si estamos de aplicaciones de intranet, podemos estar hablando de reducir la carga de 1 Mb a 300 Kb, lo cual es una mejora sustancial.

En post bastante antiguos expliqué el uso de la compresión de ficheros js mediante el PHP. Esta técnica es muy cómoda para sitios pequeños, pero en el momento que el proyecto reciba muchas peticiones, este sistema se puede volver en nuestra contra ya que estamos sobrecargando el servidor con un trabajo extra que puede ser evitado.

La versión más óptima de enviar ficheros comprimidos es que estos ya lo estén y que el servidor web únicamente se encargue de servir esta petición. Para ello vamos a utilizar gran librería creada por los expertos en optimización web de Yahoo: YUI Compressor. Necesitamos descargarnos esta librería y utilizar el fichero jar que tenemos en la carpeta build. Para los que no sepáis Java, tranquilos, no es necesario. Únicamente vamos a configurar nuestro XML de Ant para que utilice dicha librería para comprimir nuestros ficheros javascript (esta técnica también es aplicable a ficheros CSS).

Para ello, agregaremos la siguiente porción de código XML a nuestro fichero creado en el anterior post:

Este grupo de tareas se llama comprimirFicheros y antes de ejecutarse, ejecutará de forma no paralela el grupo de tareas concatenarFicherosJs. Más adentro, se le define la carpeta dónde están ubicados los ficheros js y que ficheros queremos comprimir, en este caso, el fichero que hemos generado después de concatenar los ficheros del grupo de tareas concatenarFicherosJs. Luego aparecen un grupo de líneas que detallan que la ejecución de la librería y algunos argumentos que ésta precisa.  Y por último no menos importante, se define que todos los ficheros js seleccionados para ser comprimidos, tendrán una copia con el mismo nombre pero acabado en -min.js.

<target name="comprimirFicheros" depends="concatenarFicherosJs">
<apply executable="java" parallel="false">
<fileset dir="js/" includes="fichero.js"/>
<arg line="-jar"/>
<arg path="yuicompressor.jar"/>
<srcfile />
<arg line="-o"/>
<mapper type="glob" from="*.js" to="js/*-min.js"/>
<targetfile />

Así, cuando hemos ejecutado este grupo de tareas, se ha ejecutado otro grupo (concatenarFicherosJs) y se ha generado un fichero comprimido del fichero generado por el grupo anterior (fichero-min.js). En este caso la reducción es mínima ya que son ficheros muy pequeños, pero si hacéis pruebas con ficheros más grandes, podréis comprobar la gran mejora sobre el peso del fichero que provoca la compresión con esta utilidad.

Esto debe ser un MUST, como dicen los anglosajones, dentro de nuestras técnicas para mejorar el rendimiento de nuestro sitio web.

Dentro de este tema de reducir las peticiones, aparece un tema recurrente en prácticamente todo proyecto web que se precie: la llamada a múltiples ficheros js para cargar una página web. Normalmente, nuestra página cuenta con algún framework javascript, cómo jQuery, el uso de algún plugin de este framework que estamos utilizando y por último, nuestro propio fichero js con javascript que hemos manufacturado nosotros. Es decir, de inicio, ya tenemos como mínimo tres peticiones. Veamos cómo podemos reducir el número de peticiones de 3 a 1.

Para ello, haremos uso de Ant. Para quien no lo conozca, es una herramienta que permite realizar tareas mecánicas, normalmente muy utilizada en proyectos Java. Las tareas se definen en ficheros xml que dicha herramienta interpreta. Entornos de desarrollo como Netbeans o Eclipse, llevan integrado esta utilidad. Veamos el siguiente xml:

< ?xml version="1.0" encoding="UTF-8"?>
<project name="DemoJavascript" xmlns:rsel="antlib:org.apache.tools.ant.types.resources.selectors">
<target name="concatenarFicherosJs" description="Unir varios ficheros js en orden">
<concat destfile="js/fichero.js">
<filelist dir="js/">
<file name="ficheroUno.js" />
<file name="ficheroDos.js" />
<file name="ficheroTres.js" />
</filelist>
</concat>
</target>
</project>

Lo primero que se define es un nombre del proyecto más el xlmns de Apache Ant, lo cual nos sirve para validar nuestra sintaxis dentro del fichero xml.

Luego definimos un grupo de tareas – target (nuestro fichero puede contener más de  un grupo de tareas) y la llamamos concatenarFicherosJs. Este grupo tiene una tarea llamada concat la cual indica que se deben concatenar ficheros. Esta tarea, define un atributo destfile que indica el fichero que contendrá los tres ficheros concatenados. Ya hemos indicado que queremos concatenar y en dónde queremos guardar el fichero generado. Ahora nos queda indicar que ficheros y en que orden queremos que se concatenen. Eso se realiza mediante la definición de una lista de ficheros – filelist, dónde indicamos la ruta – dir – dónde encontrar los ficheros que a continuación definimos. A partir de ahí, definimos cada uno de los ficheros que queremos concatenar y en que orden necesitamos que se concatenen. El orden es importante ya que si primero si intenta cargar un plugin de jQuery sin que el framework se haya cargado antes, nos dará un error.

Para los que no han utilizado nunca Ant, hay muchos ejemplos sencillos en internet de cómo ejecutar tareas de Ant desde Eclipse y Netbeans.

Esto es todo. Ahora ya podemos modificar nuestra página para que en vez de realizar tres solicitudes, cargue un único fichero. En la utilización de proyectos mucho más complejos, esto puede ser una mejora sustancial ya que podemos reducir las peticiones de 8 o 9 a 1 o 2.

El problema, es que esta generación al vuelo, si no se hace bien, puede producir que nuestra página sufra grandes retardos e incluso a mucha gente le aparezca el contenido a golpes. Esto suele ser debido a que el contenido que se está generando, se está inyectando al DOM durante su proceso de creación. Esto provoca que recorramos continuamente al DOM. Veamos un ejemplo:

var accessDiv = document.getElementById('access');
for (var i = 0; i < 50; i++){
accessDiv.innerHTML += 'hola';
}

De siguiente forma, generamos el html y una vez generado, entonces lo introducimos en el DOM:

var html = '';
for (var i = 0; i < 50; i++){
html += 'hola';
}
document.getElementById('access').innerHTML = html;

var elementosDiv = document.getElementsByTagName('div');
for (var i = 0; i <  elementosDiv.length; i++){
//Trabajar con el array elementosDiv[i]
}

En la variable elementosDiv guardamos un array con todos los elementos DIV que contiene en nuestra página. Después, vamos iterando sobre este array trabajamos con cada uno de los elementos que componen este array. El problema que tiene este código, es que la variable elementosDiv contiene un array de elementos vivos, es decir, contiene una referencia directa al objeto DOM de nuestra página. Si durante la ejecución del bucle se agrega un nuevo elemento DIV a la página, automáticamente elementosDiv.length valdrá lo que valía antes más uno. Esto nos indica que para cada iteración del bucle, nuestro código solicita que se cuenten cuantos elementos DIV tiene el objeto DOM, lo cual produce una gran carga al navegador.

Para evitar este comportamiento, es tan sencillo como guardar cuantos elementos DIV hay justo antes de comenzar con la iteración.

var elementosDiv = document.getElementsByTagName('div');
for (var i = 0, count = elementosDiv.length; i < count; i++){
//Trabajar con el array elementosDiv[i]
}

En este código, justo cuando se inicializa el bucle, se guarda en la variable count el número de elementos del array. De esta forma, ya no es necesario que en cada iteración del bucle se tenga que ir a contar el número de elementos DIV al objeto DOM.

En este primer post, vamos a ver un truco  muy sencillo para optimizar el rendimiento de nuestro código javascript y así conseguir una respuesta más rápida de nuestro navegador.

Suponemos el siguiente código:

   var start = new Date().getTime();
   for (var i = 0; i < 5000; i++){
      document.getElementById('s').value = i;
   }
   var elapsed = new Date().getTime() - start;
   console.log(elapsed);

Este código accederá 5000 veces a un objeto y le cambiará su valor. Si ejecutáis este código con el firebug, podréis el tiempo en milisegundos que tarda en ejecutar dicho código. Cada vez que itera en el bucle, debe acceder al DOM y recorrerlo buscando un elemento que tenga un identificador igual a ‘s’.

Optimizar este código es muy sencillo y únicamente debemos acceder una vez al dom y guardar el objeto en una variable.

   var start = new Date().getTime();
   var s = document.getElementById('s');
   for (var i = 0; i < 5000; i++){
      s.value = i;
   }
   var elapsed = new Date().getTime() - start;
   console.log(elapsed);

Y aún mejor, si no queremos realizar ningún tipo de animación, únicamente mostrar un valor después de un bucle, podemos asignarlo al final del proceso

  var start = new Date().getTime();
  var j;
  for (var i = 0; i < 5000; i++){
   //Aquí haríamos nuestro cálculo
   j = i;
  }
  document.getElementById('s').value = j;
  console.log(end.getTime() - start);

El problema que ya comenté en un post anterior (Cargar Google Analytics una vez se haya cargado la página), es que esto, en según que momentos, puede enlentecer de una forma muy grave nuestra página, o por ejemplo, el mapa lo tenemos en una pestaña que por defecto no es visible. Por ello, podemos obtar por una solución que incrementará sustancialmente la velocidad de carga de nuestra página y que se encargará de que, una vez se haya cargado la página, proceder a la descarga y la inicialización del nuestro Google Map.

Esta no es la única utilidad, también podríamos cargar nuestro Google Map a voluntad mediante la pulsación de cualquier elemento. Esto nos permitiría que en una página no cargásemos el Google Map hasta que el usuario decidiese utilizaro, aliviando la carga de nuestra página.

Veamos un ejemplo práctico llamando a Google Maps una vez se ha terminado la carga de nuestra página:
http://www.marcosdev.com/ejemplos/googlemaps_async/

Lo primero de todo, veamos la estructura de nuestros ficheros:

Por un lado tenemos un fichero html en el cual hay una capa que utilizaremos para insertar nuestro Google Maps y las llamadas a los ficheros googleMaps.js y jquery.js.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Ejemplo de carga de forma asíncrona de Google Maps</title>
</head>
<body>
   <div id="mapa" style="width:300px;height: 300px">
      <p style="text-align:center"><strong>Cargando</strong></p>
   </div>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="googleMaps.js"></script>
</body>
</html>

Cómo podemos ver, el div con id “mapa” tiene un texto interior que pone “Cargando”. Esto es para que mientras se carga nuestro Google Maps el visitante pueda saber que el navegador está trabajando. Después del div, insertamos las dos llamadas a nuestros ficheros javascript. El primero es la librería jQuery que nos ayudará realizar la petición de carga del conjunto de ficheros necesarios para cargar Google Maps.

En el fichero googleMaps.js tenemos el código necesario para realizar la carga del mapa:

function cargarMapa(){
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("mapa"));
      map.setCenter(new GLatLng(39.578678,2.646021), 16);
   }
};

$(document).ready(function(){
   var api='ABQIAAAAOxTvdJxbyGuGB8_UUEe52xRHT0E5MDpBZnfhvo0jhLIefK70hRTYIol4_Lr75EWTtT9VjcaZzY2QWg';
   $.getScript('http://maps.google.com/maps?file=api&v=2.x&key='+api+'&async=2&callback=cargarMapa');
});

Lo primero que vemos es una función llamada “cargarMapa” la cual será llamada una vez tengamos cargada la librería de Google Maps. Esta función únicamente se encarga de mostrar nuestro Google Maps en un determinado div (en nuestro caso el div llamado “mapa“) y situarlo en una coordenada (new GLatLng(39.578678,2.646021)) con un determinado zoom (16).

La parte interesante viene justo después. Vemos el comienzo típico de cualquier fichero js que jQuery ( $(document).ready(function(){ ) y justo después dos líneas de código; la primera es una variable en la cual, por cuestiones de tener un código más legible, guardo el clave del api de Google Maps. Y en el segundo realizo la petición, que a simple vista, es la misma url que normalmente nos da google para poner en las etiquetas <script>. Pero si nos fijamos, existe dos diferencias. Justo al final de la línea vemos que hay dos parámetros de url nuevos: &asyn=2&callback=cargarMapa. El primero (async=2) permite llamara de forma asíncrona (cuando nosotros queramos y no siempre cuando se carga el documento al completo), y el segundo (callback=cargarMapa) es el parámetro que le dice a Google Maps que función debe ejecutar una vez tenga todo lo necesario cargado para ser ejecutado.

Ponerlo en práctica es tremendamente sencillo y podemos sacarle mucha utilidad al tema, como por ejemplo, la siguiente demostración dónde cargamos el mapa cuando alguien hace clic sobre un botón:

http://www.marcosdev.com/ejemplos/googlemaps_async/index2.html

La diferencia entre el primer ejemplo y este segundo, reside en que la capa “mapa” la tengo escondida y que en vez de cargar el mapa directamente, le agrego una funcionalidad al botón para que este lo carge cuando hagan clic sobre él, y además, haga visible la capa:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Ejemplo de carga de forma asíncrona de Google Maps</title>
</head>
<body>
   <div id="mapa" style="width:300px;height:300px;display:none;">
      <p style="text-align:center"><strong>Cargando</strong></p>
   </div>
   <input type="button" name="bCargar" id="bCargar" value="Cargar Mapa" />
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="googleMaps.js"></script>
</body>
</html>

function cargarMapa(){
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("mapa"));
      map.setCenter(new GLatLng(39.578678,2.646021), 16);
  }
};

$(document).ready(function(){

   //Agregamos evento click al botón
   $('#bCargar').click(function(){
      //Mostramos la capa mapa
      $('#mapa').show();
      var api='ABQIAAAAOxTvdJxbyGuGB8_UUEe52xRHT0E5MDpBZnfhvo0jhLIefK70hRTYIol4_Lr75EWTtT9VjcaZzY2QWg';
      $.getScript('http://maps.google.com/maps?file=api&v=2.x&key='+api+'&async=2&callback=cargarMapa');
   });
});

Espero que les sea útil

P.D.: Los estilos de la capa “mapa” están escritos utilizando el atributo style. Esto no es una buena práctica; hay que utilizar ficheros CSS de estilos. Lo he hecho así para hacerlo más visible para todos.

P.D2.: En el segundo ejemplo se podría insertar la capa “mapa” en tiempo real sin necesidad de que esté en el código, pero sería menos didácticos para aquellas personas que tengan un nivel bajo de Javascript.

Podemos solventar el problema de una manera muy sencilla, cargar Google Analytics una vez se haya cargado el resto de las páginas. Esta situación tiene una ventaja muy grande, si Google Analytics se pone tontito, el resto de la página puede vivir en paz. A pesar de que lo voy a explicar a continuación se puede realizar de otras formas, voy a utilizar el framework jQuery por su sencillez y potencia.

Lo primero que debemos hacer es incluir la librería jquery. Yo todas las inclusiones de ficheros js las hago al final, justo antes de la etiqueta de cierre de body (Norma de aceleración de velocidad de carga de páginas web de YSlow).

<script type="text/javascript" src="jquery.js"></script>

Y justo debajo introducimos el siguiente código

<script type="text/javascript">
   $(document).ready(function(){
      $.getScript('http://www.google-analytics.com/ga.js',function(){
         if (typeof(_gat) == 'object'){
            var pageTracker = _gat._getTracker('UA-1806963-8');
            pageTracker._initData();
            pageTracker._trackPageView();
         }
      });
   });
</script>

Dentro del segundo bloque de código debes substituir UA-1806963-8 por tu ID de Google Analytics. Si queréis ver un ejemplo funcionando podéis visitar la siguiente página: http://www.holjoy.com

Un saludo

Duración: 13:03

Descarga en formato QuickTime

Como toda buena práctica de programación, nuestro código incluye sangrías y comentarios. Si no ponemos sangrías nuestro código se hace incomprensible, y si le quitamos los comentarios, dentro de unos meses nos acordaremos de aquel día que decidimos no escribir una frase aclaratoria de que hacía aquella función.

Por ello, existen multitud de herramientas que permite que a partir de un fichero javascript nuestro, se genere un fichero javascript reducido, es decir, sin espacios, sin comentarios, e incluso ofuscado (cambia nombre a las variables por letras o números y trata de reducir la comprensión del código por alguien que quiera copiarnos o analizarnos para un ataque).

Estas herramientas el problema que tienen es que debes tener un fichero para el desarrollo y luego de haber hecho los cambios oportunos, debes generar el fichero reducido.

En este tutorial veremos como podemos reducir en tiempo real los ficheros Javascript que precise nuestro documento mediante PHP (es necesario tener la versión 5). Además, si nuestra página utiliza más de un fichero js (javascript), lograremos reducir las peticiones al mínimo. Por ejemplo, nuestra página utiliza tres ficheros js nuestros, son tres peticiones. Lograremos reducirlo a únicamente una petición. Caso aparte es cuando debes realizar la inclusión de un fichero js como el de Google Maps, con el cual no puedes utilizar esta técnica.

Vamos manos a la obra.

Lo primero que necesitamos es descargar una librería llamada Jsmin-php. Podéis encontrarlo en su página web, y justo en la derecha hay un botón para accionar la descarga.

Descargamos el dichero jsmin-1.1.1.php (esta era la versión al momento de hacer este tutorial).

Supongamos que tenemos la siguiente estructura de ficheros:

En la imagen podemos observar que tenemos un fichero index.php en el cual hay el siguiente código:

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</meta></head>
<body>
<p id='parrafo'>Hola</p>

<script type='text/javascript' src='test.js'></script>
<script type='text/javascript' src='test2.js'></script>

</body>
</html>

Cómo se puede observar es un documento en blanco con un párrafo en el cual está escrito la palabra Hola. Este párrafo tiene como identificador único el id ‘parrafo’.

Más adelante podemos ver la llamada a dos ficheros js externos al documento. Cómo se puede apreciar, he puesto las inclusiones al final del documento, justo antes del final del body. Esto es una de las pautas a la hora de optimizar el rendimiento de una página web. En otro tutorial trataremos de una manera más profunda este tema.

El contenido de los ficheros js es el siguiente

Fichero test.js

/*
Esto es un fichero de prueba js
Conjunto de comentarios que explican el funcionamiento de este js
El código siguiente sustuirá el texto interior del párrafo identificado con el id parrafo
*/

document.getElementById('parrafo').innerHTML='esto funciona';

Fichero test2.js

//Comentario: esto va a mostrar un mensaje de alerta
alert('hola mundo');

El código del fichero test.js lo que hace es buscar dentro del documento un elemento que tenga como identificador ‘parrafo’ y le sustituye su contenido por un texto ‘esto funciona’.

El código del fichero test2.js lo que hace es mostrar un mensaje.

En ambos documentos se pueden ver muchos comentarios. Estos comentarios están bien para nosotros pero lo que hacen es hacer más lenta la carga de la página ya que el fichero tiene un mayor fichero.

Vamos a comenzar a solucionar este problema.

Para ello, lo primero que debemos hacer es crear un fichero php al cual le podemos llamar scripts.php. Este fichero tiene la función de solicitar los ficheros js que necesitemos, reducirlos y generar un documento único.

Para que el contenido final del documento sea entendido por el navegador como código javascript y no otro tipo de lenguaje debemos incluir como primera línea de nuestro fichero scripts.php el siguiente código:

header("content-type: application/x-javascript');

Ahora debemos incluir la librería jsmin que hemos descargado y la cual se encargará de optimizar el código:

require_once 'jsmin-1.1.1php';

La parte que viene ahora es muy sencilla. Debemos ejecutar la siguiente línea por cada fichero js que queramos llamar. En nuestro caso será dos veces:

echo JSMin::minify(file_get_contents('test.js'));

echo JSMin::minify(file_get_contents('test2.js'));

JSMin:minify es la orden que se encarga de reducir un determinado código. file_get_contents lo que hace es obtener el contenido de un determinado fichero. Por lo tanto esta orden lo que hace es obtiene el código de nuestros ficheros js, lo reduce y mediante la orden echo lo vuelca en pantalla, en nuestro caso, produciendo un nuevo fichero js.

El resultado es el siguiente:

document.getElementById('parrafo').innerHTML='esto funciona';
alert('hola mundo');

Cómo se puede observar ya no hay comentarios. Si el código tuviese sangrías o fuera más complejo, se podría observar muchas más diferencias.

Ahora ya sólo nos queda retocar el fichero index.php. Vamos a decirle que en vez de utilizar los dos ficheros js, utilice únicamente el fichero php que hemos generado. Con ello matamos dos pájaros de un tiro: reducimos las peticiones de 2 ficheros a 1, y generamos código reducido. Para ello sustituimos las siguientes líneas:

<script type='text/javascript' src='test.js'></script>

<script type='text/javascript' src='test2.js'></script>

Por esta

<script type='text/javascript' src='scripts.php'></script>

Listo. Ya tenemos nuestra página web con el js reducido y además hemos reducido el número de peticiones.

Espero que esto os pueda ser útil.

Ficheros del tutorial Reducir Js con PHP