Sto cercando di trovare alcune semplici modifiche alle prestazioni lato client in una pagina che riceve milioni di visualizzazioni di pagine mensili. Una preoccupazione che ho è l'uso del selettore universale CSS (*).Qual è l'impatto sulle prestazioni del selettore universale?
Come esempio, si consideri un semplice documento HTML come il seguente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Il selettore universale applicherà la dichiarazione di cui sopra per gli elementi body, h1 e p, poiché queste sono le uniche nel documento.
In generale, dovrei vedere meglio le prestazioni da una norma come:
body, h1, p {
margin: 0;
padding: 0;
}
O sarebbe questo avere esattamente lo stesso effetto netto?
Il selettore universale esegue più lavoro di cui non sono a conoscenza?
Mi rendo conto che l'impatto sulle prestazioni in questo esempio può essere molto piccolo, ma spero di imparare qualcosa che potrebbe portare a miglioramenti delle prestazioni più significativi nelle situazioni del mondo reale.
Non ho intenzione di sovrascrivere gli stili nella regola del selettore universale con altri stili più avanti nel documento, ad esempio utilizzandolo come un foglio di stile di ripristino rapido e sporco. In realtà sto cercando di usare il selettore universale esattamente come penso che sia destinato - per applicare una regola a tutti gli elementi nel documento, una volta per tutte.
In definitiva, spero di determinare se c'è qualcosa di intrinsecamente lento nel selettore universale, o se ha appena un brutto colpo di rap a causa di un uso scorretto sfrenato. Se * { margin: 0; } è letteralmente equivalente a body, h1, p { margin: 0; }, allora questo risponderà alla mia domanda, e saprò di andare con il primo poiché è più conciso. Altrimenti, voglio capire perché il selettore universale funzioni più lentamente.
Dal punto di vista delle prestazioni, quando è _ever_ migliore disabilitare globalmente (o abilitare) una caratteristica per _everything_ solo per eventualmente reimpostarla? L'apprendimento delle impostazioni predefinite del browser non richiede molto tempo: è possibile ottenere suggerimenti dai file CSS "ripristinati", ma non mi spingerei a utilizzarne uno. I browser open source hanno impostazioni predefinite CSS open source che puoi guardare. – reisio
Non sono sicuro di aver capito la mia domanda. Non sto cercando di ripristinare e quindi riapplicare gli stili qui, ma piuttosto applicare una regola a ogni elemento della pagina. La mia domanda è se sia tecnicamente lo stesso usare il selettore universale così com'è selezionare singolarmente ogni elemento, o se comporta una penalizzazione delle prestazioni per qualsiasi motivo. – Bungle
'*' non è letteralmente equivalente a 'body, h1, p' per ovvi motivi. La * sola * ragione per cui si comporta più lentamente è perché si applicano gli stili a tutto, mentre ogni altro selettore ti limita a uno specifico sottoinsieme di elementi nel DOM. Ma la vera domanda è: è molto più lento che un browser non risponda applicando troppi stili? Ne dubito fortemente. Vedi anche: [* {ridimensionamento della casella: border-box} FTW] (http://paulirish.com/2012/box-sizing-border-box-ftw) – BoltClock