Home >
Article > Web Front-end > 10 Writing and Usage Suggestions that Affect CSS Rendering Speed Page 1/3_Experience Exchange
10 Writing and Usage Suggestions that Affect CSS Rendering Speed Page 1/3_Experience Exchange
- PHP中文网Original
- 2016-05-16 12:04:531208browse
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:
test
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
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?
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:
