移动Web实战篇-使用CSS Sprites减少你的页面http请求

IT实战联盟博客：http://blog.100boot.cn

####概述

互联网行业里，智能手机越来越大众化，移动端使用用户占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域，那么用户新打开一个网页80%的时间耗费在加载网页内容方面。很多炫酷的网页往往通过图片来展现给用户的，那么页面每加载一张图片就是一个http请求，如果图片过多会严重影响图片渲染速度。本文介绍通过CSS Sprites来处理网页图片加载请求问题。
CSS Sprites：也叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

####简介
加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

####原理

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

####CSS Sprites小实例
#####home.html

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/htm"; charset="utf-8" /><title>CSS Sprites小实例</title><style type="text/css">*{margin: 0px; padding: 0px;}#mainbody{position: relative;width: 100px;height: 150px;border: solid 2px #fff;padding: 2px;}ul{list-style: none;}li{display: block;height: 25px;line-height: 25px;overflow: hidden;margin: 5px;border-bottom: 3px solid #dedede}h3{font-weight: 100;font-size: 14px;text-indent: 10px;}li i{background: url(test.png) no-repeat;display: inline;width: 25px;height: 25px;float: left;}.sp-1 i{background-position: 0px 0px;}.sp-2 i{background-position: -26px 0px;}.sp-3 i{background-position: -26px -27px;}.sp-4 i{background-position: 0px -27px;}</style>
</head>
<body>
<div id="mainbody"><ul><li class="sp-1"><i></i>         <h3>首页</h3></li><li class="sp-2"><i></i>         <h3>空间</h3></li><li class="sp-3"><i></i>         <h3>网络</h3></li><li class="sp-4"><i></i>         <h3>其他</h3></li></ul>
</div>
</body>
</html>

#####test.png

#####演示结果

####CSS Sprites优点
1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

####CSS Sprites缺点

诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点，如下：

1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

2.CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！

3.CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

4.CSS Sprites非常值得学习和应用，特别是页面有一堆icon（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。

更多精彩内容请关注“IT实战联盟”公众号哦~~~~
IT实战联盟博客：http://blog.100boot.cn

移动Web实战篇-使用CSS Sprites减少你的页面http请求相关推荐

“约见”面试官系列之常见面试题之第五十一篇之CSS Sprites（建议收藏）
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
跟安全技术大师学习黑客攻防技术 ——《黑客攻防技术宝典：web实战篇》
跟安全技术大师学习黑客攻防技术 --<黑客攻防技术宝典: web 实战篇> 随着网络技术的快速发展以及网络带宽的不断扩张, Web 应用程序几乎无处不在,渗透到社会的经济.文化.娱乐等各个 ...
《黑客攻防技术宝典Web实战篇@第2版》读书笔记1：了解Web应用程序
读书笔记第一部分对应原书的第一章,主要介绍了Web应用程序的发展,功能,安全状况. Web应用程序的发展历程早期的万维网仅由Web站点构成,只是包含静态文档的信息库,随后人们发明了Web浏览器用来检 ...
《黑客攻防技术宝典：Web实战篇》习题答案(一)
译者按:以下为<黑客攻防技术宝典:Web实战篇>一书第二版中的习题答案,特在此推出.如果读者发现任何问题,请与本人联系.英文答案请见:The Web Application Hacker' ...
《黑客攻防技术宝典Web实战篇》.Dafydd.Stuttard.第2版中文高清版pdf
下载地址:网盘下载内容简介编辑 <黑客攻防技术宝典(Web实战篇第2版)>从介绍当前Web应用程序安全概况开始,重点讨论渗透测试时使用的详细步骤和技巧,最后总结书中涵盖的主题.每章后还 ...
黑客攻防技术宝典web实战篇：核心防御机制习题
猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 黑客攻防技术宝典web实战篇是一本非常不错的书,它的著作人之一是burpsuite的作者,课后的习题值得关注 ...
使用CSS sprites减少HTTP请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...
黑客攻防技术宝典Web实战篇第2版—第3章 Web应用程序技术
3.1 HTTP 3.1.1 HTTP请求 1.所有HTTP消息(请求与响应)中都包含一个或几个单行显示的消息头,然后是一个空白行,最后是消息主体(可选). 2.每个HTTP请求的第一行由三部分组成 ...
黑客攻防技术宝典Web实战篇(第二版)_读书笔记（第一章~第三章）
//相关章节(第一章~第三章) 第一章 Web应用程序安全与风险 1.2.1 "本站点是安全的" 漏洞测试过程中出现频率(2007年~11年): 跨站点脚本(XSS)(94%) 跨 ...
黑客攻防技术宝典Web实战篇第2版—第8章攻击访问控制
8.1 常见漏洞 1.访问控制漏洞:应用程序允许攻击者执行某种攻击者没有资格执行的操作.各种漏之间的差异在于这个核心漏洞表现方式上的不同,以及检测他们所使用的技巧不同. 2.访问控制分类: ①垂直访问 ...

移动Web实战篇-使用CSS Sprites减少你的页面http请求

移动Web实战篇-使用CSS Sprites减少你的页面http请求相关推荐

最新文章

热门文章