返回 科技论文 首页
CSS Sprites提升网页加载速度的应用研究

  摘要:在使用相同图片数量的网页中,与传统多张图片加载的方法相比,利用CSS多张图像拼合技术,可以减少浏览器对服务端的请求次数,从而有效的提升网页加载速度。对HTTP工作过程进行分析,使用实验和比较的方法,分析得出网页加载速度与HTTP请求次数之间的关系。结合CSS Sprites原理和实现过程,比较CSS Sprites的优缺点,呈现出CSS Sprites在网页应用中出色的性能和广阔的应用前景。
  关键词:CSS Sprite;HTTP;图像拼合;网页加载
  中图分类号:TP311.1文献标识码:A文章编号:1009-3044(2011)27-6668-03
  Improvement of Webpage Loading Speed by CSS Sprites
  QIN Qiu-mi, WEI Yong-jun, JIANG Jia-bin
  (Liuzhou Railway Vocational Technical College, Liuzhou 545007, China)
  Abstract: Using the same number of pages in the picture, multiple pictures with the traditional loading methods, multiple images put together using CSS technology can reduce the service side of the browser on the number of requests, so as to effectively enhance the page loading speed. Work process analysis for HTTP, use experimental and comparative methods to analyze the obtained web page loading speed and the relationship between the number of HTTP requests. CSS Sprites with the principle and implementation process, compare the advantages and disadvantages CSS Sprites, showing CSS Sprites in web application performance and broad application prospects.
  Key words: CSS Sprite; HTTP; image mosaic; webpage loading
  浏览网页时,浏览器状态栏的进度条反映网页加载的速度,在该等待过程中客户端向Web服务器发送HTTP请求,HTTP请求的次数与网页中图片数量密切相关,即每加载一张图片都会产生一个HTTP请求。因此,减少HTTP的请求次数,可以提升网页加载的速度,减少HTTP的请求次数关键是减少网页图片数量。在不影响网页效果的情况下,把多张图片拼合成一张图片,分别控制图片的显示和遮挡部分,当网页加载时一次加载整个组合图片,减少了HTTP请求的次数,从而加快页面加载速度,这就是CSS Sprites技术所在。本文通过分析HTTP的工作过程、剖析CSS Sprites的原理等说明了CSS Sprites能够提升网页加载速度。
  1 HTTP工作过程
  网页是Internet上展示信息最常用的方式,网页的内容由图片、文本、多媒体信息等组成,图片作为网页美观和布局的重要元素,使用率非常高。网页浏览使用HTTP(Hypenext Transfer Protocol)超文本传输协议,它是专门为Web设计的一种网络协议,在TCP/IP体系结构中属于应用层协议,它定义了Web的通信交换机制、请求及响应消息的格式等,HTTP工作过程如图1所示。
  首先,客户端根据某资源的URL向WEB服务器提出请求,WEB服务器的HTTP Daemon(守护进程)将此请求的参数通过标准输入stdin和环境变量(Environment Variable)传递给指定的处理程序,并启动此应用程序进行处理,处理结果通过标准输出stdout返回给HTTP Daemon进程,再由HTTP Daemon进程返回给客户端,由浏览器负责解释执行,将最终结果显示在用户面前。以上只是一次HTTP请求的过程,实际浏览网页时,会发生多次HTTP请求,比如网页中的每1张图片都会发生一次HTTP GET请求,如图2的IIS日志所示。
  由图2发现,显示每张图片都产生一个HTTP GET请求,每发次一次HTTP请求都会执行一次如图1所示的流程,花费较大的时间在HTTP请求的过程,且等待的时候与图片数量成正比,因此,减少HTTP的请求是有效提高网页加载速度的有效方法。
  CSS Sprites(CSS图像拼合技术)是将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到界面上,网页是使用CSS(Cascading Style Sheet:层叠样式表)定义背景属性,来控制图片的显示位置和方式。当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片,它大大减少了HTTP请求的次数,从而加快页面加载速度,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。
  2 CSS Sprites原理
  其基本思路是通过CSS属性background-image(背景图片路径)组合background-repeat(背景重复选项),background-position(背景位置)等来实现,通过调整background-position的X和Y坐标的数值,背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变,由于图片位置的改变,在容器中显示该显示的部分,容器之外的图片区域被遮挡,网页中的容器一般是用DIV标记来实现。根据CSS规范,background-position属性包含了两个(可选的)变量:水平位置(horizontal)和垂直位置(vertical),语法如下:
  .classname{
  background-image: url(bg.gif);
  background-position: [horizontal position] [vertical position];
  }
  使用这个属性,可以定义块级元素的背景图像位置,可以使用%百分比或px像素为单位来定义图像开始的位置,也可以使用关键字:top,left, center, right, bottom。在“ background-position: x% y%;”这样一个语句中,x%指水平偏移,y%指垂直偏移,左上角是:0%,0%,右下角是:100%,100%,默认的是50%。
  如图3background-position坐标所示,图像的左上角为原点,X轴向右是负坐标,Y轴向下是负坐标,图像Image由A,B,C三张图拼合而成,分辨率为200×150像素。在默认情况下,Image是原点在左上角、自动水平和垂直重复。① 显示A图像,容器应该为A的区域大小100×50像素,position为0 0,因为A的原点与Image的原点重合,都为0;② 显示B图像,容器为25×50像素,position为-25px -75px,即Image从该点开始显示,且B图像与容器大小相同,能完整显示B图像,而Image的其它区域被遮挡。因为B图像的底与Image的底重合,因此该处也可写成position:-25px bottom。应用CSS Sprites需要注意三问题:
  1) 正坐标问题
  如设置position为25px 50px,表示Image的原点X轴向右移动25像素,Y轴向上移动了50像素,在容器中显示的时,Image的左边和上边分别留空了25像素和50像素。
  2) 重复边缘问题
  例如设置容器的大小为175×75像素,background-repeat为默认开启填充背景,position为-125px -25px,那么Image又是如何填充容器?首先把Image的原点定位到Image中C图像的左上角,用C图像开始填充容器,从C图像直到Image的右边缘只有75像素,容器宽175-75=100像素,从Iamge图像左上(注意不是从-125px -25px)开始继续填充直至充满整个容器;如果background-repeat为repeat-x水平填充,则从Image的0 -25px(垂直方向下移25个像素);background-repeat为repeat-y垂直填充,则从Image的-75px 0px(水平方向右移75个像素)。
  3) 超出图像问题
  position值大于图像分辨率时使用空白填充。用一句话来概括position定位:负坐标向右下移动原点,正坐标向左上移动原点。
  3 CSS Sprites应用
  CSS导航是一种常见的技术,为了给用户良好的体验,在大多数网站的导航都有图片和文字相结合,一个有9个栏目的导航要9张图片,缺点是网速较慢时加载有轻微延迟。把这些图像拼合到单个Sprite文件,这个有效解决这个问题。
  1) 拼合图像
  打开Photoshop或Fireworks图像设计软件,新建空白透明画布,把准备拼合的每个图像放到画布中,并且图与图之间用合适的空白间隔,如图4所示,保存图像时选择GIF或PNG格式保存图像,这两种格式均支持画布背景透明,便于网页布局。实践证明,存储相同的拼合图像时,在Fireworks中比Photoshop占用空间还要小。
  2) 网页布局
  使用ul标签来布局导航的主要HTML如下:
  


  span标签作为显示背景图像的容器,对于每一个导航按钮所显示的图像则用样式类(nv1,nv2,…,nv9)来控制。
  3) CSS给背景定位
  定义nv1的CSS样式如下:
  .nv1{
  background-image: url(sprites.gif);
  background-position:-23px -14px;
  }
  可简写成:
  .nv1{ background:url (sprites.gif) -23px -14px;}
  注意单位px不能缺少,否则定位无效。position 的值可在图像设计软件中测量得到,其它的样式只需要改变相应的position位置即可。更简洁的方法是使用JQuery遍历添加样式。其它样式nv2,nv3,……,nv9相应把position坐标改变即可。把网页保存后,发布到IIS站点,浏览网页后观察IIS日志,只有一条HTTP请求sprites.gif图像的日志。再测试分别把每个图像单独应导航上的网页,有9条HTTP请求图像的日志。两种方式的比较如图4所示,并且拼合的图像占用的存储空间也较小。使用Windows性能计数器监视CPU占用情况实时分布如图5所示,使用CSS Sprite拼合图片的页面主要是在第一次加载图片时CPU开销较大,再次使用时从缓存中读取,CPU开销逐步减少。单独图片的页面,每遇到图片都必须向服务器请求、加载,CPU开销和加载图片的大小成正比关系。比较得出使用CSS Sprites能较好的提升网页的性能。
  4 CSS Sprites分析
  目前一些大型门户网站已经使用了CSS Sprites技术,最著名的例子莫过于谷歌网下方的那几个动画;苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果;网易邮箱的切换按钮的CSS Sprites效果等。利用CSS Sprites能很好地减少了网页的HTTP请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;CSS Sprites除了减轻服务器器的负担,还能较快捷实现一些客户端动态效果,但它存的一些问题也不能忽视。
  4.1 CSS Sprite的缺点
  1) 降低图片的可维护性。页面背景有少许改动,一般就要改动整张合并的图片,如果改动到原布局的图片,还必须改动相应的css样式;如果在原位置容纳不放图片,就得往下加图像,这样图片的字节就增加了,每次的图片改动都得往这个图片删除或添加内容,重新算图片的位置,都显得比较繁琐。
  2) 减少图片的灵活性。由于图片的位置需要固定为某个绝对数值,这就失去了诸如center定位之类的灵活性。
  3) 图片溢出问题。容器必须定义了宽度和高度,否则图片可能溢出或者显示不全;在宽屏的高分辨率的屏幕下的自适应的页面,如果图片不够宽,很容易出现背景断裂。
  4.2 图片拼合注意的问题
  1) CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位,这样能减少维护带来的不必要麻烦;
  2) 为每张图片留出足够空隙:预留足够的空白,在容器大小发生变化时,可以避免其他的图片显示出来;
  3) CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数,因为少色数的图片文件体积会相对的小;
  4) 在size相同的CSS Sprites图片中,垂直排列的图片会比水平排列的文件体积要大;
  5) 在CSS Sprites图片中,水平排列的图片会比垂直排列的文件体积要大;
  6) 图片对等合并:应用CSS Sprites图片时,适当地把对等相同的图像合并,以节省空间及减少体积;
  7) 区分开不需要合并的图像:如当前用户确定只显示一种状态或一个级别时,不必要把其他的级别或状态的图片合并;
  8) 黄金切割位:在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon,因此不会受到其它CSS Sprites图片干预,也不需要预留一定的行宽。
  5 结论
  通过以上分析得出,使用CSS Sprites把图片拼合之后,可以减少客户端向WEB服务器的HTTP请求数,从页提升网页加载的速度,提高的网页的性能。虽然CSS Sprites也带来不便于维护的问题,但是在性能的优先的情况下,这些都是可以克服的,特别当前互联网的连接速度没有质的提高之前,CSS Sprites更体现了它的高性能和广阔的应用前景。
  参考文献:
  [1] 陆凌牛.HTML5与CSS3权威指南[M].北京:机械工业出版社,2011:365-371.
  [2] 曾顺.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2008:107-110.
  [3] 李烨.别具光芒DIV+CSS网页布局与美化[M].北京:人民邮电出版社,2008:52-55.


【相关论文推荐】
  • CSS Sprites网页背景定位技术的研究及应用
  • CSS技术的网页设计应用研究
  • CSS Sprites在Web开发中的应用
  • 解析CSS在网页中的应用
  • 浅释CSS HACK的用法
  • 基于CSS Sprites网页选项卡的设计与实现
  • 基于CSS页面布局的网页设计
  • 基于CSS Sprites的可伸缩圆角矩形的设计
  • CSS盒子模型在网页布局中的应用研究