CSS e jQuery selettore di velocità

Question

In jQuery ogni volta che incontro qualcosa di simile:

$("div#MyDiv")..... 

Io generalmente dico sviluppatore: "Non preoccupatevi mettere il div davanti #MyDiv, selettori ID sono i più veloci. " Cioè

$("#MyDiv").... 

Ciò è perché quest'ultimo collegare direttamente document.getElementById invece di dover eseguire la scansione del DOM per tutti <div> primi elementi.

La mia domanda è: le stesse regole si applicano ai selettori CSS? Cioè piuttosto che:

div#MyDiv 
{ 
} 

E 'più veloce per avere semplicemente ?:

#MyDiv 
{ 
} 

(mi rendo conto che i selettori CSS sono incredibilmente veloci in ogni caso, quindi in realtà non sarebbe fare una differenza significativa.)

Molte grazie

EDIT

Qualsiasi collegamento o riferimento potrebbe essere utile ai fini di questa discussione. Grazie :-)

Answer 1

direi che è estremamente improbabile che fa alcuna differenza del mondo reale. In teoria, sì, è richiesto un numero inferiore di controlli (poiché lo standard div#foo deve corrispondere a div per corrispondere al selettore, in base a the spec). Ma le probabilità di fare una vera differenza in un'app browser reale? Vicino allo zero

Detto questo, io sempre rabbrividisco quando vedo cose come div#foo in applicazioni HTML. HTML ha solo un attributo di tipo ID (id), quindi non è necessario per l'ulteriore qualifica. Fai in modo che il motore di selezione CSS (del browser o di jQuery) lavori di più per capire cosa intendi, rendi il selettore fragile (se lo div diventa un footer, ad esempio), ecc.e, naturalmente, do lasciati aperti a un'implementazione di selettivamente non riuscendo a riconoscere che può cercare qualcosa per ID e quindi controlla se è un div e così va a cercare tra tutti i div s. (Esiste una tale implementazione? Forse, non si sa mai.) Escludendo alcuni casi limite, mi fa sempre pensare che qualcuno non sappia cosa stanno facendo.

Quindi per me la velocità non è l'argomento principale. L'inutilità è. ;-)

Answer 2

sì, questo è più veloce a causa della velocità di analisi e perché il browser non deve controllare se l'elemento è anche un <div>. (per alcune regole la differenza di velocità non è percepibile dall'utente)

Answer 3

Secondo this Mozilla article, fa la differenza, anche se un minuto. (Si noti che mentre questo articolo viene descritto lo styling interfacce utente XUL, il motore di layout Gecko viene utilizzato sia per rendere l'interfaccia utente di Firefox e le pagine Web viene caricato.)

L'ID è destinata ad applicarsi a un singolo elemento nel DOM in ogni caso, quindi il colpo di performance sostenuto dal tentativo di abbinare il nome del tag è completamente inutile, che sia significativo o meno. Per non parlare del fatto che sprecherebbe pochi byte nel tuo foglio di stile.