Optimizar javascript con HeadJS


HeadJS es una libreria muy buena, que optimiza al máximo la carga de todos los javascripts de tu web, cargándolos de manera asisncrona de forma que se carguen mas rapido que de la forma habitual, o sea al final del html antes de la etiqueta </body>.

Un ejemplo práctico:

1. Lo que el usuario novato suele hacer…(al principio)

<!doctype html>
<html>
<head>
<meta charset=»utf-8″/>
<title>SCRIPT SRC in head</title>
<link rel=»stylesheet» href=»estilo.css»>
<script src=»http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js»></script>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js»></script>
<script src=»http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js»></script>
<script src=»http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js»></script>
<script src=»http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js»></script>
</head>
<body>
<div id=»wrap»>
….contenido
fin contenido….
</div>
</body>
</html>

2. Lo que recomiendan en casi todos lados para optimizar la velocidad….(al final)

<!doctype html>
<html>
<head>
<meta charset=»utf-8″/>
<title>SCRIPT SRC at bottom</title>
<link rel=»stylesheet» href=»estilo.css»>
</head>
<body>
<div id=»wrap»>
….contenido
fin contenido….
</div>
<script src=»http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js»></script>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js»></script>
<script src=»http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js»></script>
<script src=»http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js»></script>
<script src=»http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js»></script>
</body>
</html>

3. Lo que yo hago y recomiendo…de verdad se nota el cambio (usar HeadjS)

<!doctype html>
<html>
<head>
<meta charset=»utf-8″/>
<title>SCRIPT SRC con headjs</title>
<link rel=»stylesheet» href=»estilo.css»>
<script src=»../js/head.min.js»></script>
head.js(«http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js»)
.js(«http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js»)
.js(«http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js»)
.js(«http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js»)
.js(«http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js»);
</head>
<body>
<div id=»wrap»>
….contenido
fin contenido….
</div>
</body>
</html>

Solo debeis añadir el javascript de HeadjS y juego cargar con head.js(«una libreria») seguido de .js(«otra libreria») y finalizar con ;

Eso es todo probadlo y vereis los cambios…

Si no sabeis que descargar os dejo la versión 0.99 de la libreria y minimizada para descargar. Es esta http://db.tt/Tn08GgBl

Un saludo. nos veremos pronto.

2 comentarios en “Optimizar javascript con HeadJS

  1. comandosparalinux

    Hola! Muy bueno tu blog! Felicidades! Estoy tratando de desarrollar un software de escritorio para analizar la seguridad de las redes inalambricas, estaba pensando en hacerlo con java, que me recomiendas?

    Responder
    1. sramekim Autor

      No se que decirte…pero si usas Windows…pues si. Pero como yo estoy trabajando siempre bajo Linux prefiero Python. Ahora si es por compatibilidad para portar el codigo a varios lenguajes tu elección es correcta. Un saludo.

      Responder

Deja un comentario