I'm trying to find some simple client-side performance tweaks in a page that receives millions of monthly page views. One concern that I have is the use of the CSS universal selector (*).
As an example, consider a very simple HTML document like the following:
<!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>
The universal selector will apply the above declaration to the body, h1 and p elements, since those are the only ones in the document.
In general, would I see better performance from a rule such as:
body, h1, p {
margin: 0;
padding: 0;
}
Or would this have exactly the same net effect?
Does the universal selector perform more work that I may not be aware of?
I realize that the performance impact in this example may be very small, but I'm hoping to learn something that may lead to more significant performance improvements in real-world situations.
I don't intend to override the styles in the universal selector rule with other styles later in the document - i.e., using it as a quick and dirty reset stylesheet. I'm actually trying to use the universal selector exactly as I think it's intended - to apply a rule set to all elements in the document, once and for all.
Ultimately, I'm hoping to determine if there is something inherently slow about the universal selector, or if it just has a bad rap due to rampant misuse. If * { margin: 0; } is literally equivalent to body, h1, p { margin: 0; }, then that will answer my question, and I'll know to go with the former since it's more concise. If not, I want to understand why the universal selector performs more slowly.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
