Reducción de código Javascript

29Nov09

Dejando un poco de lado la programación web, esta vez vamos a hablar de cómo hacer un poco más rápido nuestra web.

Cuando cargamos una página,  normalmente vemos que, según la velocidad de nuestra conección, la información va apareciendo gradualmente y desde arriba hacia abajo. Esto es porque a medida que va recibiendo el código, lo va colocando en el browser.  Cuando encuentra un código javascript, se detiene la descarga de todo tipo de código para ocuparce únicamente de él. Una vez descargado, continúa con el resto de la página. Esto vale tanto para la inclusión de archivos externos javascript como el incluido directamente dentro de la página. Por eso es que se recomienda incluir o colocar este tipo de archivos o referencias al final del documento.

Se dice que deberíamos tener nuestro documento escrito de esta manera:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Titulo del documento</title>
</head>
<body>
<script type=”text/javascript” src=”js/archivo1.js”></script>
<script type=”text/javascript” src=”js/archivo2.js”></script>
<script type=”text/javascript” src=”js/archivo3.js”></script>
<script type=”text/javascript”>
//<![CDATA[
//codigo…
//]]>
</script>
</body>
</html>

Como verán, todo el código javascript está al final, justo antes de la etiqueta de cierre ‘</body>’.

Con lo anterior, estaríamos contribuyendo en algo a que nuestro código se cargue un poco mas rápido. Ahora bien, ¿hay alguna manera de cargar mas rápidamente el archivo ‘codigo1,js’ que se muestra mas arriba? pues sí. Para aumentar la velocidad de carga de los archivos externos, sólo tendríamos que eliminar todas aquellas características que no modifican el correcto funcionamiento del script pero que ocupan un espacio innecesario, como pueden ser los comentarios, las tabulaciones, lineas nuevas, etc.

Como internet nos provee de mucho de lo que necesitamos, existen varias opciones para hacer esto último en forma rápida y automatizada. Una muy buena opción la encontraremos entrando a http://www.bananascript.com/

El funcionamiento es muy simple: sólo tendremos que subir el archivo javascript que hemos escrito y presionar el botón ‘compress‘ para comprimir el código. El proceso de reducción del código nos mostrará algo como lo que vemos mas abajo.

En éste caso y a modo de ejemplo,  he subido el archivo ‘prototype.js’, de 124Kb. Luego de finalizado el proceso, debemos descargar un archivo del mismo nombre del que acabamos de subir y que figurará al lado de ‘Download‘. Una vez descargado podremos observar que, en nuestro caso, el nuevo archivo ‘prototype.js’ es de sólo 35,1KB. Una reducción de 71,4% !!!!

Anuncios


No Responses Yet to “Reducción de código Javascript”

  1. Dejar un comentario

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: