10 article on how to affect the speed of CSS rendering and the use of suggestions 1th/3 Page _ Experience Exchange

Recently seldom write CSS, later may also write will be very little, so still want to put some of their own experience to share with you, I 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, temporarily summed up 10 article.

1, *{} #jb51 *{} 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 will all the default properties of all the tags are removed to achieve the same effect of all the signature property values. So there's the * wildcard character. * Will traverse all the tags;

*{margin:0; padding:0}

If this is the case, all the labels on the page are all 0;padding and the margin is 0;

#jb51 *{margin:0; padding:0}

If this is written, the margin of all the labels in the ID equals jb51 is 0;padding is also 0;

The problem with this writing is:
A. Traversal can take a lot of time, and if your HTML code is not standard or a sign is not required, the time may be longer;
B. A lot of tags are not the same property or property itself is unified, then more set once, there is time to open the elimination;

Suggested Solutions:
A. Do not use uncommon tags, because these tags tend to be interpreted differently in different browsers, so you have to use the usual tags as much as possible;
B. Do not use *; instead, take care of the tags you used to do; 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 when you still use CSS HACK, and filter is a very resource of things, especially some feathers, shadows and a former transparent effect;

For example, a shadow effect:

<style> body {margin:100px;} #login_b {width:200px;height:200px;background: #000;-moz-opacity:0.2; filter: Alpha (opacity=20); margin:-30px 0 0 600px; Position:absolute;} #login_t {z-index:10;border:1px solid #006600; Width:200px;height:200px;background: #FFF; margin:-35px 0 0 595px; Position:absolute;} #info {background: #009900; height:155px;} </style> <div id= "info" > <div id= "login_t" >test</div > <div id= "login_b" ></div> </div>

Suggested Solutions:
A. Do not use, on the one hand, compatibility issues; many effects can only be used in IE;
B. For the purposes of this example, if the effect is not to be so, it is recommended to use the picture as the background; (just say that the optimization speed, the actual application or can be used in a small part, some may say, with pictures more one
HTTP request, hehe ... ）

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


Program code

Body{filter:gray;}

But, you will see these pages are very slow, open your CPU will also soar, it is not exaggerated to say that if your computer configuration is poor, you can not die.

3, a page less absolute positioning

Absolute positioning (Position:absolute) is commonly used in web page layouts, especially when it comes to floating effects, making the page look cool. However, if you use too many pages
Absolute positioning, will make your Web page becomes very slow, this point Firefox performance is worse than ie.

For example:

Program code

<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:
A. Use as little as possible, this less value is how much, there is not a very good value to explain, but also to find out the positioning of the contents of this tag how much; Here I can only say that this writing
There will be performance problems, less use.
B. If the same effect can be achieved with flexibility, use the alternative.

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.

To give a simple example:

Example one: Scroll through your page and see how fast it is?

<div style= "height:8000px; Background:url (http://img.jb51.net/images/i2008962026.gif) "></div>

Example two: Same effect, try this again!

<div style= "height:8000px; Background:url (http://img.jb51.net/images/120089620424.gif) "></div>

Description: Test the two effects on the top, your computer The worse the more obvious, if your computer configuration is very good, you put on the 8000px to 9000000px test, if not yet, change the
Bigger, the whole crash don't scold me!

Recommended Practice:
A. Pictures with less color should be made into GIF pictures;
B. Tile the picture as large as possible, if the color of the GIF picture, the picture is larger, the actual size is not much, the above two examples are very good proof that the first picture is very
Less, the second figure 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;

A simple example:

<style> a:link,a:visited{color: #0000FF} a:hover,a:active{color: #FF0000} #jb51 a:link, #jb51 a:visited{ Font-weight:bold} #jb51 a:hover, #jb51 a:active{font-style:italic;} </style> <div><a href= "#" >test </a><div> <div id= "jb51" ><a href= "#" >jb51</a></div>

<style> a:link,a:visited{color: #0000FF} a:hover,a:active{color: #FF0000} #jb51 a:link, #jb51 a:visited{ Font-weight:bold} #jb51 a:hover, #jb51 a:active{font-style:italic;} </style> <div><a href= "#" >test </a><div> <div id= "jb51" ><a href= "#" >jb51</a></div>

Actually, I'm going to let jb51 inherit my default settings, because those properties already exist.

In addition, several are not particularly important places, usually pay attention to a little on the line, no above these several effects so big:

6, the path of CSS is not too deep;
For example:

Program code

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

7, can be abbreviated some of the shorthand;
For example:

#jb51 {pading-top:10px; padding-right:50px; padding-left:50px; padding-bottom:4px;}

Change to:

#jb51 {padding:10px 50px 4px 50px}

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 my feeling is if the use of improper, hundred percent have performance problems, but also very large, but I do not know how to get an example, here can only suggest that if you do not understand how the float is how to work, or less use for the better.

10. Reasonable layout
Why do you say that, a reasonable layout, you can change the way CSS and rendering process.

In fact, some can not be summed up as a CSS part;

The above is 10 of the effect of CSS rendering speed and the use of suggestions 1th/3 Page _ Experience Exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

