CSS page optimization

I have read many articles on page optimization recently. I have collected many articles and summarized them as follows:

1. Put the style on the head and the script on the foot. Not embedded, only external links. Use reference style sheets instead of importing them through @ import. 

* Disapproval: <P style = "font-size: 14pt;"> Home </P>

* Recommended: <link href = "style.css" rel = "stylesheet" type = "text/CSS"/> </link>

2. Number of digits and case of hexadecimal color value pairs

When writing hexadecimal color values, you may use lower-case letters or omit them into three digits. No data is found to prove whether this method affects the rendering efficiency of the browser, however, the default hexadecimal color value is uppercase and 6-digit. Lower rendering efficiency without taking risks in unknown situations.

* Disapproval: # f3a
* Recommended: # ff33aa

3. Differences between display and visibility

They are used to set or retrieve whether to display objects. Display hidden objects do not retain physical space, and visibility is the physical space occupied by hidden objects. Resources are consumed when the browser renders the occupied physical space.

* Disapproval: visibility: hidden
* Recommended: Display: None

4. Difference between border: none; and border: 0;

Similar to the relationship between display and visibility, the space is not retained. More is border: 0; although the border can be hidden, it will reserve the right to use border-color/border-style for you.

* Disapproval: Border: 0;
* Recommended: Border: none;

5. It is not advisable to use a small background image to tile.

Do not use a small image to tile the background. This is why many people do not use 1px. A picture with a width and a height of 1px is tiled out of an area with a width and a height of 200px, 200*200 = 40,000 requests, occupying resources. Improving the rendering efficiency of background images is related to the image size and size. The maximum image file size is approximately 70 KB.

* Disapproval: tiled background images below 8 Px in width and height
* Suggestion: A background image that measures the moderate volume and size

6. Use the * wildcard with caution.

The so-called wildcard character is to initialize all the labels in CSS, regardless of the unused, outdated, and advanced. In this way, resources are greatly occupied. You must have the selected initialization tag.

7. Use ie filter with caution

In addition to resource consumption, the IE filter also has compatibility issues. There is a PNG transparent filter, you can use GIF or JPG as transparent to avoid using this filter. In general, PNG is much smaller than GIF. In addition, the number of colors in GIF images is wasted, which deserves optimization.

* Recommended: Use gif for some transparent images and PNG for others

8. Selector

<1> there are four target selectors: ID, class, tag, and universal character. Let's take a look at their respective efficiency:

# Main-Navigation {}/* ID (fastest) */body. home # page-wrap {}/* ID */. main-Navigation {}/* class */ul Li. current {}/* class * ul {}/* tag */ul Li a {}/* tag */* {}/* universal (slowest) */# content [Title = 'home']/* universal (slow )*/

<2>. Do not use descendant selectors. descendant selectors are the most expensive selectors in CSS.
* Disapproval: html body ul Li {}
* Recommended: <a class = "Link"> </a>. Link {}

<3> try not to use tags
* Disapproval: ul # Main-Navigation {} ID is unique, so you do not need to use tags to modify ul, which only makes it more inefficient.

9. use abbreviations reasonably

For example, margin:
* Disapproval:

margin-top:1px;margin-right:1px;margin-botton:1px;margin-left:1px;

* Recommended:

margin:1px 1px 1px 1px;

The abbreviation is in the upper-> right-> lower-> left order. Clockwise. If the relative edge value is the same, you can save the following:

Margin: 1px; // The Four margins are the same, equivalent to margin: 1px 1px 1px; margin: 1px 2px; // the top and bottom margins are both 1px and the left and right margins are both 2px, equivalent to margin: 1px 2px 1px 2 pxmargin: 1px 2px 3px; // The right margin is the same as the left margin, equivalent to margin: 1px 2px 3px 2px; margin: 1px 2px 1px 3px; // note that although the top and bottom margins are all 1px, it cannot be abbreviated here.

Others such as border, Font, and background are also abbreviated. We do not recommend that you use color (second point)

10. CSS reuse Optimization

CSS code's common attributes are extracted to save code and facilitate maintenance.
* Disapproval
. Yangshi_a {width: 100px; Height: 20px; text-align: Left; float: Left; font-size: 24px ;}
. Yangshi_ B {width: 100px; Height: 20px; text-align: Right; float: Left; font-size: 24px ;}
* Recommended
. Yangshi_a,. yangshi_ B {width: 100px; Height: 20px; text-align: Left; float: Left; font-size: 24px ;}
. Yangshi_ B {text-align: Right ;}

11. Minimize browser reflow and repaint

The simplest is to specify the width and height for all images on the page.
When a browser sketch a page, it needs to be able to flow, such as a replaceable element. The image size is provided, and the browser knows that irreplaceable elements nearby can even be used to render the page before the image is downloaded. If no image size is specified or the specified size does not match the actual size of the image, the browser will need to reflows and redraw the page once the image is downloaded. To prevent reflows, specify the width and height for all images in the HTML label or in CSS.
There are many methods and many related articles.

Finally, the browser becomes more and more powerful. The above code is written with good code specifications, and the optimization effect is not necessarily obvious.

Refer:
1. http://homepage.yesky.com/458/8225958.shtml
2. http://www.woaicss.com/article/div/css11.htm
3. http://www.daqianduan.com/css-efficiency-browsers-render-speed/
4. http://www.woaicss.com/article/div/css--.htm
5. http://www.zcool.com.cn/article/ZMjE5NzI=.html

6. browser Rendering Principle, reflow and repaint http://www.cnblogs.com/beixiaosmail/archive/2012/02/04/2338090.html