Podemos usar la consola de las herramientas para desarrolladores para ver el tiempo que tarda en ejecutarse una parte del código y comprobar su rendimiento. En Google Chrome esto se hace con 2 instrucciones:
- console.time(nombre del timer): se coloca antes del código que queremos medir. Inicia un temporizador con el nombre que hayamos elegido, que será una cadena de texto.
- console.timeEnd(nombre del timer): se coloca después del código que queremos medir. Termina el temporizador con el nombre asociado, que será uno de los que hayamos iniciado antes con console.time(). Además escribe a la consola el resultado.
Uso
console.time('nombre');
// código a cronometrar
console.timeEnd('nombre');
Ejemplo
Por ejemplo, lo podemos usar para medir el tiempo que tarda en pintar 10000 lineas aleatorias de colores al azar, como vimos en un
post anterior:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
var canvas;
var ctx; //contexto del canvas.
function setup(){
// accedemos al canvas
canvas = document.getElementById('my_canvas');
// si se puede acceder al contexto del canvas
if (canvas.getContext){
// accedemos al contexto del canvas
// y llamamos a nuestra función de dibujo.
ctx = canvas.getContext('2d');
draw();
}
else { // el canvas no está soportado
alert('Este navegador no es compatible con canvas');
}
}
// nuestra función de dibujo
function draw(){
// lo ajustamos al tamaño de la ventana del navegador
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// dibujamos. En este caso, 10000 lineas aleatorias
// y medimos lo que tarda
console.time('tiempo que tarda en pintar');
pintaLineasAleatorias(canvas.width, canvas.height, 10000);
// hasta que termina
console.timeEnd('tiempo que tarda en pintar');
}
function pintaLineasAleatorias(width, height, n)
{
var x1, y1, x2, y2;
for (var i=0; i< n; i++)
{
x1 = Math.floor((Math.random()*(width + 1)));
x2 = Math.floor((Math.random()*(width + 1)));
y1 = Math.floor((Math.random()*(height +1)));
y2 = Math.floor((Math.random()*(height +1)));
ctx.strokeStyle = 'rgb('
+ Math.floor(Math.random()*256)
+ ',' + Math.floor(Math.random()*256)
+ ',' + Math.floor(Math.random()*256)
+ ')';
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.closePath();
ctx.stroke();
}
}
</script>
</head>
<body style="margin:0; padding:0; width:100%; height:100%;" onload="setup()" >
<canvas id="my_canvas" style="display:block;"></canvas>
</body>
</html>
Si abrimos el archivo html anterior en el Google Chrome y luego abrimos la consola de javascript (Ctrl+Mayús+J) veremos el tiempo que ha tardado en dibujar las 10000 lineas.
No hay comentarios:
Publicar un comentario