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

This article focuses on "sharing CSS knowledge that is easy to be ignored". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "sharing CSS knowledge that is easy to ignore".

Descendant selector

Do you know the small space in the middle of the style selector? It actually has a name, and its name is the descendant selector.

Layout, painting and render layer merging

These terms are more related to browser rendering, but it is still important because some CSS properties affect the different steps of the rendering process.

There is a saying called "the method is wrong, efforts are in vain." all the front-end gods have their own learning methods, and the learning of the web front-end is basically the same, and for a beginner who knows nothing, he will not know how to learn at all, which is also the most direct cause of failure. So there must be someone to guide you to learn the front end of web. If you are in a period of confusion, you can't find your way. You can join our front-end learning exchange qun: 784783012. If you have anything you don't understand, feel free to ask me. Click: front-end learning circle

1. Overall Arrangement

The layout step is responsible for calculating the amount of space the element takes up on the screen. Modifying the "layout" attributes in CSS (for example, width, height) means that the browser needs to check all other elements and "rearrange" the page, that is, redraw the affected areas and merge them together.

two。 Draw

This process is the process of filling pixels for the visual part of an element (color, border, and so on). Drawing elements is usually done on multiple layers.

Changing the draw property does not affect the layout of the page, so the browser skips the layout step but still performs the drawing.

Painting is often the most expensive part of the entire rendering process.

3. Render as merge

In the render layer merge step, the browser needs to draw the layers in the correct order. Because some elements overlap, this step is important to ensure that the elements are displayed in the expected order.

If you change a CSS property that requires neither layout nor painting, the browser only needs to do the render layer merge operation.

CSS performance descendant selectors may be very energy-intensive

Depending on the size of the program, using only descendant selectors with little particularity can be very expensive. The browser checks whether each descendant element matches, because the descendant relationship is not limited to parents and sons.

For example:

The browser evaluates all the links on the page and eventually navigates to the link that is actually inside the # nav element.

A more efficient approach is to add a specific .navigation-link selector to each element in the # nav element.

The browser reads the selector from right to left

I think I should know this, because it sounds important, but I don't know.

When parsing CSS, the browser parses the CSS selector from right to left.

Let's look at the following example:

The steps taken are as follows:

Matches each element on the page.

Find the element that is wrapped in the element.

Use the previous matching results and narrow it down to those wrapped by elements.

Finally, the above options filter out the results that are wrapped by an element with the class name .container.

As we can see from the above steps, the more specific the right selector, the more efficient the browser will be in filtering and parsing CSS attributes.

To improve the performance of the above example, we can add a class name similar to .container-link-style to the tag to replace .container ul li a.

Avoid modifying the layout as much as possible

Changing some CSS properties may require updating the layout of the entire page.

For example, attributes such as width, height, top, left (also known as "geometric properties") need to recalculate the layout and update the render tree.

If you change these attributes on a large number of elements, it takes a long time to calculate and update their location / size.

Be careful of the complexity of drawing

In terms of rendering, some CSS attributes (for example, blur) can be more expensive than others. Consider other more effective ways to achieve the same effect.

Expensive CSS attribute

Some CSS properties are more expensive than others, which means they take longer to draw.

Some of these properties are as follows:

Border-radius

Box-shadow

Filter

: nth-child

Position: fixed

This does not mean that you should not use them at all, but you should understand that if an element uses some of these attributes and will render hundreds of times, it will affect rendering performance.

Order is important in CSS files.

Let's look at the following CSS code:

Then take a look at this HTML code:

We will find that what affects the rendering is not the order in which selectors appear in the HTML code, but the order in which selectors appear in the CSS file.

A good way to evaluate CSS performance is to use the developer tools of the browser.

If you are using Chrome or Firefox, you can open the developer tool, go to the Performance tab, and record what happens when you load or interact with the page.

At this point, I believe you have a deeper understanding of "sharing CSS knowledge that is easy to be ignored". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.