CSS performance optimization skills

Document directory

• 1. Use CSS Sprite and datauri properly
• 2. Compress CSS and use simple code to write CSS
• 3. More efficient Selector
• 4. Avoid using filters and expressions

As part of the Guide for browsers to render page styles, the performance of CSS has a huge impact on the overall performance of the page. In this article, we will discuss how to optimize CSS. In fact, all the methods are not complex. The key is to implement them in practice, and have a deep understanding of the differences between optimization and unoptimized. In addition, the rational use of some tools in this process can be of great help to us. Google's page speed and Yahoo's yslow are both good choices, both of which are based on firebug plug-ins. In this article, we mainly use page speed for demonstration.

1. Use CSS Sprite and datauri properly

CSS SpriteI believe everyone is familiar with it. Combine the image used as the background in CSS into a picture, and then set the specific position of the display through background-position. This method is very effective for reducing the number of HTTP requests, but not all images are suitable for Sprite, such as a background to be tiled. In addition, another problem with CSS Sprite is that it is difficult to maintain and update the image. Just imagine it would be much harder to modify a large image by modifying a bunch of small images. Therefore, before merging a large image, careful design is an indispensable part.DatauriIs a scheme to embed small files into documents. An example is as follows:

Body {Background: URL (data: image/GIF; base64, GIF image encoding );}

The main purpose of datauri is to reduce the number of HTTP requests. However, in fact, you need to be cautious when using this technology. datauri has enough disadvantages for developers to give up on it. First, the browser needs to convert the encoding into an image and present it out of ten times the overhead of a common image. Secondly, the encoded image cannot be reused, which means that on a page, to use the image multiple times, you need to copy the code multiple times. Finally, the above method is not applicable to IE6/7. To be fully compatible, you need to add hack for them, this means that you need to double the amount of code, which is not worth the candle.

2. Compress CSS and use simple code to write CSS

These two tips aim to make CSS files smaller. Compressor of Yui is recommended for compressing CSS to remove space characters that are useful to developers and useless to browsers, or even line breaks. This is a Java Applet in command line mode, it is suitable for adding it to your automatic deployment process. It is very simple to use. The following command line will compress a.css and output it to a.min.css.

    java -jar yuicompressor.jar a.css -o a.min.css

In fact, Yui compressor is really powerful in Javascript compression. If you are interested, you can check the documentation. The following figure shows the comparison between a.css before compression and a.min.css after compression. We can see that Yui compressor removes all unnecessary space characters and line breaks, the compression ratio is about 37% (depending on the situation)

Some friends may not have the conditions for automatic deployment for various reasons, so it may be a little troublesome to use Yui compressor. In this case, we recommend using the previously mentioned page speed, if your CSS file is not compressed, page speed will give a red warning in the Minify CSS item. If you expand the options, you can see that Google has prepared a compressed version for you, you can choose to view or save it as needed, which is very convenient. (For example)

CSS simple code writing is very simple. Many attributes can be expressed in short. If this writing method becomes a habit, you will find how easy it is to reduce the CSS file size:

    body {        background:url(images/bg.png) repeat #369 center center;        padding:5px 10px;        margin:5px 10px;        font:bold 18px Arial;        border:1px solid #ccc;    }

3. More efficient Selector

Many developers have HTML cleanliness and do not even want to mark more IDs or classes for elements. However, the side effect is that the Selector Used in CSS is too complicated:

    #nav li a {...}    #footerWrapper #footer .column p {...}    ul > li > a {...}    form#login {...}

In the above example, there are low-efficiency selectors. A large number of inefficient selectors will affect the page rendering performance. In fact, Google recommends that we use a more concise selector and direct it to elements using ID or class. The descendant selector is of course very useful, but it is best not to exceed two layers. If the selector you are using is not recommended by Google, you will be prompted in page speed to expand the use efficient CSS selectors item, each inefficient selector is listed by severity.

4. Avoid using filters and expressions

This article is only for IE. The IE browser can explain the filters and expressions in CSS. Although they are useful sometimes, the side effects have to be considered. For example, when we use filter to reference a transparent PNG Image, loading the image will block the browser. In this case, the browser will not perform any other operations, including loading other resources and rendering pages. In addition, when this PNG image is loaded, it cannot be cached like other images. This means that every page refresh will request and download the image again. Using expression greatly reduces the page rendering efficiency. Finally, expression is only valid in compatible mode for IE8.