Article 10 CSS rendering speed statement and recommendations page 1/3

This article Article I mainly wrote about the CSS section that improves the rendering speed of web pages on the client browser, and summarized 10 items 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 will consume a lot of time if your HTMLCodeThe writing is not standard or a certain sign is not required, and 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:<Br/> <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> test <p>
[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]