Does CSS Sprites occupy too much browser memory?

Document directory

• Summary:

It may be the relationship between a microblog. Someone commented today that the memory usage will soar with sprites... This problem is also discussed quite a lot. So, after using Sprite, will it occupy a lot of memory?

Lab:

In the afternoon, I did a simple experiment. I used 99 PX * PX PNG 32 images and wrote three pages for testing:

• Call with only the IMG label;
• Use CSS to call each PNG image as the background;
• Use Sprite for background

Then we use Chrome, IE6/7/8/9, and Firefox to perform tests. I will not detail the specific data here. If you are interested, you can test the data on your own.

Conclusion:

In various browsers, the memory occupied by the three pages is quite small, with only a small difference. In Chrome, Sprite occupies a little less memory, and IE has a little more memory...

Interactive events, including Mouseover, do not affect the browser memory, but affect the CPU usage. Even if the solid color background color is used, the CPU usage is increased when the event is triggered...

Therefore, the real problem with Sprite is the utilization rate. As the big cat said, if you merge 10 icons in the sprite, only three icons are actually used, which is a waste of memory.

In fact, the memory occupied by images in the browser can be calculated: transparent images, memory usage is long * width * 4, and non-transparent images use long * width * 3, for example, in the third example, the image size is 12770*128, which occupies about 12770*128*4 = Mb in the browser.

Therefore, we recommend that you read the translated "CSS Sprites: Do you want to?".

Summary:

• The sprite size should be optimized with as few blank spaces as possible;
• Promptly clear images that are no longer in use;
• Separate the sprite weights and separate them at the global/framework level from those at the local/module level;
• The cache setting matches the update frequency. If you set the cache of the updated sprite every day to a month, problems may occur easily.

PS: Since the automatic merging of sprites with cssgaga, you no longer have to worry about making or updating sprites...

From: http://www.qianduan.net/css-sprite-diagram-occupied-by-the-memory-of-too-many-browser.html