Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points that affect the speed of CSS rendering. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

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

Due to different browsers' interpretation of HTML tags, the final web page effect may be different in different browsers. In order to eliminate this risk, designers will usually remove all the default attributes of all tags at the beginning of CSS, so as to achieve the effect that all label attribute values are uniform. So there are * wildcards. * will traverse all the tags

* {margin:0; padding:0}

Suggested solution:

Don't use obscure tags, because they tend to be interpreted differently in different browsers; so you should use the commonly used tags as much as possible.

2. Don't use some things of the filter.

Some filters of IE are not supported in FIREFOX. Often you still use CSS HACK; when writing some effects, and the filter is a very small resource; especially some feathering, shadows and a pre-transparent effect.

Suggested solution:

Do not use it if you can not use it. On the one hand, it is compatible with the problem; many effects can only be used in IE.

A very good example is that during the May 12 earthquake this year, many websites turned gray overnight, using only one line of CSS code:

Body {filter: gray;}

3. Use less absolute positioning on one page

Absolute positioning (position:absolute) is very common in web layout, especially when doing some floating effects, it will also make the page look very cool. But if you use too much absolute positioning in your web page, it will make your web page very slow, and the performance of FIREFOX above is even worse than that of IE.

Suggested solution:

Use as little as possible, how much is this underused value, and there is no very good value to explain; it also depends on the absolute positioning of the contents of the tag.

If you can use workarounds to achieve the same effect, use workarounds.

4. Tiling of background background images

The background of some web pages or the background of a certain piece of the page usually use the tiling of the picture, after tiling, there will be the problem of the number of tiling, if it is a single time, if it is multiple times, it will be useless.

Recommended practice:

Pictures with few colors should be made into gif pictures.

The tiled picture is as large as possible. If it is a GIF picture with less color, the picture is larger, and the actual size will not be much larger. The above two examples well prove that the first picture is very small, and the second picture is larger, but the speed is very different.

5. Let the attributes inherit as much as possible

As far as possible, some attribute children can inherit the parent instead of overriding the parent.

6. The path of CSS should not be too deep

# zishu # info # tool # sidebar h3 {font-size:12px;}

7. Abbreviate what you can.

This has no effect on rendering speed; it's just a few characters missing.

8. Don't leave empty class or unavailable class in HTML code

9. The application of float

My feeling is that if this thing is not used properly, it has 100% performance problems, and it is also very large, but I really don't know how to get an example. I can only advise you to use less if you don't quite understand how float works.

10. Reasonable layout

Why do you say that? reasonable layout can change the way CSS is written and the rendering process.

These are all the contents of this article entitled "what are the writing methods that affect the speed of CSS rendering?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.