2013-04-16 17 views
5

Non so se concatenare sia il termine giusto.
parlo di codifica in questo modo:Prestazione concatenamento CSS

html > body > div > ul > li > a{ 
     /*css*/ 
    } 

ho parlato con un mio amico che mi ha detto che la codifica CSS come questo sta dando bassa perfomance sul browser durante il rendering CSS.
Quindi è vero o dovrei davvero dichiarare solo le classi/id e specificare su di esse?

+3

Si dovrebbe chiedere per qualsiasi prova – MarcinJuraszek

+0

Quando lo scopo è più, si sta iterando attraverso molti elementi dom. Una buona pratica è quella di utilizzare un ambito minimo come la ricerca per ID elemento. – dinukadev

+0

@Johnson - Sì! Potrebbe essere un uomo! ; o) – Paul

risposta

1

Se solo si desidera applicare a un elemento all'interno di un certo elemento, si può provare qualcosa di simile:

#ullID li{ ... } 

In questo modo, è possibile impostare gli stili per i li tag all'interno dell'elemento #ullID. Se si vuole andare ancora più in profondità, si può fare in questo modo:

#ullID li a{ ... } 

direi che questo sarà prestazioni più veloci saggio in contrasto con usando:

html > body > div > ul > li > a{ ... } 

Spero che questo aiuti :)

3

Secondo me è necessario utilizzare il minor numero di regole di selezione richieste. Più regole impiegano più tempo per elaborare.

Quindi sì, è meglio usare le classi e gli ID.

Anche l'esempio che ha dato sopra, se si sta cercando di applicare il CSS a tutti i tag che funzionerà bene con appena

a { 
/* css */ 
} 
+0

Questo era solo un esempio. A volte ho css-es molto grandi e quando mi piacciono solo le classi mi sto confondendo un po 'e poi ho iniziato a codificarlo in questo modo. Ma diciamo che ho 3 ul-s nella pagina e ognuno di loro ha uno stile diverso. È bene impostare ID e specificare come #ulID> li e #ulID> li> a? –

7

Si dovrebbe solo essere il più specifici devi essere al fine di indirizzare i tuoi elementi L'uso dell'id è preferibile.

In fin dei conti, questo tipo di micro ottimizzazione è piuttosto irrilevante. Solo la pena di guardare una volta che avete ottimizzato praticamente tutto il resto (la compressione delle immagini, che serve di contenuti statici, utilizzando sprite CSS, riducendo al minimo le attività ecc)

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

+0

+1 per il collegamento a dati di test effettivi, piuttosto che speculando selvaggiamente come tutte le altre risposte. – RichieHindle

2

CSS viene letto dal browser da destra a a sinistra, nel senso che nel tuo esempio il browser cercherebbe tutti i <a>, quindi per il genitore <li>, fino a quando non raggiunge <html>.

Quindi sì, per le prestazioni, questo stile di stili di scrittura è negativo per le prestazioni.

1

Ecco un approssimazione approssimativa di selettori ottimizzazione:

  1. id (#myid)
  2. classe (.myclass)
  3. tag (div, h1, p)
  4. voce dell'Elenco
  5. adiacente di pari livello (H1 + p)
  6. voce dell'Elenco bambino (ul> li)
  7. discendente (li a)
  8. universale (*) 9.attribute (a [rel = "esterno"])
  9. pseudo-classe e pseudo elemento (a: hover li: first)

a e questo sono cose da tenere a mente quando si parla di SEO aboult. Questo non significa che devi dimenticarti di tutti e usare solo classe e id. Il fatto è che quando dici il tuo div #child ul li a img il browser guarda prima e img e guarda se ha un genitore a che ha un genitore li e così via.