¿Cómo se prueba el rendimiento del código JavaScript?
¿Ciclos de CPU, uso de memoria, tiempo de ejecución, etc.?
Agregado: ¿Existe una forma cuantitativa de probar el rendimiento en JavaScript además de la percepción de qué tan rápido se ejecuta el código?
Los perfiladores son definitivamente una buena manera de obtener números, pero en mi experiencia, el rendimiento percibido es lo único que le importa al usuario/cliente. Por ejemplo, teníamos un proyecto con un acordeón Ext que se expandía para mostrar algunos datos y luego algunas cuadrículas Ext anidadas. En realidad, todo se procesaba bastante rápido, ninguna operación tomaba mucho tiempo, solo se procesaba mucha información a la vez, por lo que el usuario lo sentía lento.
"Solucionamos" esto, no cambiando a un componente más rápido u optimizando algún método, sino renderizando los datos primero y luego renderizando las cuadrículas con un setTimeout. Entonces, la información aparecía primero, luego las cuadrículas aparecían en su lugar un segundo después. En general, tomó un poco más de tiempo de procesamiento hacerlo de esa manera, pero para el usuario, el rendimiento percibido mejoró.
Hoy en día, el generador de perfiles de Chrome y otras herramientas están disponibles universalmente y son fáciles de usar, al igual que
console.time()( mozilla-docs , chrome-docs )
console.profile()( mozilla-docs , chrome-docs )
performance.now()( mozilla-docs )
Chrome también te ofrece una vista de línea de tiempo que puede mostrarle qué está afectando su velocidad de fotogramas, dónde podría estar esperando el usuario, etc.
Encontrar documentación para todas estas herramientas es realmente fácil, no necesita una respuesta SO para eso. 7 años después, seguiré repitiendo el consejo de mi respuesta original y señalaré que se puede ejecutar un código lento para siempre donde un usuario no lo notará, y un código bastante rápido ejecutándose donde sí lo haga, y se quejarán del El código bastante rápido no es lo suficientemente rápido. O que su solicitud a la API de su servidor tardó 220 ms. O algo así. El punto sigue siendo que si tomas un generador de perfiles y buscas trabajo que hacer, lo encontrarás, pero puede que no sea el trabajo que tus usuarios necesitan.
Estoy de acuerdo en que el rendimiento percibido es realmente lo único que importa. Pero a veces sólo quiero saber qué método de hacer algo es más rápido. A veces la diferencia es ENORME y vale la pena conocerla.
Podrías usar temporizadores de JavaScript. Pero normalmente obtengo resultados mucho más consistentes usando los métodos devTool nativos de Chrome (ahora también en Firefox y Safari) console.time().console.timeEnd()
Ejemplo de cómo lo uso:
var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
functionOne();
};
console.timeEnd('Function #1')
console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
functionTwo();
};
console.timeEnd('Function #2')
Actualización (4/4/2016):
Chrome Canary agregó recientemente Perfil de nivel de línea en la pestaña de fuentes de herramientas de desarrollo, que le permite ver exactamente cuánto tiempo tardó en ejecutarse cada línea.
