<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>岁月如歌 &#187; sprite</title>
	<atom:link href="http://lifesinger.org/blog/tag/sprite/feed/" rel="self" type="application/rss+xml" />
	<link>http://lifesinger.org/blog</link>
	<description>关注用户体验、前端开发，记录生活点滴、岁月足迹。</description>
	<lastBuildDate>Mon, 06 Sep 2010 15:05:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>CSS Sprite 的细节优化</title>
		<link>http://lifesinger.org/blog/2009/07/css-sprite-performance/</link>
		<comments>http://lifesinger.org/blog/2009/07/css-sprite-performance/#comments</comments>
		<pubDate>Wed, 29 Jul 2009 05:21:59 +0000</pubDate>
		<dc:creator>lifesinger</dc:creator>
				<category><![CDATA[开发]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[sprite]]></category>

		<guid isPermaLink="false">http://lifesinger.org/blog/?p=2014</guid>
		<description><![CDATA[CSS Sprite 最大的好处是：减少 HTTP 链接数。 页面上的数据，通过 TCP/IP 包传输。在 1M ADSL 环境下，网速最大值为 128 Kb/s, MTU(Maximum Transmission Unit) 的大小默认为 1500 bytes. 去掉 TCP/IP 的头部信息 40 bytes, 一个 package 可以容纳的文件大小为 1460 bytes. 下面是一张示意图： 需要的包越少，意味着速度越快。 例子：淘宝首页有一张 sprite: hd_20090313.png, 大小为 5.71 KB (5848 bytes). 需要 5 个包来传输（5848 / 1460 = 4.005）。看数据，只多出了 8 bytes. 优化到 5840 bytes 后，就可以减少一个传输包。 也许吹毛求疵了，但对于关键页面，任何细节优化，有时都是值得的。 类似的，对于页面中的链接数量，也可以考虑浏览器的最大并发数来做细节优化。比如，在 Firefox [...]]]></description>
			<content:encoded><![CDATA[<p>CSS Sprite 最大的好处是：减少 HTTP 链接数。</p>
<p>页面上的数据，通过 TCP/IP 包传输。在 1M ADSL 环境下，网速最大值为 128 Kb/s, MTU(Maximum<br />
Transmission Unit) 的大小默认为 1500 bytes. 去掉 TCP/IP 的头部信息 40 bytes, 一个 package 可以容纳的文件大小为 1460 bytes. 下面是一张示意图：<br />
<img src="http://lifesinger.org/blog/wp-content/uploads/2009/07/dsl-package-size.png" alt="dsl-package-size.png" /></p>
<p>需要的包越少，意味着速度越快。</p>
<p>例子：淘宝首页有一张 sprite: <a href="http://assets.taobaocdn.com/app/fp/2009b/hd_20090313.png">hd_20090313.png</a>, 大小为 5.71 KB (5848 bytes). 需要 5 个包来传输（5848 / 1460 = 4.005）。看数据，只多出了 8 bytes. 优化到 5840 bytes 后，就可以减少一个传输包。</p>
<p>也许吹毛求疵了，但对于关键页面，任何细节优化，有时都是值得的。</p>
<p>类似的，对于页面中的链接数量，也可以考虑浏览器的最大并发数来做细节优化。比如，在 Firefox 下，同一个 host 的最大并发数为 6, 增加链接数对下载时间的影响如下：<br />
<img src="http://lifesinger.org/blog/wp-content/uploads/2009/07/http-request.png" alt="http-request.png" /></p>
<p>当链接数从 6 的整数倍增 1 时，下载时间明显增大。考虑 IE6 最大并发数是 2, 减少链接数时，尽量减少到偶数，是一个不错的优化守则。</p>
<h4>参考资料</h4>
<ul>
<li><a href="http://alistapart.com/articles/sprites/">CSS Sprites: Image Slicing’s Kiss of Death</a></li>
<li><a href="http://www.fiftyfoureleven.com/weblog/web-development/css/css-sprites-images-optimization">CSS, Image Sprites, Background Images and Website Optimization</a></li>
</ul>
<p>PS: 出一道题目考考大家：CSS Sprite 的缺点是什么？</p>
]]></content:encoded>
			<wfw:commentRss>http://lifesinger.org/blog/2009/07/css-sprite-performance/feed/</wfw:commentRss>
		<slash:comments>29</slash:comments>
		</item>
	</channel>
</rss>
