Midiendo el rendimiento de Objetos y Arrays en Javascript

Cuando desarrollamos aplicaciones Javascript de gran envergadura, necesitamos almacenar gran cantidad de datos.

Los navegadores actuales compatibles con HTML5 incorporan el bendito ‘almacenamiento local‘ (local storage) pero, cuando tenemos que mantener la compatibilidad con entornos más antiguos, tenemos que recurrir a las opciones nativas del lenguaje: arrays y objetos.

La cuestión en estos casos es saber cúal de los dos métodos es más rápido en tiempos de escritura-lectura. Para comprobarlo, como viene siendo habitual últimamente, preparamos los códigos necesarios para evaluarlos uno a uno y encontrar la mejor opción.

Para realizar las pruebas, recurriremos de nuevo a la herramienta JSPerf. El ejemplo online está aquí.

El código

El código para los Arrays:

var myArr = [];
for( var x = 0; x < 10000; x++ ){
  myArr[ x ] = "La donna e mobile";
}

Y el de los objetos:

var myObj = {};
for( var x = 0; x < 10000; x++ ){
  myObj[ x ] = "La donna e mobile";
}

Los resultados

Los resultados son los siguientes:

Objetos vs Arrays en Javascript

Tabla interesante: mientras que en otros navegadoes apenas hay diferencias, en Firefox los arrays son sustancialmente más rápidos que los objetos.

NOTA: Recordamos que los números que aparecen en la tabla corresponden a operaciones por segundo y que, por tanto, más es mejor.

Conclusión

Con los datos anteriores, la cuestión inicial queda aclarada: cuando necesitamos almacenar grandes cantidades de datos, la mejor opción es el array. Firefox tiene problemas para acceder y recorrer objetos, mostrando un rendimiento muy pobre frente a IE9 u Opera.

Por otro lado, una vez más, Chrome supone una gran diferencia: 3 veces más rápido que su inmediato perseguidor Opera y casi 10 en comparación con IE9. Y con cada versión mejora…

Acerca de Carlos Benítez

Programador Web y arquitecto Javascript. Fundador de www.etnassoft.com y OpenLibra, la Biblioteca Libre Online
Esta entrada fue publicada en Javascript y etiquetada , , , , , . Guarda el enlace permanente. Sígueme en Twitter

Últimos libros gratuitos añadidos a OpenLibra

{4} Comentarios.

  1. 25Mar2011/
    17:25 h /

    Según la tabla también parece que en Chrome son más rápidos los objetos:

    4101 con arrays
    4462 con objetos

    Es una comparativa muy interesante.

    • 25Mar2011/
      20:07 h /

      Si; en Chrome parece que se accede a los objetos algo más rápido que a los arrays, pero la diferencia es poco importante. Es en Firefox donde encontramos la orquilla más amplia y la que tenemos pues que tomar como referencia.

      Saludos!

  2. 13Nov2013/
    7:44 h /

    Creo que nos estas despistando o hay un error de colores en la gráfica, en esta has marcado de verde los más rápidos, salvo el primero, chrome.

    Salu2

    • 13Nov2013/
      8:15 h /

      No veo ningún error: en cada fila se ha marcado en verde el elemento más rápido, para ver de un vistazo cómo los arrays se gestionan de forma más eficiente que los objetos.

      Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Licencia Creative Commons 3.0

®Copyright 2016. Cotenido web bajo licencia Creative Commons 3.0

Códigos bajo licencias MIT y GPL. Ver página de licencias para más información