11 tips to improve the efficiency of CSS Web page rendering experience Exchange

1. Hexadecimal color value pairs of digits and case

When you write hexadecimal color values you may use lowercase letters or omit them to 3 digits, and there's no real data on how this is going to affect the rendering efficiency of the browser, but the default standard for hexadecimal color values is uppercase and 6-digit notation. In an unknown situation, you do not want to take risks and reduce the efficiency of rendering.

* Disapproval-color: #f3a;

* Recommended-color: #FF33AA;

2. The difference between display and visibility

They are used to set or retrieve whether the object is displayed. The display hidden object does not preserve physical space, and visibility retains the physical space occupied by the hidden object. When the browser renders the occupied physical space, it consumes resources.

* Not in favour of-visibility:hidden;

* Suggested use-display:none;

3. The difference between Border:none and border:0;

and display are similar to visibility, respectively, and do not preserve and reserve space. More is border:0; Although you can hide the border, it retains the border-color/border-style for you.

* Not in favour of-border:0;

* Suggested use-border:none;

4, should not be used too small background image tile

A wide 1px background image, although the file size is very small, but the rendering of the width of the 500px plate needs to be repeated tiling 2,500 times. Improve the rendering efficiency of the background image related to the size and volume of the picture, the largest picture file size remains about 70KB.

* Disapproval-Tile background image below 8px width height

* Recommended-measure background image of moderate size and size

5. Use IE filter with caution

IE filters have compatibility issues in addition to consuming more resources. There are filters that make PNG transparent, and you can use GIF or JPG as a non-permeable way to avoid using this filter. It is recommended to apply GIF transparency only in IE6 because PNG transparency has been supported for IE7.

* Disapproval, misuse of IE filter because of the consumption of resources also have compatibility issues.

* Recommended, it is best to choose other methods to avoid the use of filters.


6, *{margin:0; padding:0;} Avoid browser style differences

* The wildcard character initializes all the tags, and the browser's rendering consumes a certain amount of resources. Some of the tags are almost no different on the browser, or some of the deprecated tags (because you won't use it), they don't need wildcards to reinitialize again. This saves a bit of resources.

* Not supported, use the * number wildcard

* Not supported, div span button b table and other tags include wildcard control inside and outside fill style

* Recommended, optionally use wildcard characters to control the inner and outer fill style.

7. Do not add additional tags to describe class or ID

If you have a selector with an ID as the key selector, do not add the extra label name up. Because the ID is unique, you should not reduce the efficiency of the match for a reason that does not exist.

* Not in favor-Button#backbutton {}

* Not in favor of-. Menu-left #newMenuIcon {}

* Recommended-#backButton {}

* Recommended-#newMenuIcon {}

8, try to choose the most special class to store the selector

One of the biggest reasons to reduce system efficiency is that we have too many selectors in the tag class. By adding class to an element, we can then break the category down into class classes so that we don't have to waste time on a label to match too many selectors.

* Disapproval-treeitem[mailfolder= "true"] > Treerow > Treecell {}

* Recommended-. Treecell-mailfolder {}

9. Avoid descendant selectors

Descendant selectors are the most resource-consuming selectors in CSS. He really is very resource-intensive, especially when selectors use tag classes or generic classes. In many cases, what we really want is a sub-selector. Unless explicitly stated, it is strictly forbidden to use descendant selectors in UI CSS.

* Disapproval-Treehead treerow Treecell {}

* Better, but still not (refer to next)-Treehead > Treerow > Treecell {}

10. Do not include sub-selectors in the label class

Do not use a sub-selector in a label class. Otherwise, each time an element is present, it will increase the matching time. (especially if the selector seems likely to be matched)

* Disapproval-treehead > Treerow > Treecell {}

* Recommended-. Treecell-header {}

11. Be aware of the use of all sub-selectors

Use the child selector carefully. If you can think of a way to not use him, then don't use it. Especially in RDF trees and menus, you will frequently use sub-selectors, like this.

* Disapproval-treeitem[isimapserver= "true"] > Treerow >. Tree-folderpane-icon {}

Keep in mind that the properties of RDF can be copied in the template! With this, we can replicate the RDF attributes on the child XUL elements that want to change based on that attribute.

* Recommended-. Tree-folderpane-icon[isimapserver= "true"] {}

