使用图片精灵优化前端减少http请求

所谓的图片精灵（CSS sprite）其实就是把几张图拼成一张图而已。它提供了一种把很多小图片拼成一张大一些的图片从而在低并发的浏览器上达到快速传输并呈现内容的目的。

大多数网站会做跨页面的图片精灵。就是把整个网站所有共用的小图片都合成一张图（图片精灵），这是一种有效减少HTTP 请求的办法。在用到这些图片的时候，你就引用整张图片然后设定坐标到你需要的那张小图上。所以你可以把要用到图标、标志、按钮等一些公共的图片集中到一张图上，然后整个网站都可以使用它。

还有一种有趣的方法可更进一步提升性能，就是把图片精灵根据颜色分组，分成多个文件。每一个精灵只有一种颜色范围，这样可以让每一个图片精灵文件变得更小。这种方法对于在颜色上有一定要求的公司会特别有效。比如你的公司的 Logo是红色和灰色的，那么公司的市场人员就可能用这两种颜色为菜单或其他功能做一大批图片。在这种情况下，你把图片精灵限制在只有红色和灰色的范围内，会使文件体积明显减小。

如果有你大量的小图片，即使不按颜色范围去区分它们，也需要依照某种法则去合成多张图片精灵，而不是一个。还有一种可能，就是这些图片是被多个团队所维护的，比如一个团队负责头部导航，另一个团队负责logo ，这样的话最好也分成不同的图片精灵。

当我们正在写此章的时候，我们的技术评审Jeff Johnson 提出了这样的一个问题：一张图片精灵多大的时候就应该被分割开了？这个问题非常好，有一个观点认为一个大的文件总是会比两个小一些的文件带来更多的问题。但是这个观点成立与否要看很多其他的因素，比如整个页面加载完成所需的 HTTP 请求数，是否用了 CDN加速甚至还要看是哪种浏览器。所以我不能很武断地给一个答案。我只能告诉你，无论是你认为把大的图片精灵分成小的会加速页面加载，还是把小的文件合成大的会提升页面加载速度，都需要实验，做一些实验记录数据，不断地尝试。互联网开发中有其他太多的因素，并没有哪一个方法是绝对最好的。一定要通过实验来找到答案。

从我的经验来讲，减少HTTP 请求是这几个准则中最有效的一个。所以，如果可以，把那些常用的图片合并成几张图片。理想情况是合并成一张图片，然后用位移去显示正确的部分。图3-3 是一张来自谷歌的图片精灵。

要使用这张图片，先做一个div 元素，然后用CSS 样式来指定我们想要显示的图标。

清单3-1 是这个 div 元素的代码。

清单3-1：示例div元素
<div class="arrowPrev"></div>

清单3-2 是CSS 的详细代码。

清单3-2：图片精灵的CSS代码
. arrowPrev
{
width: 22px;
height: 25px;
background-image: url(googlesprite.png);
background-position: -6px -13px;
background-repeat: no-repeat;
}

以上的CSS 规定了这个容器的宽和高，还有背景图片的起始位置坐标。它同时还规定了背景图是不可重复的。

最终得到一个向前的箭头，如图3-4 所示。

图片精灵的另一个好处就是虽然你只用其中的一个小图标但整个图片都被保存到了缓存中。这样每次使用就不需要再去请求图片，很多HTTP 请求就被节省下来了。拿谷歌这个例子来说，这张精灵图片中有60个小图，那就节省了60次HTTP 请求，这绝对是一个可观的性能提升。

使用图片精灵优化前端减少http请求相关推荐

高并发大流量专题---3、前端优化（减少HTTP请求次数）
高并发大流量专题---3.前端优化(减少HTTP请求次数) 一.总结一句话总结: 图片地图:使用<map><area></area></map>标签. ...
Web项目性能优化之减少HTTP请求次数优化
作为项目经理的我,在近两个月内,时常被客户抱怨,我们的Web程序性能太差,经常宕机,即使服务器的配置再好,在业务请求量大的情况下也比较容易出现系统繁忙,线程堵塞,最后Web容器的HTTP线程池被慢慢耗 ...
优化--减少HTTP请求
一. 图片地图 (将几张图片合为一张,根据用户点击的位置发送不同请求,减少了图片的请求数量) 案例所在位置:http://stevesouders.com/hpws/imagemap.php 二.cs ...
输入框实时搜索优化，减少请求次数、取消无用请求
背景用户在输入框输入内容的同时进行搜索,针对搜索实时搜索结果进行展示问题如果不做处理,只监听输入框的input事件或者键盘按下弹起事件,实时对文本内容进行搜索,往往因为网络波动问题可能会造成结果 ...
减少HTTP请求之合并图片详解（大型网站优化技术）
一.相关知识讲解看过雅虎的前端优化35条建议,都知道优化前端是有多么重要.页面的加载速度直接影响到用户的体验.80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样 ...
前端性能优化-减少HTTP请求数
1.图片地图图片地图允许在一个图片上关联多个URL,目标URL取决于用户单击的图片上的位置. 1) 优点: 把多张图片整合到一张图片中,虽然文件的总体大小不变,但可以减少HTTP请求数. 2) 使用 ...
web前端图片极限优化策略
随着web的发展,网站资源的流量也变得越来越大.据统计,60%的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力. 一.现有web图片格式我们先来看下现在常用 ...
前端静态资源请求和加载优化总结
如果有这样一个项目,js脚本数量100+,其中50个是各种框架或库,css数量20+,图片若干 .那么,不用说,这个页面加载起来,一定快不了. 静态资源的请求和加载速度,直接影响页面呈现,应该怎么优化 ...
前端性能优化之——浏览器http请求并发
一.什么是http请求并发随着现在的网页设计的越来越炫酷,功能越来复杂.伴随着的是网页加载的资源越来越多,常常一个页面加载的CSS.JS.图片.接口等超过几十上百个. 但其实,在客户端,浏览器并不一 ...

使用图片精灵优化前端减少http请求

使用图片精灵优化前端减少http请求相关推荐

最新文章

热门文章

使用图片精灵优化前端 减少http请求

使用图片精灵优化前端 减少http请求相关推荐

最新文章

热门文章

使用图片精灵优化前端减少http请求

使用图片精灵优化前端减少http请求相关推荐