How to improve the rendering efficiency of CSS Web pages

How to improve the rendering efficiency of CSS Web pages? CSS learning process need to pay attention to the details of the very many, and these details are also affecting the CSS Web page rendering efficiency of the important factors, black cat sorted out by the predecessors to improve the efficiency of the CSS Web page rendering method, together to learn.

　　1, hexadecimal color value pairs of digits and case

When you write hexadecimal color values, you may use lowercase letters or omit them into 3 digits, and there is no real data to prove that the rendering efficiency of the browser is affected, but the default standard for hexadecimal color values is uppercase and 6-digit callouts. In the unknown circumstances do not want to risk and reduce the efficiency of rendering.

* Disapprove of-color: #f3a;

* Suggested-color: #FF33AA;

　　2, display and visibility differences

They are used to set or retrieve whether objects are displayed. The display hidden object retains no physical space, and visibility retains the occupied physical space for the hidden object. When the browser renders the occupied physical space, it consumes resources.

* Not in favor of-Visibility:hidden;

* Suggested use-display:none;

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

and display and visibility are similar to each other, do not reserve and reserve space. More is border:0; Although you can hide the border, it retains Border-color/border-style's right to use it.

* Not in favor of-border:0;

* Suggested use-border:none;

　4, should not use too little background image tile

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

* disapproved-tiled background picture below 8px width and height

* Recommended-measurement of moderate size and size of the background picture

　　5. Use IE filter with caution

The IE filters also have compatibility problems in addition to consuming resources. There are filters that make PNG transparent, and you can avoid using this filter by GIF or JPG-like penetration. It is recommended that you apply GIF transparency only in IE6, because PNG transparency is supported above IE7.

* Not in favor of misuse of IE filters because of the consumption of resources also have compatibility issues.

* Recommended, it is best to choose other methods to avoid using filters.

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

* Number wildcard to initialize all the tags, browser rendering consumes a certain amount of resources. There are parts where the labels are almost no different in the browser, or some of the labels that are deprecated (because you don't use them), and they don't need wildcards to reinitialize. This saves a bit of resources.

* Do not agree, use the * number wildcard

* Disapprove of, div span button b table, etc tags into wildcard control inside and outside fill style

* Recommended, selectively use wildcards to control internal and external fill styles.

　　7, do not add additional tags to describe class or ID

If you have a selector that takes the ID as the key selector, do not add the extra tag name. Because IDs are unique, you don't have to reduce the efficiency of matching for a reason that doesn't exist.

* Not in favor of-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 for reducing system efficiency is that we use too many selectors in the tag class. By adding class to elements, we can divide the categories into class classes so that we don't have to waste time on a label to match too many selectors.

* Disapprove-Treeitem[mailfolder= "true"] > Treerow > Treecell {}

* Suggested-. Treecell-mailfolder {}

　　9, to avoid the descendants of the selection character

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

* Disapprove-Treehead treerow Treecell {}

* A little better, but still not (refer to the next)-treehead > Treerow > Treecell {}

　10, the Label class does not contain a child selector

Do not use a child selector in the label class. Otherwise, each occurrence of the element adds an additional matching time. (especially when the selector seems to be mostly matched)

* Disapprove-treehead > Treerow > Treecell {}

* Suggested-. Treecell-header {}

　　11, pay attention to the use of all child selectors

Use the child selector carefully. If you can come up with a way of not using him, then don't use it. Especially in RDF trees and menus that use a sub selector frequently, like this.

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

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

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