10 How to influence the speed of CSS rendering and suggestions (excerpt HTML5 China)

1, try to avoid *{}

Due to different browsers on the interpretation of HTML tags, so the final page effect in different browsers may not be the same, in order to eliminate this risk, the designer usually at the beginning of the CSS to all the default properties are removed, to achieve all the value of the label attribute values are uniform effect. So there's the * wildcard character. * Will traverse all the tags;

*{margin:0;padding:0}

Suggested Workaround:

(1) Do not use uncommon tags, because these tags in different browsers interpret the effect is not the same, so as far as possible to use those commonly used tags;

(2) Do not use *, but the commonly used labels to deal with, for example:

BODY,LI,P,H1 {margin:0;padding:0}

2, filter of some things do not use

ie some filters in Firefox does not support, often write some effect is or use CSS hack; filters are a very resource-intensive thing; In particular, some feathers, shadows, and a pre-transparent effect;

Suggested Workaround:

(1) Do not use, on the one hand, compatibility problems; many effects can only be used in IE;

(2) For the purposes of this example, it is advisable to use background image as background if this effect is not to be

A very good example of this is that in the 512 earthquake, many websites turned gray all night, and they used only one line of CSS code:

Body{filter:gray;}

However, you will see these sites are very slow, the CPU will soar after opening, it is not exaggerated to say that if the computer configuration is poor, dry death is not too.

3, a page less absolute positioning

Absolute positioning (Position:absolute) is commonly used in web page layouts, especially when you do some floating effects, making the page look really cool. However, if you use too much of the absolute location of the page, it will make your page very slow, which Firefox performance is worse than ie.

Suggested Solutions:

(1) Use as little as possible, this less value is how much, also does not have a very good value to explain, also depends on the absolute positioning of the contents of the label inside how much, it can only be said, this write will have performance problems, less.

(2) If the same effect can be achieved with the alternative, use a flexible approach.

4, background background image tile

Some pages of the background or the background of a piece of the page is usually used to tile the picture, tiling will have a tile number of problems, if it is a single time, if it is multiple times, it is obsolete.

Recommended method:

(1) Images with few colors to be made into GIF images

(2) Tile picture as large as possible, if the color of the GIF picture, the picture capitalization, the actual size is not much, the above two examples are very good proof that the first picture is very small, the second figure is larger, but the speed is very different.

5, let the property as much as possible to inherit

Allow as many attributes as possible to inherit the parent, rather than overwrite the parent;

6, the path of CSS not too deep

#zishu #info#tool#sidebar h2{font-size:12px;}

7, can be abbreviated some shorthand

This has no effect on rendering speed; just a few characters

8. Do not empty the class or not the class in the HTML code

9, the application of float

This thing if used improperly, hundred percent have performance problems, but also very large, but really do not know how to get an example, here can only suggest if not very clear how float is how to work, or less use as wonderful.

10. Reasonable layout

Why do you say that? A reasonable layout can change the way CSS is written and the rendering process.

10 How to influence the speed of CSS rendering and suggestions (excerpt HTML5 China)