CSS performance analysis, how to optimize CSS to improve performance

CSS matching principle

Before we optimize the CSS we need to understand how the CSS works, and we all know that CSS is made up of selectors, attributes, and property values.

We might write a line of code like this.

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

Css.con. loulan1 p span{display:block;} Html<div class= "Con" > <div class= "Loulan" > <p><span> text </span></p> </ Div></div>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

Here we define the span tag inside the p tag of the Loulan class inside the con class. I'm too tired to say it, let alone write it, you can actually think of the browser as a person, it will certainly be wasted performance rendering.

and the CSS matching principle is not from left to right, but from right to left , that is, our line of code inside, first find all the span elements inside the page to form a set, and then in all the span elements to look up, See if the parent element with multiple spans is a P element or the parent element of the parent element is a P element or ... Slowly looking for, the parent element is not the deletion of the P element, and then look up to see the set of P elements and how much of its parent element of the class is Loulan ... The browser said: "I am so tired ..."

In fact, the benefit of browsers looking right-to-left is to filter out extraneous 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. People are supposed to be able to filter to some irrelevant style rules as soon as possible, we are missing a layer of layers here, the layers of non-stop rest. So it's better to just define a span style to add a class to span. Someone is going to say that, so is it necessary to add classes to each element? That must not be necessary, but we need to understand how the browser looks for matches, and then combine the current structure to make the best and easiest way to do it.

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

css.loulanspan{Display:block;} Html<div class= "Con" > <div class= "Loulan" > <p><span class= "loulanspan" > Text </span> </p> </div></div>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

CSS selector weights

Here the CSS ID class tag Selector weights, that is, their priority, the greater the weight, the higher the priority

id:100

Class:10

Tag:1

With the basics of the above two, let's go through the details of how to optimize CSS to improve performance

1, reduce CSS nesting, it is best not to set more than three layers, the general case of block-level elements plus classes, the inside of the element without adding, CSS when writing block-level class set inline tag, which 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 unique and the other person's weight is so large, the front nesting is completely wasted performance.

3, the establishment of public style class, the long segment of the same style extracted out as a public class use, such as our commonly used to clear floating, single line beyond the display ellipsis and so on, of course, if you use sass, inheritance will make you more convenient, at the same time I am more advocating the use of sass, and will certainly write a sass blog.

4, abbreviated CSS, including abbreviation maigin,padding, color value and so on, if there are two or more than two margin-****, write margin: * * * * Help file size.

5, reduce the wildcard * or similar to [hidden= "true"] this type of use of selectors, find all ... Can this performance be good? Of course resetting the style of these must be something that is not less.

6, some people like to precede the class name with tag name: P.ty_p For more precise positioning, but this is often more inefficient, the class name should be in the global scope unless the public is unique, so this practice is to be surface.

7, clever use of CSS inheritance mechanism, many properties in CSS can be inherited, such as color font, and so on, the parent node definition, child nodes do not need to be defined.

8, split the public CSS file, for the larger project we can be most of the public structure of the page to be extracted into a separate CSS file, so that once downloaded into the cache, of course, this practice will increase the request, the specific practice should be based on the actual situation.

9, without CSS expression, may be less contact, but to remember is no matter how cool we are, to the end is static, so the expression just make your code more cool, but his performance of the waste may be beyond your imagination, because it is not only calculated once, Some small events may increase the number of times it is evaluated to be effective and accurate.

10, less use of CSS rest, you may feel that resetting the style is a specification, but in fact, there are many operations are not friendly, there is a need for interested friends can choose Normolize.css

11,csssprite, the synthesis of all icon images, with the width and bacgroud-position of the background map to show our icon, this is a very practical technique, greatly reducing the HTTP request.

Of course we also need some aftercare work, CSS compression (here to provide an online compression YUI Compressor, of course you will use other tools to compress is very good), gzip compression, Gzip is a popular file compression algorithm, detailed procedure can be Google or Baidu.

Of course, CSS performance optimization techniques may be more than just these

CSS performance analysis, how to optimize CSS to improve performance