How to Improve CSS rendering speed

The speed of webpage opening and browsing is affected by many factors. The customer's network speed is one aspect. In addition, the encoding method developed by the website will also burden users' computers.Article. This article focuses on the CSS section that improves the rendering speed of web pages on the client browser.

1. Try to avoid * {}# page * {}
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;

Example source code
* {Margin: 0; padding: 0}
In this case, the margin values of all tags on the page are 0, and the padding value is 0;

Example source code
# Page * {margin: 0; padding: 0}
If this is the case, the margin values of all tags whose ID is equal to that under the page are all 0; the padding value is also 0;
The problem is:
Traversal consumes a lot of time, if your HTMLCodeThe writing is not standard or a certain sign is not required, and the time may be longer;
Many labels do not have this attribute or the attribute itself is unified. Therefore, they are set once and time-consuming;
Recommended solution:
Do not use uncommon labels, because these labels are often interpreted differently in different browsers; therefore, you should try to use frequently-used labels;
Do not use *. Instead, process the tags that you commonly use. For example:

Example source code
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:

Example source code
<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>
Recommended solution:
Do not use it if you can. On the one hand, there are compatibility issues; many effects can only be used in IE;
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, there is another HTTP request in the image.
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:

Example source 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 absolute positions on the webpage, it will slow your webpage, which is worse than IE in Firefox.
For example:

Example source 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>
Recommended solution:
Try to use as little as possible, and there is no very good value to describe the value of the less use. Also, you must determine how much content is located in the tag. Here I can only say, this will cause performance issues and will be less useful.
If the same effect can be achieved with a work und, use a work und.

Iv. 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 source code
<Div style = "height: 8000px; Background: URL (http://www.xxxxxx.com/01.gif)"> </div>
Example 2: Same effect. Try again!

Example source code
<Div style = "height: 8000px; Background: URL (http://www.xxxxxxx.com/01.gif)"> </div>
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, the change is bigger. Don't scold me for the whole crash!
Recommended Practice:
Images with less colors must be GIF images;
Tiled images are as big as possible. If they are GIF images with less colors, the image size will not be much larger. The two examples above prove that the first image is very small, 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:

Example source code
<Style>
A: Link, A: visited {color: # 0000ff}
A: hover, A: active {color: # ff0000}
# Page A: Link, # page A: visited {font-weight: bold}
# Page A: hover, # page A: active {font-style: italic ;}
</Style>
<Div> <a href = "#"> test </a> <div>
<Div id = "page"> <a href = "http://www.xxxxx.com/"> xxxxxx.com </a> </div>
<Style>
A: Link, A: visited {color: # 0000ff}
A: hover, A: active {color: # ff0000}
# Page A: Link, # page A: visited {font-weight: bold}
# Page A: hover, # page A: active {font-style: italic ;}
</Style>
<Div> <a href = "#"> test </a> <div>
<Div id = "page"> <a href = "http://www.xxxx.com/"> xxxxx.com </a> </div>
6. CSS path should not be too deep:
For example:

Example source code
# Page # info # tool # sidebar H2 {font-size: 12px ;}
7. Abbreviations:
For example:

Example source code
# Page {pading-top: 10px; padding-Right: 50px; padding-left: 50px; padding-bottom: 4px ;}
Changed:

Example source code
# Page {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.
I once wrote an example because I had killed ie. Although it has nothing to do with it: IE's death _ originally related to CSS

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