Os seletores de css de atributo de dados são mais rápidos que os seletores de class?

Alguns meses atrás, este artigo apontou que as classs poderiam ser evitadas todas juntas, a partir do desenvolvimento do website.

Minha pergunta é: quão eficientes são os seletores de dados em comparação com os seletores de class?

Um exemplo simples seria comparar os elementos de consulta com data-component='something' versus os elementos com class='class1 class2 something anotherClass' .

O seletor [data-=''] irá verificar o valor como um todo versus a class que deve ser dividida. Com isso em mente, os atributos de dados devem ser mais rápidos.

Então, para refinar a questão, no caso do CSS, é melhor termos o seletor de class ou o seletor de dados? E do ponto de vista do javascript, o jQuery("[data-component='something']") será mais eficiente que o jQuery(".something") ?

Eu não diria que é conclusivo , mas parece que os seletores de class são mais rápidos … Eu apenas juntei isso para um teste rápido.

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

EDITAR :

Baseado nos testes do Vlad e do meu jsperf … se o desempenho é uma preocupação (especialmente o IE) … as aulas ainda são o caminho a percorrer

Depois de verificar a resposta do BLSully e a página de teste que ele forneceu, aqui estão os números reais para comparação.

Desempenho do seletor de class jQuery versus operações de desempenho do seletor de atributo de dados jQuery por segundo:

  • 31% mais rápido no Chrome 27.0.1453
  • 140% mais rápido no Firefox 15.0.1
  • 131% mais rápido no Firefox 21.0
  • 1,267% mais rápido no IE 9.0
  • 1,356% mais rápido no IE 10.0

Tenho a impressão de que o desempenho dos seletores é rápido o suficiente agora mesmo nos navegadores móveis que estão por aí. A menos que você realmente planeje usar muito os seletores, atributos de dados ou classs baseadas (neste caso eu sugiro que você revise seu código para tentar armazenar em cache os seletores já consultados) nós podemos considerá-los não tão ruins assim. E eu diria mesmo que não é dramático usar estilo sobre os outros.

Acho que os fornecedores de navegadores gastaram mais tempo aprimorando o cenário mais usado (consulta em classs) do que consultando os seletores. Isso está mudando e eu não ficaria surpreso se eles começassem a otimizar outros casos também.

Eu não sei sobre todas essas respostas, mas eu corri meu próprio teste e atributo são mais rápidos.

você pode tentar você mesmo só economizar o tempo no começo, fazer a tarefa e obter o tempo final, em seguida, fazer as contas

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