JavaScript JsPerf

La mayor parte de las veces que trabajamos con JavaScript no tenemos ningún problema y todo funciona correctamente. Lamentablemente otras veces los problemas aparecen. Uno de los problemas más habituales es un problema de rendimiento. Por lo que sea nuestra aplicación no funciona todo lo rápido que deseábamos. Este tipo de problemas no es facil de encauzar y las posibles soluciones no nos vienen a la cabeza de forma automática. Sin embargo existen herramientas que nos pueden dar un pequeño respiro y ayudarnos a ver la luz al final del tunel. Una de las más habituales es JsPerf que es una herramienta online muy útil.

¿Como funciona JsPerf?

Realmente se trata de una herramienta muy sencilla. Imaginémonos que tenemos el siguiente bloque de código html.

<p>hola</hola>
<p>hola</hola>
<p>hola</hola>
<p>hola</hola>

Lo primero que hacemos es dar de alta este código como bloque HTML en la página de JsPerf :

Hecho esto queremos cambiar de color el texto de los párrafos a  azul .Podemos apoyarnos en JQuery para construir dos bloques de código el primero utilizará un selector “p” y el segundo utilizará un selector “:contains”.

Vamos a verlo en código:

<script type="text/javascript">

$(document).ready(function() {

$("p").css("color","blue");
})
</script>

Usando contains :

<script type="text/javascript">

$(document).ready(function() {

$(":contains('hola')").css("color","blue");
})
</script>

La pregunta clave es :¿ Cual rinde mejor?. Para ello nos podemos apoyar en JsPerf y crear dos casos de uso que comparen el rendimiento:

Creados los casos de uso los salvamos y ejecutamos el test  y vemos los resultados:

El resultado es claro el rendimiento de :contains es mucho peor.