How to improve css performance

This article mainly introduces the methods of CSS performance optimization to improve CSS performance. Non-standard CSS will cause many performance problems, so it is very necessary to learn and master CSS performance optimization skills. Friends who are interested in CSS performance optimization knowledge come together Let’s learn

Irregular 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 , consisting of attributes and attribute values.

We may write a line of code like this

//css   
.con .loulan1 p span{ display: block; }   
//html   
<p class="con">   
    <p class="loulan">   
        <p><span>文字</span></p>   
    </p>   
</p>

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.

And the 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 Search up all the span elements 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 and delete the ones whose parent element is not a p element. Go up and search to see how many p elements there are in the collection. The class of its parent element is loulan... The browser said: I am so tired...

In fact, the browser searches from right to left. The advantage 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. 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 wants to say at this time, 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.

//css 
.loulanSpan{ display: block; }   
//html 
<p class="con">   
    <p class="loulan">   
        <p><span class="loulanSpan">文字</span></p>   
    </p>   
</p>

css selector weight

Here are the weights 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 foundation of the above two 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 are not added. , when writing css, use block-level classes to set inline tags. This can not only reduce the size of the css file, but also reduce performance waste.

2. Do not 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 the same style for a long section and use it as a public class. For example, we commonly use clear floats, display ellipsis when a single line exceeds the limit, etc. Of course, if you use sass, inheritance will let you It is more convenient. At the same time, I advocate the use of sass. 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: * * * *Help file size.

5, reduce the use of wildcard * or selectors like [hidden="true"], 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 done instantaneously.

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 increase requests, and the specific approach should be determined based on the actual situation.

9. There is no need for css expressions. You may have less exposure to them, but what you need to remember is that no matter how cool we are, it will be static in the end, so expressions just make your code look cooler. , but its waste of performance may be beyond your imagination, because it is not just calculated once, some small events may increase the number of calculations it needs to perform in order 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 have needs and interests can choose normolize.css

11, cssSprite, synthesizes all icon images, and uses the width, height and bacgroud-position background image 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 will use other tools to compress it is very good), GZIP compression, Gzip is a popular file compression algorithm, details You can search it on Google or Baidu.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

CSS style override rules

The above is the detailed content of How to improve css performance. For more information, please follow other related articles on the PHP Chinese website!