Front-end optimization summary-server-side-reduce Http times-image synthesis css sprite_html/css_WEB-ITnose

First, let’s post a neat summary of front-end optimization (the previous summary was terrible)

Cut before The pictures should be precise. The smaller the size of the picture, the better. The smaller the weight, the better. In fact, the size does not matter. Computers all calculate by bytes. Every time the client displays an image, it sends a request to the server.

Therefore, the more images, the more requests, and the greater the possibility of delay. So what we have to do here is to integrate the commonly used images in web pages into one image file, and then use CSS "backg

round-image", "background-repeat", "background-position" The combination of background-position can be used to accurately locate the position of the background image

using numbers. And css sprite is a tool that has this function.

The following are the advantages and disadvantages of css sprites

Advantages

1. Using CSS Sprites can greatly reduce the http requests of the web page, thereby greatly improving the performance of the page. This It is also the biggest advantage of CSS Sprites and the main reason why it is widely spread and used;

2. CSS Sprites can reduce the bytes of images. I have compared the words of merging 3 images into 1 image many times. Sections are always smaller than the sum of bytes of these 3 images.

3. It solves the designer's problem in naming pictures. It only needs to name a collection of pictures. There is no need to name every small element, thus improving the efficiency of web page production. .

4. It is easy to change the style. You only need to modify the color or style of the picture on one or a few pictures, and the style of the entire web page can be changed. Maintenance is more convenient.

Disadvantages

It is true that CSS Sprites are so powerful, but there are also some shortcomings that cannot be ignored, as follows:

1. When merging images, you need to The pictures should be merged into one picture in an orderly and reasonable manner, and enough space should be left to prevent unnecessary backgrounds from appearing in the section; these are okay, but the most painful thing is that in broadband,

high resolution For adaptive pages under the screen, if your picture is not wide enough, it is easy for the background to break;

2. CSS Sprites are more troublesome during development. You have to measure and calculate each background unit through PS or other tools. The precise position of It is much more convenient than photoshop to measure, and the style is directly generated

, copy, and copy is OK!

3. CSS Sprites are more troublesome to maintain. If there are slight changes to the page, you usually need to change the merged image. It is best not to change the parts that do not need to be changed, so as to avoid changing more css. If the original

cannot fit in the place where it comes from, you can only (preferably) add the image below, which will increase the bytes of the image, and you will also need to change the css.

4. CSS Sprites are worth learning and applying, especially if the page has a bunch of icos (icons). In short, many times we have to weigh the pros and cons before deciding whether to use CSS Sprites.

If you have better tools, you can recommend them to me! You can also communicate and learn together.