La optimización de selectores es menos importante de lo que solía ser,debido a la implementación en algunos navegadores de document.querySelectorAll(), pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.
9.5.1. Selectores basados en ID
Siempre es mejor comenzar las selecciones con un ID.
// rápido
$('#container div.robotarm');
// super-rápido
$('#container').find('div.robotarm');El ejemplo que utiliza $.fn.find es más rápido debido a que la primera selección utiliza el motor de selección interno Sizzle — mientras que la selección realizada únicamente por ID utiliza document.getElementById(), el cual es extremadamente rápido debido a que es una función nativa del navegador.
9.5.2. Especificidad
Trate de ser especifico para el lado derecho de la selección y menos especifico para el izquierdo.
// no optimizado
$('div.data .gonzalez');
// optimizado
$('.data td.gonzalez');Use en lo posible etiqueta.clase del lado derecho de la selección, y solo etiqueta o .clase en la parte izquierda.
Evite especificidad excesiva.
$('.data table.attendees td.gonzalez');
// mucho mejor: eliminar la parte media de ser posible
$('.data td.gonzalez');La segunda selección tiene mejor rendimiento debido a que atraviesa menos capas para buscar el elemento.
9.5.3. Evitar el selector universal
Selecciones en donde se especifica de forma implícita o explicita unaselección universal puede resultar muy lento.
$('.buttons > *'); // muy lento
$('.buttons').children(); // mucho mejor
$('.gender :radio'); // selección universal implícita
$('.gender *:radio'); // misma forma, pero de forma explícita
$('.gender input:radio'); // mucho mejor