CSS Sprite优化:减少HTTP链接数

巴比牛仔

巴比牛仔

2016-02-19 23:58

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

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

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

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

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

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

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

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

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

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

参考资料

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

展开更多 50%)
分享

猜你喜欢

CSS Sprite优化:减少HTTP链接数

Web开发
CSS Sprite优化:减少HTTP链接数

CSS优化:less优化CSS

Web开发
CSS优化:less优化CSS

s8lol主宰符文怎么配

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

CSS Sprite操作:用CSS处理圆角

Web开发
CSS Sprite操作:用CSS处理圆角

CSS Sprite图片处理技巧

Web开发
CSS Sprite图片处理技巧

lol偷钱流符文搭配推荐

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

使用 CSS sprite 的好处和坏处

Web开发
使用 CSS sprite 的好处和坏处

使用CSS sprite的好处和坏处

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
使用CSS sprite的好处和坏处

lolAD刺客新符文搭配推荐

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

飞秋(FeiQ)详细说明及介绍

飞秋(FeiQ)详细说明及介绍

怎么删除wind7系统还原点

怎么删除wind7系统还原点
下拉加载更多内容 ↓