Optimiza tu codigo jquery

Con la llegada del framework jQuery, el proceso de escritura de código JavaScript se a hecho demasiado fácil tanto para programadores principiantes como expertos, La finalidad de esta serie de artículos es realizar una serie de cambios en el código el cual mejorara la legibilidad y/o el rendimiento de manera significativa.

Vamos empezar una serie de artículos en los cuales daremos algunos concejos para optimizar el rendimiento de jQuery en nuestros proyectos web, ya que últimamente esta sonando mucho el tema de la velocidad de carga de la pagina web como factor de posicionamiento para Google.

Lo primero que vamos a hacer es construir una plataforma de pruebas, que como su nombre lo indica, realizaremos la pruebas de velocidad del código jQuery.

Código pagina de pruebas.-

< !DOCTYPE html>
< html>
< head>
< title> Pagina de pruebas para jquery < /title>
< /head>
< body>
< div id="container">
< div class="block">
< p id="first"> Parte del texto aquí < /p>
< ul id="someList">
< li class="item"> < /li>
< li class="item selected" id="mainItem"> Oh, hola! < /li>
< li class="item">< /li>
< li class="item">< /li>
< /ul>
< /div>
< /div>
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">< /script>
< script>
console.profile();

// Tu codigo aqui

console.profileEnd();
< /script>
< /body>
< /html>

Descargar Código de pruebas.

Respecto al código anterior, nosotros colocaremos nuestro script jquery entre console.profile() y console.profileEnd() para comenzar a realizar las pruebas.

En este código no hay nada especial, pero utilizaremos firebug para realizar las pruebas y registrar los tiempos de las pruebas, el proceso es ir a la consola de firebug y presionar perfilar para comenzar a registrar los tiempos de prueba y presionar otra ves perfilar para ver los resultados de la prueba.

Fuente.