How CSS improves rendering performance

The habit of writing CSS determines the speed of page rendering, which is more obvious in IE. Developing good habits and standards will allow you to load your pages more quickly and enjoy a higher user experience. Below are some tips for improving CSS rendering speed, for your reference.

1. Do not use *{}
Some front-end developers often use * {margin: 0; padding: 0} to reset CSS. Although this method is easy to write, the browser engine needs to traverse all the labels after rendering, efficiency is greatly affected. We strongly recommend that you do not use it like this!
Recommended solution: process the tags you commonly use. For example: body, li, p, h1 {margin: 0; padding: 0 }, you can refer to the CSS reset code of a large website.

2. Use absolute location on the page.
Absolute positioning (position: absolute) is very common in web page layout, especially for some floating effects, it will make the page look very cool. However, because of the rendering mechanism of the browser, if you use too many absolute positioning in the webpage, it will make your webpage very slow.
Recommended solution: use as few as possible to achieve the same effect.

3. Inherit as many attributes as possible
Try to make some attributes inherit the parent element rather than overwrite the parent element.

4. CSS layers cannot be too many.
# Zishu. info. tool. sidebar h2 {font-size: 12px;}, which is not recommended, recommended syntax:. Zishu-s-h2 {font-size: 12px ;}.

5. Do not empty the class
Do not empty the class or the class that does not exist in the HTML code. This is meaningless.

6. Reasonable layout
A reasonable layout can change the CSS Writing and rendering process. You can refer to the layout of large websites for more information.