CSS: Improves the rendering speed of web pages in the browser

Http://www.zishu.cn/blogview.asp? LogID = 773

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 * {}# zishu * {}

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;

# Zishu * {margin: 0; padding: 0}
In this case, the margin values of all tags whose id is equal to zishu are all 0; the padding value is also 0;

The problem is:

1. Traversal consumes a lot of time. If your HTML code is not properly written or a tag is not required, the time may be longer;
2. Many labels do not have this attribute or the attribute itself is unified. Therefore, they are set once and time-consuming;

Recommended solution:

1. Do not use uncommon labels, because these labels are often interpreted differently in different browsers; therefore, you should try to use frequently-used labels;
2. 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:

Run code box

<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>

Run code Copy code Save code Add to favorites

The link to the example is: http://www.zishu.cn/blogview.asp? LogID = 610
People network login part of the use of the shadow effect: http://shanghai.baixing.com/wo/denglu

Recommended Solution:

1. Do not use it if you can. On the one hand, there are compatibility issues; many effects can only be used in IE;
2. 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, haha ......)

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:

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:

<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:

1. 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.
2. If you can achieve the same effect with a work und, use a work und.
   • 2 pages in total:
   • Previous Page
   • 1
   • 2
   • Next Page