[Translation] how to make css rendering more efficient

Original article: efficiently rendering CSS

I admit that I don't often think about this ......What is the efficiency of CSS we write? What is the speed of browser rendering?

This should be something that browser developers should be concerned about (page loading is faster, and users will be happier ). Mozilla has an articleArticle: About best practices. Google is also very concerned about this issue. They also have this article: optimize browser rendering.

Let's get to know what they advocate and discuss their practicality.

From right to left

A very important principle for browsers to read your CSS selectors is that they are read from right to left. This means that a [Title = "home"] selector like UL & gt; Li a [Title = "home"] will be read first. This part is usually called "Key selector" (can it be called "target selector "-_-!) The last part of the selector is also the selected tag.

ID's is the most efficient, and the common operator is the slowest

There are four target selectors: ID, class, tag, and universal character. Let's take a look at their respective efficiency:
# Main-Navigation {}/* ID (fastest )*/
Body. Home # page-wrap {}/* ID */
. Main-Navigation {}/* class */
Ul Li A. Current {}/* class *
Ul {}/* tag */
Ul Li a {}/* tag */
* {}/* Universal (slowest )*/
# Content [Title = 'home']/* universal */then we can combine the right-to-left and target selector concepts to understand that the following selector is not efficient:
# Main-nav & gt; Li {}/* It looks very fast, but it is actually very slow */
Although this is a bit confusing... because Id's is the most efficient, the browser can quickly find Li through ID. But the fact is that the Li tag is read first.

Do not use tags

Do not do the following:
Ul # Main-Navigation {}
ID's is unique, so it does not need to be modified with tags, which only makes it more inefficient.
If you can avoid it, do not use it to modify the class. The class is not unique, so you can use it in different labels theoretically. If you want to, you can use tags to control different styles, so that you may need tags (such as: Li. first), but few people do this, so don't.

There is no worse way than using the descendant selector.
David Hyatt:
The descendant selector is the most expensive selector in CSS, which is terrible-especially when it is placed behind tags and generic characters.
As in the figure below, this is an absolute cancer of efficiency:
Html body ul Li {}

Rendering failure of a selector is more efficient than rendering the selector.

I'm not sure if there is any better evidence to prove this, because if you have a large number of selectors that cannot be found in the CSS style sheet, this kind of thing looks strange, however, you must note that, from the right to the left, a selector will stop trying once it cannot be found. However, if it finds it, it requires more effort to explain it.

Imagine why you write a selector like this.

Think about this stuff:
# Main-Navigation Li a {font-family: Georgia, Serif ;}
You may not need to start with the selector (if you just want to change the font ). The following may be more efficient:
# Main-Navigation {font-family: Georgia, Serif ;}

Practicality

Is there an article about Mozilla mentioned earlier? It has been 10 years. The fact is: computers are slower than a decade ago (not that I understood them wrong, or that the current web is becoming more and more complex ). I think this stuff seems to be more important in the past. Ten years ago, I was a 21-year-old handsome boy. Of course I don't think I would know CSS. So I can't tell you the previous situation, but I don't think the reason why the rendering efficiency problem is ignored is that it has never been a big problem.
This is my opinion: no matter what the above mentioned stuff is meaningful, you can follow the above method, because it does not limit your CSS production. But you do not have to be too dognistic. If you are a perfectionist and haven't considered that before, it's time to re-check whether some of the styles you wrote have been improved. If you don't find that your website is obviously slow in rendering, don't worry too much about it. Just pay more attention to it in your future work.

Super fast, zero Practicality

We know that ID's is the most efficient selector. When you want to make the rendering speed take effect, you may configure an ID for each independent tag, and then write the style with these IDs. That would be super fast and crazy. The result is that the semantics is very poor and the maintenance is difficult. You shouldn't have seen this even in the core part.I think this reminds us not to discard semantics and maintainability for efficient CSS.

Thanks to Jason Beaudoin for emailing me about the idea. If anyone knows more about this stuff, or if you have additional tips that you use in this same vein, let's hear it!

By the way, because the CSS selector is used by many JavaScript libraries, the above mentioned items are still applicable, the ID selector is still the fastest, and the descendant selector is slower than similar items.