鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > 网站制作教程 > css > >

使用CSS sprite 的好处和坏处分析 CSS,sprite

来源:互联网 作者:佚名 时间:2013-11-14 11:24
牛图库(niutuku.com)素材网提供CSS,sprite,等设计素材免费下载。
无处不在的 CSS sptites - 为数不多的几个可以直接跳过”流行”这个过程,而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。

关键词:

原文:CSS Sprites: Useful Technique, or Potential Nuisance?

译文:CSS Sprites:鱼翅还是三鹿?

无处不在的 CSS sptites - 为数不多的几个可以直接跳过”流行”这个过程,而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。虽然它真正流行是在 A List Apart 解释并认可这个技术之后,但是早在 2003 年 7 月份,Peter Stanicek 就已经开始谈论它了。

目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章。几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量。这个技术被大量网站使用,包括使用了大型 sprite 的 Amazon .

但是这些被广泛热议的好处真的是值得的吗?设计师们是否在没有全面考虑到所有情况的情况下,在盲目地使用这个技术呢?设计师们是不是过于关注 CSS sprite 的流行,而忽略了其它应该仔细斟酌的因素了呢? 这篇文章会讨论下使用 CSS sprite 的好处和坏处,尤其关注”滥用” sprites 的情况,而且会解释下为什么“滥用” sprite 其实是浪费时间。

浏览器缓存所有图片

sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时,单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表,而单独分割的每一张 GIF 都有自己的一个色表,这就增加了总体的大小。因此,单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。但是这真的有想象的那么好吗?

一般来说,浏览器会缓存所有的图片 – 无论图片 sprite 与否。sprite 技术只是在页面第一次加载的时候才会节省带宽,同时缓存也会对使用相同图片的其他页面有效。

Firefox 缓存显示的浏览器缓存的来自 amazon.com 的图片(在 Firefox 地址栏输入 “about:cache” 来查看)。

考虑到现在的普遍网速已经比 2003-2004 年时提出这个技术的时候要快多了,因此大量使用 sprite 技术就不是那么必要了。有一点需要明确,不是说不应该用 sprite,而是不应该为了有限的好处来滥用这个技术。

拼合图片的时间成本会增加

想象一下一个有三个状态的图片按钮是怎么制作的:代表不同的状态的图片需要临近放置在一起组成一张图片。在使用 Photoshop 或其他软件切图时,不同的状态并不会在一起;需要把他们单独切出来再合并为一张图片。

如果其中任一个图片状态需要改变,整个图片就需要重新制作保存。对一些设计师来说这不是什么问题,也许他们会单独保留不同按钮状态的源文件,这样需要合并的时候就简单了。但是这个过程有点复杂,远没有切出一个单独图片来的简单。

为了节省几 k 的流量和几个服务器请求(还只发生在第一次加载页面时),sprite 技术是否真的值得?

编码和维护的时间成本会增加

图片切片输出之后,麻烦依然存在。虽然习惯这个过程之后,按钮 sprite 可以很简单地编码到 CSS 中,但是其他的 sprites 就不这么简单了。

单一的一个按钮一般会是个有定宽的 <ul> 元素。假如按钮的 sprite 是彼此独立的,就比较简单:<ul> 的宽高会和列表项和锚点的宽高一致,每个状态的 sprite 对齐摆放。sprite 的位置也可以很容易地根据每个按钮的宽高计算出来。

但是遇到之前提到的,像 Amazon 或者 Google 用到的大型 sprite 的情况时,会怎么样呢?你能想象到到维护这么一个文件,并且在 CSS 中改变 sprite 项的位置会是什么样吗?还有第一次创建 CSS 代码的情况?相对于一个可以轻松计算出来状态位置的简单按钮来说,大型的 sprite 会导致无尽地测试和图片状态的重新摆放。

一些用于定位 Google 的 sprite 图片的样式

Amazon 的 sprites 确实节省了至少 30 个 HTTP 连接,性能方面也确实有了很大的提高。但是把这些好处拿来和开发以及维护成本做个比较,再把缓存和网速等因素考虑进来,,决定使用如此大型的 sprites 也许就不那么令人信服了。

Sprites 是否真的需要“维护”?

当然了,有些人不觉得 sprite 是首要引起头疼的问题。大部分情况下,一个 sprite 创建并编码完之后,就很少会被改动了,也不会受进行中的网站维护的影响。假如你感觉 sprite 维护不是个问题的话,那么也许使用大型 sprite 是最好的选择。

不是所有图片都是背景

另一个不提倡滥用 CSS sprite 的理由是这会导致开发人员错误地使用背景图片。有经验的开发人员会在项目中考虑可访问性问题,他们明白并不是每个图片都是背景。背景图片应该留给按钮以及用来装饰元素,而用来传达重要信息的图像应该内联在 XHTML 中。

Amazon 正确是使用了内联图像元素和装饰用的背景。

错误得使用 Sprites 影响可访问性

一些刚入门的开发人员会为了节省 HTTP 请求数(这是使用 CSS Sprite 一直强调的好处)而把所有的图片都当背景图片来处理 – 甚至是那些传达重要信息的图片。结果会导致一个缺乏可访问性的网站,也会降低 HTML 中 title 和 alt 的潜在益处。

因此,CSS sprite 本身没错,而且也不会引发可访问性问题(事实上,正确得使用会提高可访问性)。但是不分对错得过度使用 sprite 会阻碍具有可访问性和生产率方面的网页建设进程。

HTTP 请求数又如何?

许多人会据理力争,改善网站性能最重要的部分就是减少 HTTP 请求数。也要知道一项研究表明一个网站日常的访问者中 40-60% 比例都是没有浏览器缓存的。这是否足以说明应该在所有情况下使用大型 sprites 呢?或许是这样。尤其是考虑到用户的首次来访对一个网站的重要性。

Firefox 的 YSlow 插件显示 HTTP 请求数

以往的浏览器一般只允许 2 个并发 HTTP 连接,3.0 版本以来的 Firefox 和 IE8 默认允许 6 个并发 HTTP 连接。这意味着每台服务器有 6 个并发连接。引用 Steve Souders 的话:

网友评论
<