El uso de JavaScript console time , es una de las herramientas más útiles a la hora de validar el rendimiento de nuestro código de JavaScript. En muchas ocasiones nos encontraremos con resultados sorprendentes comparado con lo que esperabamos. Vamos a ver un ejemplo apoyándonos en jQuery.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
for(var i=0;i<1000;i++) {
$("hola").appendTo("body");
}
$("#ocultar").click(function() {
console.time("ocultar");
$("p").toggle();
console.timeEnd("ocultar");
})
$("#mostrar").click(function() {
console.time("mostrar");
$("p").toggle();
console.timeEnd("mostrar");
})
});
</script>
</head>
<body>
<input type="button" value="ocultar" id="ocultar"/>
<input type="button" value="mostrar" id="mostrar"/>
</body>
</html>
Disponemos de un bloque de código que muestra 1000 párrafos en pantalla y queremos mostrarlos o ocultarlos todos a la vez.Para poder abordar esta situación hemos utilizado los métodos hide y show de jQuery.
JavaScript console time
Vamos a usar los métodos time y timeEnd de la consola de JavaScript para medir el tiempo que tardamos en mostrar y ocultar el grupo de párrafos.
$("#ocultar").click(function() {
console.time("ocultar");
$("p").hide();
console.timeEnd("ocultar");
})
$("#mostrar").click(function() {
console.time("mostrar");
$("p").show();
console.timeEnd("mostrar");
})
En este caso hemos calculado el tiempo que tarda en ejecutarse tanto el show() como el hide() apoyándonos en el método time para inicializar la cuenta y en el método timeEnd para finalizarla.
La consola imprimirá :
El programa ha tardado 15 milisegundos en ocultar todos los elementos y 2 milisegundos en volver a mostrar todo. ¿Qué pasaría si en vez de usar show o hide usara toggle() ? . El nuevo código sería:
$("#ocultar").click(function() {
console.time("ocultar");
$("p").toggle();
console.timeEnd("ocultar");
})
$("#mostrar").click(function() {
console.time("mostrar");
$("p").toggle();
console.timeEnd("mostrar");
})
El código es más sencillo , incluso podríamos refactorizarlo para simplificar el programa. ¿Ahora bien cual es su rendimiento?.
El resultado es sensiblemente peor .Esto nos puede sorprender en un primer momento , pero es la realidad . El método toggle es más sencillo de utilizar pero su implementación es más compleja y su rendimiento menor. Hemos utilizado JavaScript console time para clarificar el rendimiento de nuestro código. Recordemos que abordar un tema de optimización solo hay que hacerlo cuando tengamos una necesidad clara.
Otros artículos relacionados: JavaScript Promises , JavaScript call vs apply , JavaScript Closure
