CSS performance analysis, how to optimize CSS to improve performance, css Performance

CSS performance analysis, how to optimize CSS to improve performance, css Performance
I will not be able to afford myself for ten years!

Frontend performance optimization has always been a hot topic. We are always doing our best to improve our page performance, such as reducing HTTP requests and using tools to merge and compress resources, the script is set to the bottom to avoid repeated requests and css sprite. In fact, a large number of methods are used to reduce the file size, reduce requests, and optimize JS. Few people are very concerned about css, and even some people do not compress css.

In fact, nonstandard css may cause many performance problems, which may not be obvious in some small projects, but will appear in large projects.

Css Matching Principle

Before optimizing css, we need to know how css works. We all know that css consists of selectors, attributes, and attribute values.

We may write a line of code like this.

// Css. con. loulan1 p span {display: block ;} // html <div class = "con"> <div class = "loulan"> <p> <span> text </span> </p> </div> </ div>

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

AndThe matching principle of css is not from left to right, but from right to left.In other words, in this line of code, we first find all the span elements in the page to form a set, and then look up all the span elements, let's see if the parent element with multiple spans is the p element or the parent element of the parent element is the p element or ...... search for it slowly, delete the parent element rather than the p element, and look up the class that shows the number of p elements in the set. Its Parent element class is loulan... the browser said: I am so tired...

In fact, the advantage of a browser searching from right to left is to filter out irrelevant style rules and elements as soon as possible. Firefox calls this search method keyselector (keyword query). The so-called keyword is the last (rightmost) rule in the style rule, and the above key is span. People originally wanted to filter out irrelevant style rules as soon as possible. We lack a layer-by-layer architecture and don't stop. So it is better to define a span style and add a class to the span. Someone will say this now. Do you need to add a class to each element? That is definitely not necessary, but we need to understand how the browser looks for matching, and then combine the current structure to make the best and most convenient way of writing.

// Css. loulanSpan {display: block ;} // html <div class = "con"> <div class = "loulan"> <p> <span class = "loulanSpan"> text </span> </p> </div> </div>

Css selector weight

Here we will talk about the weight of the css id Class Tag selector, that is, their priority. The higher the weight, the higher the priority.

ID: 100

Class: 10

Tag: 1

 

With the above two foundations, we will discuss in detail how to optimize css to improve performance.

 

1. Reduce css nesting. It is best not to set more than three layers. Generally, block-level elements are added with classes, and inline elements in them are not added. When css is written, block-level class sets inline tags, this not only reduces the css file size, but also reduces the performance waste.

2. Do not nest in front of the ID selector. The ID is unique and has a huge weight. nesting in front is a waste of performance.

3. Create a public style class and extract the same style of long segments as a public class. For example, we usually clear floating and show ellipsis when a single row exceeded. Of course, if you use sass, inheritance will make you more convenient. At the same time, I advocate sass, and I will certainly write a sass blog later.

4. css, including maigin, padding, and color values. If there are two or more margin-*****, write them as margin: * *** the file size is helpful.

5. Reduce the usage of wildcard * or selector similar to [hidden = "true"]. Can this performance be better? Of course, resetting styles is essential.

6. Some people like to add the label name p before the class name. ty_p for more accurate positioning, but this is often less efficient, class names should be globally available unless the public is unique, so this approach should be appropriate.

7. cleverly using the Inheritance Mechanism of css, many attributes in css can be inherited, such as color fonts. If the parent node is defined, the child node does not need to be defined.

8. Split the public css file. For large projects, we can extract the styles of the public structure of most pages and put them in a separate css file. After this download, the files will be placed in the cache, of course, this approach will increase the number of requests. The specific approach should be based on the actual situation.

9. We don't need css expressions. We may have less contact with each other, but remember that no matter how cool we are, they are static at the end, so expressions just make your code look cool, however, his waste of performance may be beyond your imagination, because it is not just a calculation, but some small events may increase the number of times it calculates the value for efficiency and accuracy.

10. Less css Coding

11. cssSprite is used to synthesize all the icon images and use the width and height plus the bacgroud-position background image to display the desired icon image. This is a very practical technique, http requests are greatly reduced.

 

Of course we still need some Aftercare Work, CSS compression (Here we provide an online compression YUI Compressor, of course you will use other tools to compress it very well), GZIP compression, gzip is a popular File compression algorithm. You can use Google or Baidu for details.

 

Of course, css performance optimization technology may be more than just that.