CSS performance analysis, how to optimize CSS to improve performance

Live up to yourself ten years from now, let’s encourage each other!

Front-end performance optimization has always been a hot topic. We are always doing our best to improve our page performance, such as reducing HTTP requests, using tools to merge and compress resources, and placing scripts at the bottom to avoid repeated requests. , css sprite, etc. In fact, a large number of methods are to reduce file size, reduce requests, and optimize JS. Few people pay much attention to CSS, and some even do not compress CSS.

In fact, non-standard CSS will cause a lot of performance problems. These problems may not be obvious enough in some small projects, but they will become apparent in large projects.

css matching principle

Before optimizing CSS, we need to understand how CSS works. We all know that CSS is composed of selectors, attributes and attribute values.

We might write a line of code like this

<span style="color: #000000;">//css
.con .loulan1 p span{ display: block; }

//html
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulan"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Here we define the style of the span tag in the p tag in the loulan class in the con class. I'm tired of saying it, let alone writing it. In fact, you can think of the browser as a person, and it will definitely waste performance when rendering.

Andthe matching principle of css is not from left to right, but from right to left, that is to say, in our line of code, we first find all the span elements in the page to form a set, and then in Search all span elements upwards to see how many spans have a parent element that is a p element or a parent element whose parent element is a p element or... Search slowly, delete the ones whose parent elements are not p elements, and then Search up to see how many p elements there are in the collection and the class of its parent element is loulan... The browser said: I am so tired...

In fact, the advantage of the browser searching from right to left is to filter out some irrelevant style rules and elements as early as possible. And Firefox calls this search method keyselector (keyword query). The so-called keyword is the last (rightmost) rule in the style rules, and the key above is span. The original purpose is to filter out some irrelevant style rules as quickly as possible. What we lack here is layer upon layer, layer after layer without stopping. So if I just want to define the style of a span, wouldn't it be better to add a class to the span? Someone is now asking, is it necessary to add a class to every element? That is definitely not necessary, but we need to understand how the browser finds matches, and then combine it with the current structure to make the best and most convenient way of writing.

<span style="color: #000000;">//css
.loulanSpan{ display: block; }

//html
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulan"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulanSpan"</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

css selector weight

Here is the weight of the CSS ID Class Tag selector, which is their priority. The greater the weight, the higher the priority

ID:100

Class:10

Tag:1

With the above two foundations, let’s talk in detail about how to optimize css to improve performance

1. Reduce css nesting. It is best not to nest more than three layers. Generally, block-level elements are added with classes, and inline elements inside do not need to be added. When writing css, block-level classes are nested with inline tags. This can not only reduce CSS file size can also reduce performance waste.

2. Don’t nest in front of the ID selector. ID is inherently unique and the weight is so large. Nesting in front is a complete waste of performance.

3. Create a public style class and extract long sections of the same style as a public class. For example, we commonly use clear floats, display ellipses beyond a single line, etc. Of course, if you use Sass, inheritance will make it more convenient for you. At the same time, I I am more advocating the use of sass, and I will definitely write a sass blog in the future.

4. Abbreviation css, including abbreviation maigin, padding, color value, etc. If there are two or more margin-****, write margin: * * * * to help file size.

5. Reduce the use of wildcard * or selectors like [hidden="true"] and search all one by one... Is this performance good? Of course, necessary things like resetting the style are indispensable.

6. Some people like to add the tag name: p.ty_p in front of the class name for more precise positioning, but this is often less efficient. The class name should be in the global scope unless the public is unique, so this approach should be Instant noodles.

7. Cleverly use the inheritance mechanism of CSS. Many attributes in CSS can be inherited, such as color, font, etc. Once the parent node is defined, the child nodes do not need to be defined.

8. Split the public css file. For larger projects, we can extract the common structure styles of most pages and put them into separate css files, so that they can be placed in the cache after one download. Of course, this approach will For additional requests, the specific approach should be determined based on the actual situation.

9. There is no need for css expressions. You may have less contact with them, but what you need to remember is that no matter how cool we are, it will be static in the end, so expressions only make your code look cooler, but it has a negative impact on performance. The waste may be beyond your imagination, because it is not just calculated once, some small events may increase the number of calculations and evaluations it needs to be effective and accurate.

10. Use less css rest. You may think that resetting the style is the norm, but in fact many of the operations are unnecessary and unfriendly. Friends who are in need and interested can choose normolize.css

11, cssSprite, synthesizes all icon images, and uses the background image of width, height and bacgroud-position to display the icon image we want. This is a very practical technique that greatly reduces http requests.

Of course we still need some aftermath work, CSS compression (here is an online compression YUI Compressor, of course you can use other tools to compress it is very good), GZIP compression, Gzip is a popular file compression algorithm, the detailed method can be Google or Baidu.

Of course, CSS performance optimization technology may be more than just these, friends are welcome to add and share.