10 statements that affect CSS rendering speed and suggestions for Use Page 1/3 _ experience exchange

CSS is rarely written recently and may be rarely written in the future. I 'd like to share some of my experiences with you and hope to help you! CSS is rarely written recently and may be rarely written in the future. I 'd like to share some of my experiences with you and hope to help you!

This article focuses on the CSS section that improves the rendering speed of web pages on the client browser, and summarizes 10 articles for the time being.

1. Try to avoid * {}# jb51 * {}

Because different browsers have different interpretations of HTML tags, the final web page effect may be different in different browsers. to eliminate this risk, designers usually remove all the default attributes of all tags at the beginning of CSS to achieve the unified effect of all signature attribute values. Therefore, the * wildcard is available. * All labels are traversed;

*{margin:0; padding:0}

In this case, the margin values of all tags on the page are 0, and the padding value is 0;

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

In this case, the margin values of all the labels whose id is equal to jb51 are all 0, and the padding value is also 0;

The problem is:
A. traversal consumes a lot of time. If your HTML code is not properly written or a logo is not required, the time may be longer;
B. Many tags do not have this attribute or the attribute itself is unified. Therefore, they are set once and time-consuming;

Recommended solution:
A. Do not use uncommon labels, because these labels are often interpreted differently in different browsers. Therefore, try to use frequently-used labels as much as possible;
B. Do not use *. Instead, process the tags you commonly use. For example, body, li, p, h1 {margin: 0; padding: 0}

2. Do not use filters.

Some filters of IE are not supported in FIREFOX. When writing some effects, you still use css hack, while filters are very resource-free; in particular, the effects of feathers, shadows, and a forward transparency;

For example, a shadow effect:

 
 
test
 
 

Recommended solution:
A. Do not use it if you can. On the one hand, there are compatibility issues. Many effects can only be used in IE;
B. in this example, we recommend that you use images as the background if you want to achieve this effect. (For the optimization speed, the actual application can be used in a small part. Some people may say that, one more image is used.
What about HTTP requests ......)

A good example is that during the 512 earthquake this year, many websites all turned gray overnight. They only used a line of CSS code:


Program code

body{filter: gray;}

However, you will see that these web pages are very slow, and your CPU will soar when you open them. It is no exaggeration to say that if your computer configuration is poor, you will not be able to do it too.

3. Use absolute positioning for a single page

Absolute positioning (position: absolute) is very common in web page layout, especially for some floating effects, it will make the page look very cool. However, if you use too many
The absolute positioning of, will make your web page very slow, this point above FIREFOX performance is worse than IE.

For example:

Program code

 
 
 
 
  
  
001
 
  
  
001
 
  
  
001
 …… 
 
 

Recommended solution:
A. try to use as little as possible, and there is no very good value to describe the value of this less use. Also, you must determine how much content is located in this tag. Here I can only say, write it like this.
There will be performance problems, less use.
B. If the same effect can be achieved with a work und, use a work und.

4. tiled background images

In some cases, image tiled is usually used for the background of a webpage or the background of a certain part of the page. After tiled, the number of tiled items may fail.

A simple example:

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

Example 2: Same effect. Try again!

Note: The two above effects are tested. The worse your computer is, the more obvious it is. If your computer configuration is very good, you can change 8000px to 90020.px. If not, changed.
Bigger, don't scold me for the whole crash!

Recommended Practice:
A. Images with less colors need to be GIF images;
B. The tiled image should be as big as possible. For GIF images with less color, the image size will not be much larger. The two examples above prove that the first image is very
The second figure is larger, but the speed is very different;

5. inherit as many attributes as possible

Make sure that some attributes can inherit the parent rather than overwrite the parent;

A simple example:

 
test
 
jb51

 
test
 
jb51

In fact, I want jb51 to inherit the default attributes, because those attributes already exist.

In addition, we should pay attention to a few of the issues that are not particularly important. The impacts are not as big as those above:

6. the CSS path should not be too deep;
For example:

Program code

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

7. Some of them can be abbreviated;
For example:

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

Changed:

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

This does not affect the rendering speed; it only contains a few characters;

8. Do not empty the class or the class that does not exist in the HTML code;

9. float applications
I feel that if I use this item improperly, there will be performance problems and it is still very big, but I really don't know how to give an example; it is only recommended that you do not understand how float works, or use it less.

10. reasonable layout
In this case, a reasonable layout can change the CSS writing and rendering process.

In fact, some cannot be summarized as CSS;

The above 10 statements that affect the CSS rendering speed and suggestions for use are displayed on page 1/3 _ experience exchange. For more information, see the PHP Chinese website (www.php1.cn )!