zoukankan      html  css  js  c++  java
  • 01. css sprite是什么,有什么优缺点?

    1.css sprite是什么,有什么优缺点?
    通常被意译为“CSS图像拼合”或“CSS贴图定位”
    1)CSS Sprites的优点
    • 利用CSS Sprites能很好地减少网页的http请求,从而大大提高了页面的性能,这也是CSS Sprites最大的优点;
    • CSS Sprites能减少图片的字节,曾经多次比较过,把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
    2)CSS Sprites的缺点
    • 在图片合并时,要把多张图片有序的、合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面,如果背景不够宽,很容易出现背景断裂;
    • CSSSprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用RIA开发了一个CSS Sprites样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!  
    • CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的CSS,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动CSS。
    说白了,CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景 图片的位置。
    当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个 了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。
     

  • 相关阅读:
    POJ 2750 Potted Flower (单点改动求线段树上最大子序列和)
    [异能程序猿]第四章 偶遇(第四更)
    【web开发学习笔记】Struts-Tags学习笔记1
    UVa 10100
    【算法拾遗】大数相加(不开辟额外空间)
    cocos2d-html5学习笔记(六)--alpha2中cc.Sequence.create中的bug
    大一暑假和大二专业学习的规划
    Android如何获得系统版本
    Struts2——(1)Struts2入门
    设置m_pszAppName值的做法
  • 原文地址:https://www.cnblogs.com/Lolita-web/p/10457680.html
Copyright © 2011-2022 走看看