Perché i selettori come [title = "home"] sono più lenti rispetto all'utilizzo della classe?

Ho letto un sacco di articoli sulle prestazioni CSS, come;Perché i selettori come [title = "home"] sono più lenti rispetto all'utilizzo della classe?

ricevo perché selettori come questo sono cattivi

#social a { 
}

Come il browser leggerà un prima, poi è costretto a loop attraverso tutti gli <a> tag nella pagina.

Ma perché è un selettore come ad esempio un [title = "casa"] più lento rispetto all'utilizzo di un classe?

Suppongo che il browser crei una sorta di indice per essere in grado di capire quali elementi hanno una determinata classe (corretto?).

Ma i browser non dovrebbero aver indicizzato quali elementi hanno un determinato attributo? (come title)?

La mia domanda è; perché l'elemento CSS/cerca più lentamente quando si utilizzano selettori come a [title = "home"] rispetto all'utilizzo di una classe ? Cosa o come fa il browser per fare in modo che il risultato sia molto più lento?

fonte

2013-08-30 corgrath

"Ma i browser non dovrebbero aver indicizzato quali elementi hanno un determinato attributo?" - Pensi, questo ha un senso? Una classe dice qualcosa come "Ehi, io sono di questo tipo, chiunque può fare qualcosa con me!" mentre un attributo segnaposto dice semplicemente "Yo, browser, rendimi in questo modo e poi dimentica di me".E poiché l'indicizzazione richiede un po 'di tempo, penso che i browser decidano di indicizzare solo il primo tipo di attributi. – contradictioned

FYI, il termine "selettore universale" si riferisce specificamente al selettore '*'. 'a [title =" home "]' non è un selettore universale; '[title =" home "]' senza 'a', d'altra parte, si potrebbe dire che usa un selettore universale * implicito * perché è equivalente a' * [title = "home"] '. – BoltClock

Inoltre, "Mentre il browser leggerà un primo, quindi è costretto a scorrere tutti i tag nella pagina." Questo non è il modo in cui i browser mainstream si comportano; vedi http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left – BoltClock

Gli implementatori del browser ottimizzano i casi più comuni. Poiché le classi vengono utilizzate molto frequentemente per abbinare gli stili, devono implementarle nel modo più efficiente possibile. Quando caricano in CSS, indicizzano le classi per renderlo possibile.

Dal momento che selettori casuali come title="home" non vengono utilizzati molto frequentemente, possono farla franca implementandoli con ricerche più semplici. Non avrà tanto impatto sulle prestazioni, perché sarà usato raramente.

Anche le classi richiedono un trattamento speciale nel browser, poiché un elemento può avere più classi, ad es. class="foo bar baz". Durante l'analisi del documento, il browser deve suddividerlo in modo che corrisponda a qualsiasi di essi rispetto ai selettori CSS.

fonte

2013-08-30 09:22:30 Barmar

Quindi la tua risposta è fondamentalmente, i browser moderni creano indici per le classi, ma non per qualsiasi altri attributi. Quindi, utilizzando qualsiasi altro attributo rispetto all'attributo class ci sarà più lento? – corgrath

Sì. Le classi e gli ID sono destinati all'uso nei selettori, quindi sono stati ottimizzati per tale uso. – Barmar

Si noti che per questo motivo, l'utilizzo di un selettore di attributo che corrisponde all''attributo 'class' non è ottimizzato. (Inoltre, se stai usando selettori di attributo per abbinare i nomi di classe, probabilmente stai cercando di farli corrispondere usando criteri speciali che non possono essere raggiunti comunque con un selettore di classe.) – BoltClock

Benchmark

Conclusioni

Nella maggior parte dei casi selettore di attributo' con attributo sconosciuto, per esempio [a = "b"] "e" selettore di attributi con attributo noto, ad es. [title = "a"] "è apparso nella categoria" 3 peggiore ". È sicuro che dovresti evitare quei selettori.

fonte

2013-08-30 09:28:29

Perché hai provato tali vecchie versioni del browser? – Barmar

@Barmar: non è stato lui a scrivere questi test. Steve Souders ha fatto. L'articolo da cui è tratto il grafico è stato scritto 4 anni fa. – BoltClock

Nessuna delle pagine di test usa selettori come 'a [title =" home "]'. – Barmar

Perché i selettori come [title = "home"] sono più lenti rispetto all'utilizzo della classe?

risposta

Problemi correlati