网页设计中谨慎使用CSS sprites

心帝棒

心帝棒

2016-02-19 23:57

今天图老师小编给大家展示的是网页设计中谨慎使用CSS sprites,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

CSS sprites 是网站速度的优化很重要的一环,但也有其对性能的不利之处。

Vladimir Vukićević 的博文《To Sprite Or Not To Sprite》提到:

CSS sprites 的最大问题是内存占用。非精确构造的 sprite 图片会占用意想不到的内存空间。以 WHIT TV 网站为例,这里是一张 sprite 图片,1299x15,000 的png,已经经过很好的压缩,实际下载大小只有26K左右,但是浏览器不会转换压缩的图像数据。当图片下载并解压,将耗费75MB内存(1299 * 15000 * 4)。如果图片没有阿尔法透明,可能会减小到1299 * 15000 * 3,可往往还是牺牲了渲染速度。即便如此,我们占用了55MB内存。这张图片绝大部分是空白的,什么都没有,没有什么有用的内容。仅仅因为这张图片,当浏览器只加载WHIT 主页时会增加75+MB内存。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

Mozilla Web Development Blog 在《 Use Sprites Wisely》中总结道:

简而言之,即使是很小的 sprite 图片也有可能吃掉大量的系统内存 -- 每个页面50M甚至100M或者更多。速度虽然至关重要,但要意识到 sprite 及其他 hacks 同样会影响用户体验。

现在再回过头看之前的《Yahoo与Gmail的CSS Sprites对比》,综合性能方面 Gmail 无疑占了上风。当然,这些只是前端层面的优化,从根源上来看,设计师用最少的图片来实现最优的效果才是王道。

正如雅虎女工程师 Nicole Sullivan 在 Velocity 2009 大会演讲 PPT 《The Fast And The Fabulous》所提到的:

consistent design = clean code = fast site(一致的设计 = 更干净的代码 = 更快的网站)

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

网页设计中谨慎使用CSS sprites

Web开发
网页设计中谨慎使用CSS sprites

CSS Sprites网页图片整合方法

Web开发
CSS Sprites网页图片整合方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS Sprites优化网页代码的方法

Web开发
CSS Sprites优化网页代码的方法

CSS高级技巧:CSS Sprites

Web开发
CSS高级技巧:CSS Sprites

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS Sprites探讨

Web开发
CSS Sprites探讨

如何使用CSS Sprites优化你的网站

Web开发
如何使用CSS Sprites优化你的网站

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

创造100%功能自适应css布局的行之有效的方法

创造100%功能自适应css布局的行之有效的方法

10个HTML和CSS代码修正IE6问题的方法

10个HTML和CSS代码修正IE6问题的方法
下拉加载更多内容 ↓