11 Things to Note on Improving CSS Web Page Rendering Efficiency_Experience Exchange

1. Number of digits and upper and lower case for hexadecimal color values ​​

When writing hexadecimal color values, you may use lowercase letters or omit 3 digits. No specific data has been found on this way of writing. It proves whether it has any impact on the rendering efficiency of the browser, but the default standard for hexadecimal color values ​​is uppercase and 6-digit notation. Not wanting to take risks in unknown situations reduces rendering efficiency.

* Disapproved - color:#f3a;

* Recommended - color:#FF33AA;

2. The difference between display and visibility

Them Used to set or retrieve whether to display the object. Display hidden objects do not retain physical space, and visibility retains the physical space occupied by hidden objects. When the browser renders the occupied physical space, resources are consumed.

* Disapproved - visibility:hidden;

* Recommended - display:none;

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

The relationship between display and visibility is similar, with no and reserved space respectively. More about border:0; Although the border can be hidden, it will retain the use of border-color/border-style for you.

* Disapproved - border:0;

* Recommended - border:none;

4. It is not advisable to use background images that are too small for tiles

A background image with a width and height of 1px. Although the file size is very small, rendering a panel with a width and height of 500px requires repeated tiling 2500 times. Improving background image rendering efficiency is related to image size and volume. The largest image file size remains about 70KB.

* Disapproval - Tile background image with width and height below 8px

* Recommended - Background image with moderate volume and size

5. Use IE filters with caution

In addition to consuming resources, IE filters also have compatibility issues. There is a filter that makes PNG transparent. You can avoid using this filter by making GIF or JPG appear transparent. It is recommended to only use GIF transparency in IE6, because IE7 and above already support PNG transparency.

* Disapproval, abusing IE filters not only consumes resources but also causes compatibility issues.

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


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

The * wildcard initializes all tags, and the browser’s rendering consumes a certain amount of time resource. Some tags are almost the same in different browsers, or some tags are no longer recommended (because you won't use it). They don't need wildcards to be re-initialized. This can save some resources.

* Disapproved, use * wildcard

* Disapproved, div span button b table and other tags should be included in wildcards to control internal and external fill styles

* Recommended, be selective Use wildcards to control inner and outer padding styles.

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

If you have a selector that uses id as the key selector, please do not add extra tag names. Because ID is unique, you should not reduce the matching efficiency for a non-existent reason.

* Disapproved - button#backButton { }

* Disapproved - .menu-left #newMenuIcon { }

* Recommended - #backButton { }

* It is recommended to use - #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. By adding class to the element, we can subdivide the category into class classes, so we don't have to waste time matching too many selectors for one tag.

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

* Recommended to use - .treecell-mailfolder { }

9. Avoid descendants Selector

The descendant selector is the most resource-consuming selector in CSS. It is really very resource intensive, especially when the selector uses a label class or a general class. In many cases, what we really want is a subselector. Unless explicitly stated, the use of descendant selectors is strictly prohibited in UI CSS.

* Disagree - treehead treerow treecell { }

* Better, but still not good (see next article) - treehead > treerow > treecell { }

10. Tags Do not include subselectors in classes

Do not use subselectors in label classes. Otherwise, each occurrence of an element will additionally increase the matching time. (Especially when the selector seems likely to be matched)

* Deprecated - treehead > treerow > treecell { }

* Recommended - .treecell-header { }

11. Pay attention to the use of all sub-selectors

Use sub-selectors carefully. If you can think of a way not to use it, then don't use it. In particular, RDF trees and menus frequently use subselectors, like this one.

* Disapproved - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

Please remember that RDF attributes can be copied in templates! Taking advantage of this, we can copy RDF attributes on child XUL elements that we want to change based on that attribute.

* It is recommended to use - .tree-folderpane-icon[IsImapServer="true"] { }