What is the performance impact of CSS's universal selector?

Posted by Bungle on Stack Overflow See other posts from Stack Overflow or by Bungle
Published on 2010-06-01T17:46:54Z Indexed on 2010/06/01 17:53 UTC
Read the original article Hit count: 227

Filed under:

html

|

css

|

Performance

|

css-selectors

|

cascade

I'm trying to find some simple client-side performance tweaks in a page that receives millions of monthly pageviews. 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?

Essentially, what I'm asking is if these rules are effectively equivalent in this case, or if the universal selector has to perform more unnecessary 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.

Thanks for any help!

Developer IT