10 How to influence the rendering speed of CSS

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:
A. 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;
B. Many of the labels do not have this attribute or attribute itself is unified, then to set up once, there is time to open the elimination;

Suggested Solutions:
A. 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;
B. Do not use *; instead, deal with these tags that 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:

 

Suggested Solutions:
A. Do not use, on the one hand compatibility problem; many effects can only be used in IE;
B. In the case of this example, if you want 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 a picture 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:

1. 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. [Mrgreen]

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:

1. <style>li{Position:absolute;} </style>
2. <ul>
3. <li style= "left:10px; top:20px ">001</li>
4. <li style= "left:30px; top:70px ">001</li>
5. <li style= "left:40px; top:50px ">001</li>
6. ......
7. </ul>

Suggested Solutions:
A. 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 label inside the content of what I can only say that this writing will have performance problems, less.
B. If the same effect can be achieved with flexibility, a flexible approach is used.

4, background background picture of the tile

Some of the background of the Web page or the background of a piece of the page is usually used to tile the picture, tile will have the number of tiles, if it is a single time, if it is many times, the waste.

For a simple example:

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

<div style= "height:8000px; Background:url (i2008962026.gif) "></div>

Example two: The same effect, try this again!

 

<div style= "height:8000px; Background:url (120089620424.gif) "></div>

Description: Test the above two effects, your computer The worse the more obvious, if your computer configuration is very good, you put on the 8000px to 9000000px to try, if not yet, change the larger some, the whole panic don't scold me! [Razz]

Recommended Practice:
A. The color of the picture to be made into GIF pictures;
B. Tile the picture as large as possible, if the color of the GIF pictures, the picture is larger, the actual size will not be much; the top two examples are very good proof, the first picture is very few, the second figure is bigger; but the speed is very different;

5, let the attribute as many as possible to inherit

Make it possible for some of the attributes to inherit from the parent, rather than overriding the parent;

An example of simplicity:

1. <style>
2. A:link,a:visited{color: #0000FF}
3. A:hover,a:active{color: #FF0000}
4. #zishu a:link, #zishu a:visited{Font-weight:bold}
5. #zishu a:hover, #zishu a:active{font-style:italic;}
6. </style>
7. <div><a href= "#" >test</a><div>
8. <div id= "Zishu" ><a href= "#" >zishu</a></div>

I actually asked Zishu to inherit the properties of my default settings because those properties already exist.

In addition to say a few is not particularly important place, usually pay attention to the line, not above these several influence is so big:

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

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

7, can be abbreviated to some of the shorthand;
For example: #zishu {pading-top:10px; padding-right:50px; padding-left:50px padding-bottom:4px;} changed to: #zishu {padding:10px 50px 4PX 50px}
This has no effect on the rendering speed; just a few characters; [lol]

8, do not empty class or no class in the HTML code;

9, the application of float
This thing I feel is if the use of improper, hundred percent of performance problems, but also very large, but really do not know how to get an example out of it, can only suggest that if you are not very clear how float is working, or less use is wonderful.

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

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