CSS Sprite优化:减少HTTP链接数

2016-02-19 23:58 2 1 收藏

下面这个CSS Sprite优化:减少HTTP链接数教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

CSS Sprite 最大的好处是:减少 HTTP 链接数。

页面上的数据,通过 TCP/IP 包传输。在 1M ADSL 环境下,网速最大值为 128 Kb/s, MTU(Maximum
Transmission Unit) 的大小默认为 1500 bytes. 去掉 TCP/IP 的头部信息 40 bytes, 一个 package 可以容纳的文件大小为 1460 bytes. 下面是一张示意图:
dsl-package-size.png

需要的包越少,意味着速度越快。

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

例子:淘宝首页有一张 sprite: , 大小为 5.71 KB (5848 bytes). 需要 5 个包来传输(5848 / 1460 = 4.005)。看数据,只多出了 8 bytes. 优化到 5840 bytes 后,就可以减少一个传输包。

也许吹毛求疵了,但对于关键页面,任何细节优化,有时都是值得的。

类似的,对于页面中的链接数量,也可以考虑浏览器的最大并发数来做细节优化。比如,在 Firefox 下,同一个 host 的最大并发数为 6, 增加链接数对下载时间的影响如下:
http-request.png

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

当链接数从 6 的整数倍增 1 时,下载时间明显增大。考虑 IE6 最大并发数是 2, 减少链接数时,尽量减少到偶数,是一个不错的优化守则。

参考资料

PS: 出一道题目考考大家:CSS Sprite 的缺点是什么?

来源:http://www.tulaoshi.com/n/20160219/1630960.html

延伸阅读
标签: Web开发
链接(a)     对于很多追求页面美观的站长来说,默认的链接样式实在是太难以容忍了。而且它们也很难和网站的风格相吻合。不过有了CSS之后我们就不用担心了。下面就看看如何修改网页的链接样式。 1. 改变整个页面的链接样式 。style type="text/css" a:link { color: #FF0000; text-decoration: none; } a:visited { c...
标签: Web开发
众所周知,减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites将多个图片整合到一个图片中,然后再用CSS来定位。今天我们通过一个实例来学习CSS Sprites的使用方法。 下面是一张样图: 图片1 本文的目的并不是讲CSS Sprite如何让一个网站更快,而是说一些使...
CSS Sprite 是一种图片的处理方式,它允许网页设计师将很多张图片合并在同一张图档中,然后根据 CSS 档中的文字描述将图档分区块加载,是现在很常见的网页图片处理方式。 例如网页上一个的按钮的三种变化效果的图片,将其顺序摆放在同一个图档中使用: 而这张是 Facebook 页面上所使用的小图标图档,像是大家最常看到的 Like 图标其实也只...
标签: Web开发
1. body选择器中声明Font-size=62.5%; 2. 将你的原来的px数值除以10,然后换上em作为单位; 简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你...
标签: Web开发
在div+css布局中,一般都这样来整体构架的: div id="header"/div div id="center"/div div id="footer"/div 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: div id="header" div id="title"这里是网站的标题/div div...

经验教程

871

收藏

53
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部