10 Effects of CSS rendering speed and suggestions

Recently very little CSS has been written, may also write a few, so still want to put some of their own experience to share with you, hope to give you some help!

This article is mainly written to improve the Web page in the client browser rendering speed of the CSS section, the provisional summary of 10.

1, *{} #zishu *{} As far as possible to avoid

Because there are differences in the interpretation of HTML tags by different browsers, so the final web page effect in different browsers may not be the same, in order to eliminate this risk, the designer will normally be in the CSS at the beginning of all the default attributes of all tags removed, to achieve all the signature attribute values are uniform effect. So there's the * wildcard. * Will traverse all the tags;

*{margin:0; padding:0}
If you write this, all the labels on the page are margin 0;padding and 0;

#zishu *{margin:0; padding:0}
If this is written, the margin of all tags under id equals Zishu is all 0;padding is also 0;

The question to be written is this:

1. Traversal will take a lot of time, if your HTML code is not written in the specification or a sign does not necessarily fit, this time may be longer;
2. A lot of labels would not have this attribute or attribute itself is unified, then to set up once, there is time to open the elimination;

Suggested Solutions:

1. Do not use uncommon tags, because these tags are often in different browsers to explain the effect is not the same, so you have to use the most commonly used tags;
2. Do not use *; instead, deal with these tags you commonly use; for example: body,li,p,h1{margin:0 padding:0}

2, some of the filter things do not use

Some of the filters in IE are not supported in Firefox, often write some effect when you still use CSS HACK, and filter is a very little resources of things, especially some feather, shadow and a front transparent effect;

For example, a shadow effect:

The following is the HTML page special effects code, click the Run button to see the effect:
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Examples of links to: http://www.zishu.cn/blogview.asp?logID=610
Bai's Landing section uses a shadow effect: Http://shanghai.baixing.com/wo/denglu

Suggested Solutions :

1. Can not use do not use, on the one hand compatibility issues, many effects can only be used in IE;
2. For the purposes of this example, if you have to do this in the effect of the proposal to use a picture for the background; (only to optimize the speed, the actual application can still be a small part of the use, some people may say, with pictures more than an HTTP request, hehe ...) ）

A very good example is that in the 512 earthquake this year, many of the web site overnight became gray, they only used a line of CSS code:

Body{filter:gray;}

But, you will see these pages are very slow, open your CPU will soar, it is not exaggerated that if your computer configuration is poor, you can not be too dead.

3, a page with the absolute positioning of less

Absolute positioning (Position:absolute) is commonly used in web page layouts, especially when it comes to floating effects that make the page look cool. But if you use too much absolute positioning on your Web page, it will make your Web page very slow, and this point Firefox is worse than ie.

For example:

<style>li{Position:absolute;} </style>
<ul>
<li style= "left:10px; top:20px ">001</li>
<li style= "left:30px; top:70px ">001</li>
<li style= "left:40px; top:50px ">001</li>
......
</ul>

Suggested Solutions :

1. As little as possible, this less used value is how much, also do not have a very good value to illustrate, but also to see the absolute positioning of the contents of the tag inside the content, I can only say that this writing will have a performance problem, less.
2. If you can achieve the same effect with flexibility, use a flexible approach.