differenza di velocità di elaborazione tra classe CSS e ID

Question

Per questa domanda, sto solo confrontando la velocità di un browser nel rendering del CSS su 2 elementi che sono diversi solo in quello che ha una classe e uno ha un id.

(Questo non ha nulla a che fare con l'identificazione JS, l'uso di ancoraggio, ecc)

<div class="myclass">classed element</div> 
<div id="myid">ided element</div> 

Qualcuno ha numeri su questo? Ho letto che gli ID CSS sono "più veloci", ma da quanto? Ho intenzione di azzardare un'ipotesi che sia trascurabile, ma sarebbe interessante sapere.

Answer 1

http://oli.jp/2011/ids/

di ID sono veloce in alcuni casi, ma non tutti

Si tratta di una credenza comune che i selettori ID sono i più veloci, ma questo viene fornito con un grande avvertimento: ID sono più veloci CSS selettore solo se sono il selettore di chiave. Cos'è quello? Bene, mentre probabilmente leggi i selettori da sinistra a destra, i browser li leggono da destra a sinistra.

C'è anche un test delle prestazioni qui per la vostra richiesta numeri: http://oli.jp/2011/ids/#table1

Conclusione

ID di usato correttamente sono più veloci, ma con una differenza così minima vs classi - non vale la pena alcuna considerazione.

Mi sembra che non ci sono ragioni convincenti per utilizzare gli ID in selettori per styling¹ CSS, come le classi CSS possono fare gli ID tutto può. Spero che tu accetti che ci sono dei buoni motivi per non farlo. Pensaci la prossima volta che avvii un progetto personale o ridisegni il tuo sito, e prova ad aggiungere una classe (o ruoli dei punti di riferimento ARIA) per lo styling. Salva ID per identificatori di frammenti o hook JavaScript