一些提升css性能的小知識 Some tips to improve the performance of CSS

Some tips to improve the performance of CSS

---

everyone knows that the performance is very important for website. and the css as a important part of web page renderering and content show. It affects the user’s first experience of the entire website.

we usually consider the performance optimization when we have completed project. at the end of project, the problem of performance will be exposed. At this time, and the related performance optimization will be carried out.

in fact, if we pay attention to some details when we code from the beginning. and the follow-up workload will be much smaller. let’s take a look at the details what improve the performance of css processing when we writing css.

firstly, let’s look at this code:

<style>
.red {
    color: red;
}
.blue {
    color: blue;
}
</style>
...
<div class="red blue">這是什麼顏色</div>
<div class="blue red">這是什麼顏色</div>

improve the performance of css :

1. reduce the use of descendant selectors

let’s understand the descendant selectors firstly

div p {
    color: red;
    font-size: 14px;
}

what’s the space between the style selectors? its name is – descendant selector. if your project is very large and the descendant selectors are pretty many. and at this time, this’s very performance-intensive. therefore, it’s no recommanded to use meaningless descendant selectors, such as:

.div p {
    // ...
}

why do the descendant selectors consume more performance ?

the browser will find all the p tags firstly, and then find up the div tags that include class. in this way, there are so many p tags in the code and there are a lot of repeatitive works to do undoubtedly.

2. reduce the way of defining css by html tags, and use specific classes instead

the browser will parse css selectors from right to left

.box div p a {
    // ...
}

the browser will do following steps for above examples:

1. find all the <a> elements from web page firstly
2. look up <a> elements that wrappered by <p> element nextly
3. look up still the .box element

from the above steps, we can see that the selector to the right is more unique, and the browser is more efficient to parse the property of css.

therefore, we must use the spefific class to write css , which can effectively improve performance.

3. avoid the risk of reflow

We know that modifying certain CSS properties will cause repaint (repaint)/reflow (reflow) of the entire page layout.

Redrawing is much faster than rearrangement, so avoiding rearrangement is more important

Rearrangement will cause the browser to recalculate the entire document and rebuild the rendering tree. This process will reduce the browser’s rendering speed. As shown below, there are many operations that trigger reordering, and we should avoid triggering these operations frequently.

1. Change font-size and font-family

2. Change the inner and outer margins of the element

3. Change the CSS class through JS

4. Get the position-related attributes of DOM elements through JS (such as width/height/left, etc.)

5. CSS pseudo-class activation

6. Scroll the scroll bar or change the window size

In addition, we can also use CSS Trigger15 to query which attributes trigger reflow and redraw.
It is worth mentioning that some CSS properties have better rearrangement performance. For example, when using Flex, rearrangement is faster than when using inline-block and float, so Flex can be given priority in layout.

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

4. some CSS properties that reduce performance consumption

Some CSS properties consume more energy than others, that is, the browser takes more time to parse these properties.
Such as: border-radius, box-shadow, filter, :nth-child, etc. Of course, we often use these attributes, and some cannot be avoided. Make the appropriate choice.

For example: nth-child, you can replace the first element with :first-child and the last one with :last-child.

The code example diagram at the beginning of the article:

For more related knowledge about front-end, please page attention to 小青蛙的博客。

原文鏈接：添加鏈接描述