"$.each" de jQuery vs "for" de JavaScript. ¡Sorpresa!

Buenas, hoy estuve discutiendo con un amigo sobre cual de estos dos loops (bucles) es mas rapido. Aunque los 2 coincidíamos en que en pequeñas arrays no habría diferencia, mi amigo decia que en grandes arrays probablemente $.each ganaría.

Pues me dispuse a hacer un simple test.

console.time() y console.timeEnd()

Para los que no lo sepan, si tenéis Chrome, Firefox o una consola javascript instalada en vuestro navegador, podéis utilizar las funciones console.time('id') y console.timeEnd('id') para medir el tiempo predeterminado que tarda cierto script en procesarse.

/* Iniciamos timer */
console.time('nombre_evento');

 algo_de_javascript();

/* Finalizamos timer */
console.timeEnd('nombre_evento');

¿Y cual es mas rápido?

Para el test elabore un simple javascript.

<script type="text/javascript" src="jquery.js"></script>
<script>
   var array_test=new Array('arrayyyyyyyyyyyyyyy');

   /* Iniciamos bucle for nativo. */
   console.time('for-nativo');
   /* Bucle */
   for(i=0; i<array_test.length; i++){array_test[i];}
   /* Paramos bucle for nativo */
   console.timeEnd('for-nativo');

   ////////////////////////////////////////

   /* Iniciamos bucle $.each jquery */
   console.time('each-jquery');
   /* Bucle */
   $.each(array_test,function(index,valor){valor;});
   /* Paramos bucle $.each jQuery */
   console.timeEnd('each-jquery');

</script>

Para el array he utilizado un array del tipo stringArray.

array_test=new Array("00", "01", "02", "03", "04", "05", "06", "07", "08", "09");

Y fui aumentando el numero de elementos de 10 a 100, 10000, 100000 y finalmente 1000000. Al principio no se notaba gran diferencia pero luego fue aumentando.

FOR NATIVO
---------
10 - 1ms
10000 - 9ms
100000 - 65ms
1000000 - 752ms

$.each Jquery
---------
10 - 1ms
10000 - 11ms
100000 - 154ms
1000000 - 1512ms

Como podéis ver si el array no excede de 100 mil elementos la diferencia entre $.each y for es casi nula pero luego va aumentando considerablemente.

¡La sorpresa!

Luego me dio por crear un array con un numero de index predeterminado. Osease:

var array_test=new Array(100000);

Como sabréis, esto solo crea un array con un lenght de 100000. Pero los elementos son "undefined" osease vacios. Mi sorpresa fue ver esto:

Al parecer el for nativo de JavaScript se da cuenta de que el array esta "vació" y no se molesta en procesarlo. Sin embargo el $.each de jQuery si lo hace..

¿ Curioso verdad ?

Saludos