Utilizar selectores de manera efectiva en jquery

Esta es la tercera entrega del mini curso de optimizacion para código jQuery, en este nuevo articulo vamos a hablar sobre la mejor manera de utilizar los selectores, bien empecemos.-

Al momento de pasar selectores hay que utilizar un ID en lugar de una CLASE, se preguntaran por que? bueno la respuesta es por que jQuery utiliza directamente el nativo getElementByld (método para buscar elementos ID), mientras que en el caso de las CLASES tiene que hacer un sin fin de cosas para buscarlas, sobretodo en los navegadores antiguos, haciendo mas lento el proceso.

A continuación veremos distintos selectores apuntando al elemento li, veremos el rendimiento en nuestra plataforma de pruebas y como ir mejorando dicho rendimiento.

El primer método que vamos a utilizar va a ser la clase selected y veremos que resultados nos lanza firebug.

console.profile() ;  
$(".selected");  
console.profileEnd();

Como ven en la imagen el resultado del proceso tarda 0.308 mili segundos, ahora en el segundo método que vamos a utilizar la etiqueta li, con la que se pretende reducir la búsqueda delimitandola solo ese elemento DOM y por consiguiente optimizar el proceso, con document.getElementsByTagName.

console.profile() ;  
$("li.selected");  
console.profileEnd();

El resultado del proceso a descendido ligeramente a 0.291 mili segundos, como verán las diferencias son insignificantes, esto es debido a que las pruebas se realizan en un navegador actual, pero si repiten las pruebas en un navegador antiguo (por ejemplo Internet explorer 6) notaran la gran diferencia que existe entre un método y el otro.

En el tercer método vamos a descender desde el ID de un elemento padre.

console.profile() ;  
$("#algunalista .selected");  
console.profileEnd();

El tiempo del proceso disminuye a 0.283 mili segundos, pero vamos a intentar ser un poco mas específicos, y vamos a descender desde el id de un elemento padre y a especificar también el elemento DOM.-

console.profile() ;  
$("#algunalista li.selected");  
console.profileEnd();

Veran que el tiempo de ejecución del proceso sigue disminuyendo, ahora solo tardo 0.275 mili segundos, por ultimo vamos a utilizar una ID (identificador).-

console.profile() ;  
$("#mainItem");  
console.profileEnd();

Como verán el resultado es realmente impresionante, ya que al utilizar una clase el resultado era de .291 mili segundos y tan solo por utilizar un identificador el resultado a descendido a 0.165 mili segundos, notan la gran diferencia?

Estos ejemplos nos permiten observar que utilizar métodos nativos es mucho mas rápido, ademas hay que tener en cuenta que navegadores modernos tienen la ventaja de aprovechar cosas como getElementsByTagName y los navegadores antiguos no, y esto hace que sus procesos sean mas lentos.

Cualquier duda que tengan pueden dejarla en el área de comentarios, Saludos.

Fuente.