Optimization of CSS Selectors

It took a few pages to highlight the use of CSS selectors, which I divided into three parts: theCSS3 basic selector, theCSS3 property selector, and the CSS3 pseudo-class selector. So today I would like to work with you to learn about the performance optimization of the--CSS selector. Because the performance of this piece has been very weak, so today start with the selector, to strengthen their own. If you're interested, then come with me.

How the browser recognizes your selector

First we need to know how the browser reads the selector to identify the style and attach the corresponding style to the corresponding HTML element to beautify the page. Chris Coyier once said in theefficiently Rendering CSS article "The browser reads your selector and follows the principle of reading from the right side of the selector to the left." In other words, the order in which the browser reads the selectors is from right to left . Say, for example:

    Div.nav > ul Li A[title]

In the example above, the browser will first try to find the "a[title" element in your HTML tag, then match "Li and ul"and finally match "Div.nav". This is the " selector right-to-left principle " of the former master.

The last part of the selector, the rightmost part of the selector (in this case, the A[title] section) is called the " key selector ," which will determine how efficient your selector is. Whether it is high or low.

Older browsers can filter out mismatched selectors and directly match more efficient selectors. Remember David Hyatt theWriting efficient CSS for use in the Mozilla UI said: "This key selector can greatly improve the performance of the selector, less checking a given element rule, You can more effectively match the style to the corresponding HTML element. "So how do you make a key selector more efficient and more performance?" Actually very simple, the main grasp a little " more specific key selector, its performance is higher "

So what type of selector is it that has high performance? What type of selector is low performance? Here we will focus on two issues to start specific learning.

The efficiency of CSS selectors

If you read this site about the selector type of introduction, you do not feel strange to the selector. Even if you haven't read it, I think the CSS selector doesn't make us feel like something new, such as the basic selector "element tag Selector div", "id selector #header", "class selector. Class", or our rare pseudo-class selector ": Focus" And more complex CSS3 selectors ": Nth-child" and so on.

The selector has an intrinsic efficiency, and we look at the order in which Steve Souders gives the platoon:

1. ID selector (#myid)
2. Class selector (. myclassname)
3. Tag Selector (div,h1,p)
4. Adjacent selector (h1+p)
5. Sub-selector (ul > li)
6. Descendant selector (Li a)
7. Wildcard selector (*)
8. Property selector (a[rel= "external"])
9. Pseudo-Class selector (A:hover,li:nth-child)

The efficiency of the above nine selectors is high to low, and the efficiency of the ID selector is the highest in the base, while the efficiency of the pseudo-class selector is the bottom line. Detailed introduction You can also click Writing efficient CSS selectors.

In order to synthesize the above sequence, we know that the ID and the class name are the most efficient for the key selector, while the CSS3 pseudo class and the attribute selector are the least efficient, although they are easy to use. Let's take a look at some examples of comparisons below:

    Div #myid

The efficiency is higher than the following:

    #myid Div

The first selector is more efficient than the second selector, and you might ask why? In fact, according to the previous introduction, we are not difficult to understand, because the first selector "key selector" using the "ID selector", and the second selector "key selector" using the "tag Selector", compared down, "ID selector" more efficient than "tag Selector", Therefore, the first selector is more efficient than the second selector.

Tagging before the class or ID name also causes the selector to become inefficient, such as:

    #myid    . myClassName   

The above two choices are more efficient than the following selectors:

    P#myid    P.myclassname   

A few suggestions from Mozilla

Davidintroduced several ways to write high-efficiency CSS selectors in the use efficient CSS selectors, and I moved them here to make reference to:

1. Avoiding Universal Rules
2. Do not tag names or class names before the ID selector
3. Do not spike signatures before the class name selector
4. Use a specific category whenever possible
5. Avoid using descendant selectors
6. A sub-selector should not be included in a label classification rule
7. Problems with child selectors
8. With related inheritance relationships
9. Use the style sheet in the range

If you are not clear enough about what is mentioned above, you can click here and he will make it easier for you to understand these rules.

What should we do?

Before saying "ID selector" is the most efficient, so today we write style, in order to improve the efficiency of the selector, is not we to each document in the HTML element to include the ID name? I don't think that's the way it is. What is the balance between how to write a semantic code and how to improve performance? In fact, the efficiency of this selector is low, for most sites will not have a big impact, but for a large site, generate a lot of traffic this will be different, it is worthwhile for us to optimize him. Then it is necessary to understand how they work, for example, which selectors are generally more efficient to use. Take a look at two simple examples:

     #myid

The above selector is higher than the following:

    P#myid

The latter way I found a lot of friends to write this, but I do not know why you need to add a tag in front of the ID? Do you have multiple identical IDs for the same page?

We're going to look at an example for the list, for example, we made the navigation menu:

    #nav A

Efficient for:

    #nav Li A

The above is just a description of two commonly encountered instances, here said the two instances, the main purpose is to let you in the future writing style, you can pay attention to this aspect of the details, so as to speed up your code efficiency.

Test your Selector

Steve Souders provides us with a selector efficiency test that lets you test different selectors to compare their efficiency.

Let's take a look at a comparison of the tests that Jon Sykes made in previous years on the performance of the descendant selector:

Direct class selector:

     . tdxx{       background:red;     }

with descendant selector:

     Table TR td.tdxx{       background:red;     }

Performance test results for the above two selectors:

I think the chart above can clearly explain the problem. (Note: The above test is the data of a few years ago, the longitudinal is the time MS, the front is the descendant selector, followed by the direct class selector). If you are interested in this you can refer to:

1. Testing CSS Performance
2. Testing CSS Performance (Pt 2)
3. More CSS Performance Testing (PT 3)

The above pull so much, in fact, is to say that the CSS selector for a site's performance is also related, after learning, I hope everyone in peacetime when writing can try to overcome some unnecessary errors, thereby improving the performance. I hope this article will be of some help to you. If you have any better suggestions, please feel free to leave a message in the comments.

Thank W3cplus for the wonderful text.

Welcome everyone to join the Internet Technology Exchange Group:62329335