Búsqueda de sitios web

¿Cómo se prueba el rendimiento del código JavaScript?

Ciclos de CPU, Uso de Memoria, Tiempo de Ejecución, etc.

Agregado: ¿Existe una manera cuantitativa de probar el rendimiento en JavaScript además de solo la percepción de qué tan rápido se ejecuta el código?

Respuesta #1

Los perfiles son definitivamente una buena manera de obtener cifras, pero en mi experiencia, el rendimiento percibido es todo lo que importa para el usuario/cliente. Por ejemplo, tuvimos un proyecto con un acordeón de Ext que se expandía para mostrar algunos datos y luego algunos grids anidados de Ext. Todo se estaba renderizando bastante rápido, ninguna operación individual tomaba mucho tiempo, simplemente había mucha información siendo renderizada al mismo tiempo, por lo que se sentía lento para el usuario.

Arreglamos esto, no cambiando a un componente más rápido, ni optimizando algún método, sino renderizando primero los datos, y luego renderizando las cuadrículas con un setTimeout. Así, la información aparecía primero, y luego las cuadrículas saltaban al lugar un segundo después. En general, tomó un poco más de tiempo de procesamiento hacerlo de esa manera, pero para el usuario, la percepción del rendimiento mejoró.

Hoy en día, el perfilador de Chrome y otras herramientas están disponibles universalmente y son fáciles de usar, al igual que
console.time() (documentación de Mozilla, documentación de Chrome)
console.profile() (documentación de Mozilla, documentación de Chrome)
performance.now() (documentación de Mozilla)
Chrome también te ofrece una vista de línea de tiempo que puede mostrarte qué está afectando tu tasa de frames, dónde el usuario podría estar esperando, etc.

Encontrar documentación para todas estas herramientas es realmente fácil, no necesitas una respuesta de Stack Overflow para eso. 7 años después, todavía repetiré el consejo de mi respuesta original y señalaré que puedes tener código lento ejecutándose para siempre, donde un usuario no lo notará, y código bastante rápido ejecutándose donde sí lo harán, y se quejarán de que el código bastante rápido no es lo suficientemente rápido. O que tu solicitud a la API de tu servidor tomó 220 ms. O algo así. El punto sigue siendo que si sacas un profiler y buscas trabajo para hacer, lo encontrarás, pero puede que no sea el trabajo que tus usuarios necesitan.

Respuesta #2

Estoy de acuerdo en que el desempeño percibido es realmente lo único que importa. Pero a veces solo quiero descubrir qué método para hacer algo es más rápido. A veces la diferencia es ENORME y vale la pena saberla.

Podrías simplemente usar temporizadores de JavaScript. Pero normalmente obtengo resultados mucho más consistentes usando los métodos de las herramientas de desarrollo nativas de Chrome (ahora también en Firefox y Safari) console.time() y 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 añadió recientemente el perfilado a nivel de línea en la pestaña de fuentes de las herramientas de desarrollo, ¡lo que te permite ver exactamente cuánto tiempo tardó en ejecutarse cada línea!

Respuesta #3

Siempre podemos medir el tiempo que tarda cualquier función con un simple objeto de fecha.

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;

Respuesta #4

Prueba jsPerf. Es una herramienta en línea de rendimiento de JavaScript para evaluar y comparar fragmentos de código. La uso todo el tiempo.

Respuesta #5

La mayoría de los navegadores ahora están implementando temporización de alta resolución en performance.now(). Es superior a new Date() para pruebas de rendimiento porque funciona independientemente del reloj del sistema.

Uso

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Referencias

  • https://developer.mozilla.org/en-US/docs/Web/API/Performance.now()
  • http://www.w3.org/TR/hr-time/#dom-performance-now

Respuesta #6

JSLitmus es una herramienta ligera para crear pruebas de referencia de JavaScript ad-hoc

Veamos el rendimiento entre expresión de función y constructor de función:

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

Lo que hice arriba es crear una expresión de función y un constructor de función que realizan la misma operación. El resultado es el siguiente:

Resultado de rendimiento de FireFox

Resultado de Rendimiento de IE

Respuesta #7

Algunas personas están sugiriendo complementos y/o navegadores específicos. Yo no lo haría porque solo son realmente útiles para esa única plataforma; una prueba en Firefox no se traducirá con precisión a IE7. Considerando que el 99,999999% de los sitios son visitados por más de un navegador, necesitas verificar el rendimiento en todas las plataformas populares.

Mi sugerencia sería mantener esto en el JS. Crea una página de benchmarking con todas tus pruebas de JS y mide el tiempo de ejecución. Incluso podrías hacer que haga un post AJAX de los resultados de vuelta a ti para mantenerlo totalmente automatizado.

Luego solo enjuaga y repite en diferentes plataformas.

Respuesta #8

Aquí hay una función simple que muestra el tiempo de ejecución de una función pasada:

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}

Respuesta #9

Tengo una pequeña herramienta donde puedo ejecutar rápidamente pequeños casos de prueba en el navegador y obtener los resultados de inmediato:

Prueba de velocidad de JavaScript

Puedes jugar con el código y descubrir qué técnica es mejor en el navegador probado.

Respuesta #10

Creo que las pruebas de rendimiento (tiempo) de JavaScript son bastante suficientes. Encontré un artículo muy útil sobre pruebas de rendimiento de JavaScript aquí.

Artículos relacionados