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:
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…
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.
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!
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
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!