Do CSS sprite images take up too much browser memory?

It may be the relationship between a microblog, someone commented today that the use of Sprite map, memory will soar ... This question is also a lot of discussion, that, in the end, the use of Sprite map, will occupy a lot of memory?

Experiment:

The afternoon did a simple experiment, with 99 128px*128px PNG 32 pictures, wrote three pages to do the test:

• Call only with IMG tags;
• Use CSS to invoke each PNG picture to do the background separately;
• Using Sprite to do background

Then use the chrome, IE6/7/8/9, Firefox to do the test, the specific data I do not detail here, interested in the words can be a self-test.

Conclusion:

In each browser, three pages occupy a considerable amount of memory, only a small difference, chrome, snow sprite footprint a little bit less memory, ie a little bit more ...

Interactive events, such as mouseover, have little effect on browser memory, but affect CPU usage--even if the solid color background color increases the CPU usage when the event is triggered ...

So, the real problem of Sprite diagram is the utilization of the problem, such as the big Cat said, if you have merged 10 icon, the result is actually only used 3, that is a waste of memory.

In fact, the image in the browser occupied by the memory can be calculated: Transparent picture, memory footprint is long * wide *4, opaque pictures occupy is long * wide *3, such as the third example of sprite size is 12770*128, it occupies memory in the browser is 12770*128*4=6.23MB around.

Therefore, it is advisable to read the previous translation of the "CSS Sprite: or not?" 》。

Summarize:

• Sprite map of the size to optimize, blank as little as possible;
• Clean up any unused pictures in time;
• The weight of the sprite is separated, the global/frame level and the local/modular level are separated;
• Cache settings and update frequency matching, if the daily update of the sprite map of the cache set to one months is very easy to problem.

PS: Since the use of the Cssgaga automatically merged sprite function, no longer need to make/update sprite plan to worry about ...