Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how the CSS element selector works". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

It is common for front-end engineers to use CSS element selectors in their daily work; whether you are writing a normal CSS or a compiled SASS,SCSS,LESS, they are eventually compiled into one-line CSS-style attributes, which are finally parsed and applied by the browser. But have you ever thought about how this is achieved?

Browser renderin

Let's take a look at the rendering steps of the browser:

After the CSS is loaded by the browser, it will be parsed into a CSSOM tree, and try to overlay it with Dom to form a rendering tree, and then calculate the location, render and other steps. From this point of view, the key to the application of CSS attributes is how to transform from CSS to CSSOM tree, and how to apply CSSOM to DOM.

CSSOM tree

When we write down a set of CSS styles, for example:

# id .class h5 + p {.}

When the browser parses it, you might think that CSS will find # id > .class > h5 > p in the order from left to right, and finally apply it, but in fact, the order in which browsers parse CSS is p > h5 > .class > # id from right to left.

It's counterintuitive, right? But right-to-left parsing is much better than left-to-right parsing if performance issues are taken into account.

Suppose there is a HTML like this:

......

And five CSS style rules on this side:

# div1 .c .d {} .f .c .d {} .a .c .e {} # div1 .f {} .c .d {}

Let's simulate that if you parse CSS from left to right, you will generate a CSSOM tree like this:

Thinking through .d in, when such a CSSOM tree applies a style, it must check all the style rules to see if the style rules affect .d, and finally determine that there are three style rules that may affect .d:

# div1 .c .d

.f .c .d

.c .d

And so on, the elements on each DOM tree must facilitate all the style rules in order to obtain individual styles, which will result in a large number of redundant calculations, which will seriously affect performance.

Conversely, if you parse the previous CSS from right to left, the CSSOM tree might look like this:

As in the previous example, from a .d point of view, since the target elements that will be affected by style rules are all concentrated on the first level, there is no need to facilitate the entire CSSOM tree, or even to check whether the sub-attribute variables below .d are in line with the actual DOM structure, and then retrieve all the consistent style rules, you can complete the application of .d style rules to elements.

The parsing order from right to left can gather all the shared rule paths together. When the browser compares attributes, it no longer needs to facilitate the whole CSSOM tree, which greatly reduces the invalid alignment calculation.

You can also think about it another way: in the structure of HTML, an element can have countless children, but only one parent, and searching from the child to the parent (bottom up) is definitely faster.

1. Apply style

After parsing the CSSOM tree, can it be combined with DOM? It would be great if it were that simple.

In addition to the CSS files defined by developers, there are several places where style rules may be defined, which may affect the rendering of images:

Inline style settings for HTML

Browser presets (that is, what CSS reset/normalize overrides)

User preferences of the browser

The browser is responsible for dealing with the CSS part, and will organize all the previous things and the style rules defined by the CSS file into a separate style rule group (CSS rule set), which records the style rules, target attributes and other information.

two。 Target attribute

In order to improve the later computing efficiency, the browser's CSS processing kernel will group the individual rules in the style rule group according to their target attributes; they are divided into four groups

IdRules

ClassRules

TagNameRules

UniversalRules

In this way, you can quickly screen out the styles that may be applied according to whether this attribute exists in the target element.

Apply rules

Finally, the rules are applied. The browser applies all style rules according to the following order and style rule weights:

Default values for the browser

User preferences of the browser

Developer-defined CSS

Inline style

Add! style attributes of important

You may wonder: why are inline style and developer-defined CSS handled separately?

We can review the steps of browser rendering. Because inline style exists in the DOM element, it can only be accessed when CSS is applied to DOM, and the two cannot be combined beforehand.

CSS efficiency

In fact, the browser has completed the optimization mechanism here; the browser automatically snapshots the elements that are consistent in state. To be consistent is to meet the following conditions:

ID is not set

Tag and class must be exactly the same

The style property is not set

Various sibling selectors cannot be used in style rules (for example: ~, +,: first-child, etc.)

Due to the above conditions, as well as the CSS operation discussed earlier, there are a few areas to pay a little attention to when writing CSS:

Because the target properties of style rules are stored in groups, the id selector is very efficient and cannot be mixed with other conditions.

Don't write too deep about CSS style rules

Do not use inline style if you can, except that it is difficult to maintain. Because it exists on the DOM tree and cannot be combined with other styles in advance, the efficiency will be greatly reduced.

If you can pay attention to such typical small details, the efficiency of CSS can also be greatly improved.

That's all for "how the CSS element selector works". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.