10 comments on how to render speed of CSS

1, *{} #zishu *{} try to avoid due to different browsers on the interpretation of HTML tags, so the final page effect in different browsers may not be the same, in order to eliminate this risk, the designer usually at the beginning of the CSS will all the default properties of all the tags are removed to achieve the same effect of all the signature property values. So there's the * wildcard character. * Will traverse all the tags; *{margin:0; padding:0} Suggested Solutions:  1) Do not use uncommon tags, because these tags are often interpreted in different browsers the effect is not the same, so you want to use as far as possible the most commonly used tags; 2) do not use *, but the tags you commonly used to deal with; for example: body,li,p,h1{margin:0; padding:0} 2, filter of some things do not use ie some filters in Firefox does not support, often write some effect when you still use CSS HACK, and filter is a very resource of things, especially some feathers, shadows and a former transparent effect; Suggested Solutions: 1) Do not use, on the one hand, compatibility problems; many effects can only be used in IE; 2) For the purposes of this example, if the effect is not to be so, it is recommended to use the picture as the background; (Just say the optimization speed, the actual application or can be used in a small part, some people may say, with the picture more an HTTP request, hehe ...) ) A very good example of this is that in the 512 earthquake, many websites all turned gray overnight, they only used a line of CSS code:Body{filter:gray;} But, you will see these pages are very slow, open your CPU will also soar, it is not exaggerated to say that if your computer configuration is poor, you can not die.  3, a page less absolute positioning absolute Positioning (position:absolute) is commonly used in web page layouts, especially when it comes to floating effects, making the page look cool. However, if you use too much of the absolute location of the page, it will make your page very slow, this point on the top of Firefox performance is worse than ie. Suggested Solutions: 1) as little as possible, this less useful value is how much, also does not have a very good value to explain, but also depends on the positioning of the contents of the tag in the number; Here I can only say that this writing will have performance problems, less use.  2) If you can work with the same effect, use a flexible approach.  4, background background image tile some pages of the background or the background of a piece of the page is usually used to tile the picture, tiling will have a tile number of problems, if it is a single time, if it is multiple times, it is obsolete.  Recommended Practice: 1) The picture with less color should be made into GIF picture; 2) Tile the picture as large as possible, if it is less color gif pictures, pictures larger, the actual size will not be much larger; the top two examples are very good proof that the first picture is very small, the second figure is larger, but the speed is very different; 5, let the property as much as possible to inherit allow as many attributes as possible to inherit the parent, rather than overwrite the parent; 6, the path of CSS is not too deep; #zishu #info #tool #sidebar h2{font-size:12px;} 7, can be abbreviated some of the shorthand; This has no effect on rendering speed; just a few characters; 8. Do not empty the class or not the class in the HTML code; 9, the application of float this thing my feeling is if the use of improper, hundred percent have performance problems, but also very large, but I do not know how to get an example, here can only suggest that if you do not understand how the float is how to work, or less use for the better. once because this put ie to die, I wrote an example, although there is nothing much to do with this relationship: IE's death __ originally related to CSS 10. Reasonable layout Why do you say that, a reasonable layout, you can change the way CSS and rendering process.

10 comments on how to render speed of CSS