10 Writing and Usage Suggestions that Affect CSS Rendering Speed ​​Page 1/3_Experience Exchange

i rarely write css recently, and i may write less in the future, so i still want to share some of my experiences with you, hoping to give you some help!

this article mainly writes about the css part that improves the rendering speed of web pages in client browsers. it has temporarily summarized 10 items.

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

since different browsers have different interpretations of html tags, the final web page effect will be different in different browsers. may be different in the browser. in order to eliminate this risk, designers usually remove all default attributes of all tags at the beginning of css to achieve the effect of uniform attribute values ​​​​for all tags. so there is the * wildcard. * will traverse all tags;

*{margin:0; padding:0}

if written like this, the margins of all tags on the page will be 0; the padding will also be 0;

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

if you write it like this, the margins of all tags under the id equal to jb51 are all 0; the padding is also 0;

the problem with writing this way yes:
a. traversing will consume a lot of time. if your html code is not written in a standardized way or a certain tag does not necessarily match, this time may be even longer;
b. a lot of the tag does not have this attribute or the attribute itself is unified, so it will take time to set it up again;

suggested solutions:
a. do not use unfamiliar ones. tags, because these tags are often interpreted differently in different browsers; so you should use those commonly used tags as much as possible;
b. do not use *; instead, use these tags that you commonly use process; for example: body,li,p,h1{margin:0; padding:0}

2. don’t use some of the filters

some of the ie filters are not supported in firefox. you often still use css hack when writing some effects; and filters are a very resource-intensive thing; especially some feathering, shadows and a front-transparent effect;

for example, a shadow effect:

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

suggested solutions:
a. if you can’t use it, don’t use it. on the one hand, there are compatibility issues; many effects can only be used in ie;
b. in this case, if you must have such an effect, it is recommended to use a picture as the background; (i only talk about optimizing the speed, but it can still be used in small parts in actual applications. some people you might say that there is one more
http request when using pictures, haha...)

a very good example is that during the may 12 earthquake this year, many websites changed overnight. became gray, they only used one 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 after opening them. it is no exaggeration to say that if your computer configuration is poor, it’s not an exaggeration to kill you.

3. use less absolute positioning on a page

absolute positioning (position:absolute) is very commonly used in web page layout, especially when making some floating effects. it will make the page look very cool. however, if you use too much absolute positioning in a web page, your web page will become very slow. in this regard, firefox's performance is even worse than ie.

for example:

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

suggested solution:
a. use it as little as possible. there is no very good value to explain the value of this less use; it also depends on the content of the absolute positioning tag; here i can only say, write like this
there will be performance problems, so use it sparingly.
b. if the same effect can be achieved by using a workaround, use a workaround.

4. background tiling of background images

the background of some web pages or the background of a certain part of the page usually requires tiling of images. after tiling, there will be as for the number of tiling times, if it is a single tiling, it is fine, but if it is multiple times, it is useless.

a simple example:

example 1: scroll your page and see how the speed is?

<div style="height:8000px; background:url(http://img.jb51.net/images/i2008962026.gif)"></div>

example 2: same effect, try this again!

<div style="height:8000px; background:url(http://img.jb51.net/images/120089620424.gif)"></div>

note: test the two effects above. the worse your computer is, the more obvious it will be. if your computer configuration is very good, you can change the 8000px to 9000000px. give it a try, and if it still doesn’t work, change it to something bigger
don’t scold me if you’re worried!

suggested practices:
a. pictures with few colors should be made into gif pictures;
b. the tiled pictures should be as large as possible. if it is a gif picture with few colors, if the picture is larger, the actual size will not be much larger; the above two examples are a good proof that the first picture is very small, and the second picture is larger; but the speed is very different ;

5. inherit as many attributes as possible

as much as possible, let the child inherit some attributes from the parent instead of overwriting the parent;

a simple example:

<style> 
a:link,a:visited{color:#0000ff} 
a:hover,a:active{color:#ff0000} 
#jb51 a:link,#jb51 a:visited{ font-weight:bold} 
#jb51 a:hover,#jb51 a:active{ font-style: italic;} 
</style> 
<div><a href="#">test</a><div> 
<div id="jb51"><a href="#">jb51</a></div>

<style> 
a:link,a:visited{color:#0000ff} 
a:hover,a:active{color:#ff0000} 
#jb51 a:link,#jb51 a:visited{ font-weight:bold} 
#jb51 a:hover,#jb51 a:active{ font-style: italic;} 
</style> 
<div><a href="#">test</a><div> 
<div id="jb51"><a href="#">jb51</a></div>

actually, i asked jb51 to inherit the attributes i set by default, because those attributes already exist.

in addition, let me talk about a few places that are not particularly important. just pay attention to them at ordinary times. they are not as big as the above ones:

6. don’t make the css path too deep;
for example:

program code

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

7. can be abbreviated some are abbreviations;
for example:

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

change to:

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

this has no effect on the rendering speed; it is just a few fewer characters;

8. do not put empty classes or no classes in the html code;

9. application of float
my feeling is that if it is used improperly, it will definitely have performance problems, and it is also very large, but i really don’t know how to make an example. come out; here i can only suggest that if you don’t quite understand how float works, it’s better to use it less.

10. reasonable layout
why do you say this? reasonable layout can change the writing method and rendering process of css.

in fact, some cannot be summarized as css parts;

the above are 10 writing and usage suggestions that affect css rendering speed page 1/3_ for experience exchange content, please pay attention to the php chinese website (www.php.cn) for more related content!