Learn the rendering efficiency of CSS

1, hexadecimal color value pairs of digits and case


you might write a hexadecimal color value with a lowercase letter or omit it to a 3-digit number, 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.


* Not approve of-color: #f3a;


* Recommended-color: #FF33AA;


2, display and visibility difference


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 approve of-visibility:hidden;


* Recommended-display:none;

The difference between
3, Border:none and border:0


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


* Not approve of-border:0;


* Recommended-border:none;


4, should not be too small 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 repeatedly tiled 2,500 times. Improve background image rendering efficiency related to picture size and volume, the largest picture file volume remains about 70KB.


* Not pro-wide 8px below the tiled background picture


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


5, IE filter (3lian.com)


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


* is 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 approve, use the * number wildcard character


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


* Recommended, selectively using 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 pro-Button#backbutton {}


* Disapprove of-. Menu-left #newMenuIcon {}


* Recommended-#backButton {}


* Recommended-#newMenuIcon {}


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

One of the biggest reasons
reduces 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.


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


* Recommended for-. Treecell-mailfolder {}


9, to avoid the descendants of the selector


descendants 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.


* Not pro-Treehead treerow Treecell {}


* better, but still no (reference 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)


* Not pro-treehead > Treerow > Treecell {}


* Recommended for-. Treecell-header {}


11, note 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.


* Not pro-treeitem[isimapserver= "true"] > Treerow >. tree-folderpane-icon {}


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


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