¿Los selectores css de atributo de datos son más rápidos que los selectores de clase?

Question

Hace unos meses this article señaló que las clases realmente podrían evitarse juntas desde el desarrollo del sitio web.

Mi pregunta es, ¿qué tan eficientes son los selectores de datos en comparación con los selectores de clase?

Un ejemplo simple sería comparar la consulta de elementos con data-component='something' frente a elementos con class='class1 class2 something anotherClass'.

El selector [data-<attr>='<value>'] comprobará el valor como un todo frente a la cadena de clase que se debe dividir. Con esto en mente, los atributos de datos deberían ser más rápidos.

Por lo tanto, para refinar la pregunta, en el caso de CSS, ¿nos va mejor con selector de clase o selector de datos? Y desde un punto de vista de javascript, ¿será jQuery("[data-component='something']") más eficiente que jQuery(".something")?

Answer 1

No lo llamaría concluyente , pero parece que los selectores de clase son más rápidos ... Acabo de armar esto para una prueba rápida.

http://jsperf.com/data-selector-performance

EDITAR:

Sobre la base de Vlad y mis pruebas jsperf ... si el rendimiento es una preocupación (especialmente IE) ... clases siguen siendo el camino a seguir

Answer 2

Tengo la impresión de que el rendimiento de los selectores es lo suficientemente rápido en este momento, incluso en los navegadores móviles. A menos que realmente planee usar selectores mucho, atributos de datos o basados ​​en clases, (en cuyo caso, sugeriría revisar su código para intentar almacenar en caché los selectores ya consultados) podemos considerarlos no tan malos. E incluso diría que no es dramático utilizar el estilo sobre los demás.

Creo que los proveedores de navegadores han pasado más tiempo mejorando el escenario más utilizado (consulta en contra de clases) que consultando contra selectores. Esto está cambiando y no me sorprendería que comiencen a optimizar otros casos también.

Answer 3

Después de verificar la respuesta de BLSully y el test page que proporcionó, estas son las cifras reales para comparar.

jQuery rendimiento selector de clase vs jQuery atributo de datos de rendimiento de las operaciones de selección por segundo:

• 31% más rápido en Chrome 27.0.1453
• 140% más rápido en Firefox 15.0.1
• 131% más rápido en Firefox 21,0
• 1.267% más rápido en IE 9,0
• 1.356% más rápido en IE 10,0

Answer 4

No sé sobre todas estas respuestas pero ejecuté mi propia prueba y el atributo es más rápido.

puede intentar usted mismo acaba de guardar el tiempo al principio, hacer la tarea y obtener la última vez y luego hacer los cálculos

\t \t var newDate = new Date().getTime(); 
 
\t \t $('.test-t').removeClass('act'); 
 
\t \t $('.t1r').addClass('act'); 
 
\t \t var currentDate = new Date().getTime(); 
 
\t \t var diff = currentDate-newDate; 
 
\t \t console.log(diff); 
 

 
\t \t var newDate = new Date().getTime(); 
 
\t \t $('.test-t2').attr('this-act',''); 
 
\t \t $('.t2r').attr('this-act','1'); 
 
\t \t var currentDate = new Date().getTime(); 
 
\t \t var diff = currentDate-newDate; 
 
\t \t console.log(diff);