11 notes for improving CSS web page rendering efficiency

1. hexadecimal color value pairs of digits and case

When writing hexadecimal color values, you may use lower-case letters or omit them into three digits. No data is found to prove whether this method affects the rendering efficiency of the browser, however, the default hexadecimal color value is uppercase and 6-digit. Lower rendering efficiency without taking risks in unknown situations.

* Disapproval-color: # f3a;

*-Color: # ff33aa is recommended;

2. Differences between display and visibility

They are used to set or retrieve whether to display objects. Display hidden objects do not retain physical space, and visibility is the physical space occupied by hidden objects. Resources are consumed when the browser renders the occupied physical space.

* Disapproval-visibility: hidden;

*-Display: none is recommended;

3. Difference between border: none; and border: 0;

Similar to the relationship between display and visibility, the space is not retained. More is border: 0; although the border can be hidden, it will reserve the right to use border-color/border-style for you.

* Disapproval-border: 0;

*-Border: none is recommended;

4. It is not advisable to use a small background image to tile.

Although the file size is very small, a background image with a width and a height of 1 px needs to be tiled for 2500 times. Improving the rendering efficiency of background images is related to the image size and size. The maximum image file size is approximately 70 KB.

* Disapproval-tiled background images with 8 PX or lower width

* It is recommended to use a background image that measures the moderate volume and size.

5. Use ie filter with caution

In addition to resource consumption, the IE filter also has compatibility issues. There is a PNG transparent filter, you can use GIF or JPG as transparent to avoid using this filter. We recommend that you only apply GIF transparency to IE6, because IE7 and later support PNG transparency.

* No. Misuse of the IE filter may cause compatibility issues because of resource consumption.

* It is recommended that you use filters instead of other methods.

6. * {margin: 0; padding: 0;} avoid Browser style differences

* The wildcard number initializes all the labels, and the rendering of the browser consumes a certain amount of resources. Some labels are almost identical in different browsers, or some are not recommended (because you will not use them ), they do not need to be reinitialized with wildcards. This saves some resources.

* Disapproved. Use the wildcard "*".

* Disagree. tags such as Div span button B table are included in the internal and external filling style of the wildcard control.

* It is recommended that you use wildcards to control the internal and external fill styles.

7. Do not add additional labels to describe the class or ID.

If you have a selector that uses ID as the key selector, do not add additional tag names. Because ID is unique, you should not reduce the matching efficiency for a reason that does not exist.

* Disapproval-button # backbutton {}

* Disapproval-. Menu-left # newmenuicon {}

*-# Backbutton {} is recommended {}

* We recommend that you use-# newmenuicon {}

8. Select the most special class to store the selector.

One of the biggest reasons for reducing system efficiency is that we use too many choices in the label class. By adding a class to an element, we can further classify the class into class classes, so that we don't have to waste time matching too many choices for a tag.

* Disapproval-treeitem [mailfolder = "true"]> treerow> treecell {}

*-. Treecell-mailfolder {} is recommended {}

9. Avoid descendant Selection Characters

The descendant selector is the most resource-consuming selector in CSS. It is really resource-consuming, especially when the selector uses a label class or a common class. In many cases, what we really want is the subselector. Unless explicitly stated, it is strictly prohibited to use the descendant selector in the ui css.

* Disapproval-treehead treerow treecell {}

* Better, but still not (refer to the next one)-treehead> treerow> treecell {}

10. do not include a subselector in the label class.

Do not use the subselector in the label class. Otherwise, the matching time will be increased each time an element appears. (Especially when the selector seems to be mostly matched)

* Disapproval-treehead> treerow> treecell {}

*-. Treecell-header {} is recommended {}

11. Pay attention to the use of all sub-Selector characters.

Use the subselector with caution. If you can come up with a method that does not use it, do not use it. Especially in the RDF tree and menu, the sub-selector is frequently used, such.

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

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

* We recommend that you use-. Tree-folderpane-Icon [isimapserver = "true"] {}.