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. 下面是一张示意图：

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

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

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

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

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

参考资料

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

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

看过《CSS Sprite优化:减少HTTP链接数》的人还看了以下文章更多>>

CSS入门教程——链接(a)

标签： Web开发

链接(a) 对于很多追求页面美观的站长来说，默认的链接样式实在是太难以容忍了。而且它们也很难和网站的风格相吻合。不过有了CSS之后我们就不用担心了。下面就看看如何修改网页的链接样式。 1. 改变整个页面的链接样式。style type="text/css" a:link { color: #FF0000; text-decoration: none; } a:visited { c...

CSS长度单位优化方法

标签： Web开发

1. body选择器中声明Font-size=62.5%； 2. 将你的原来的px数值除以10，然后换上em作为单位；简单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象。因为em的值不固定，又会继承父级元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你...

CSS教程：网页头部css代码优化实例

标签： Web开发

在div+css布局中，一般都这样来整体构架的： div id="header"/div div id="center"/div div id="footer"/div 而对于header部分，肯定要显示网站标题，除了显示网站标题外，还可能要显示其他比较重要的对象，比如网站的导航栏： div id="header" div id="title"这里是网站的标题/div div...

使用CSS Sprite的一些最佳实践

标签： Web开发

众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites将多个图片整合到一个图片中，然后再用CSS来定位。今天我们通过一个实例来学习CSS Sprites的使用方法。下面是一张样图：图片1 本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使...

网页图片整理术之CSS Sprite的应用

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

CSS Sprite 是一种图片的处理方式，它允许网页设计师将很多张图片合并在同一张图档中，然后根据 CSS 档中的文字描述将图档分区块加载，是现在很常见的网页图片处理方式。例如网页上一个的按钮的三种变化效果的图片，将其顺序摆放在同一个图档中使用：而这张是 Facebook 页面上所使用的小图标图档，像是大家最常看到的 Like 图标其实也只...

查看更多精彩>>