Shulou(Shulou.com)06/01 Report--

Css matching principle

Before optimizing css, we need to understand how css works. We all know that css is made up of selectors, attributes, and property values.

We might write a line of code like this.

/ / css.con .loulan1 p span {display: block;} / / html

Words

Here we define the style of the span tag in the p tag of 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 must be a waste of performance when rendered.

And the matching principle of css is not from left to right, but from right to left, that is to say, in this line of code, we first find all the span elements in the page to form a collection, and then look up all the span elements to see how much the parent element of span is p element or the parent element of parent element is p element or. Look for it slowly, delete the parent element that is not the p element, and then look up to see how many p elements in the collection and how many of its parent element's class is loulan.... The browser said: I am so tired.

In fact, the advantage of browsers searching from right to left is to filter out some irrelevant style rules and elements as soon as possible. And Firefox calls this search method keyselector (keyword query). The so-called keyword is the last (rightmost) rule in the style rule, and the key above is span. People were supposed to filter out some irrelevant style rules as soon as possible, but we lack one layer after another, one layer after another. So it would be better to just define a span style and add a class to span. Someone is going to say, does that require classes to be added to every element? That's certainly not necessary, but we need to understand how browsers find matches, and then combine the current structure to make the best and most convenient way to write it.

/ / css.loulanSpan {display: block;} / / html

Words

Css selector weight

Here we talk about the weight of CSS's ID Class Tag selector, that is, their priority. The higher the weight, the higher the priority.

ID:100

Class:10

Tag:1

With the basis 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 set more than three layers, in general, block-level elements plus classes, which do not need to add inline elements, css write block-level class inline tag, this can not only reduce css file size, but also reduce performance waste.

2, do not nest in front of the ID selector, ID is already unique and the weight of others is so large, the front nesting is a complete waste of performance.

3, the establishment of a public style class, the long segment of the same style extracted as a public class, such as we often clear floating, one-line beyond the display of ellipses, and so on, of course, if you use sass, inheritance will make it more convenient for you, at the same time, I am more advocating the use of sass, and then I will certainly write a sass blog.

4, abbreviation css, including abbreviation maigin,padding, color value, etc. If there are two or more margin-****, written as margin: * helps the file size.

Reduce the use of wildcard characters * or selectors like [hidden= "true"], and find all of them one by one. Can this performance be good? Of course, the necessary things such as resetting the style are indispensable.

6, some people like to add a signature in front of the class name: p.ty_p for more accurate positioning, but this is often less efficient, the class name should be in the global scope unless the public is unique, so this practice should be instant noodles.

7, ingenious use of css inheritance mechanism, in css, many attributes can be inherited, such as color font and so on, the parent node is defined, the child node does not need to be defined.

8, split the public css file, for larger projects, we can extract the style of the common structure of most pages into a separate css file, so that after a download, it will be put in the cache, of course, this practice will increase the request, the specific approach should be based on the actual situation.

9, do not use css expression, we may have less contact, but it is important to remember that no matter how cool we are, it is static in the end, so the expression just makes your code look cooler, but his waste of performance may be beyond your imagination, because it is not just calculated once, some small events may increase the number of times it evaluates in order to be effective and accurate.

10, use less css rest, you may think that the reset style is the norm, but in fact, many of the operations are unnecessary and unfriendly, friends who need and are interested can choose normolize.css

11J cssSprite, synthesize all icon pictures and show the icon image we want with width and height plus bacgroud-position background map, which is a very practical technique that greatly reduces http requests.

Of course, we also need some follow-up 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, details can be Google or Baidu.

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.