《高性能网站建设指南》减少http请求数

二 1st, 2012

   减少http请求数,其中最常见的一种方式就是减少页面请求的图片数。所以下面归纳了3种合并图片的方法:

a. 图片地图(Image map)

   图片链接,如导航栏或按钮中。图片地图允许你在一张图片上关联多个URL,目标URL的选择取决于用户点击图片上的哪个位置。

   通过使用HTML中的MAP标签实现。在定义图片的区域坐标时,如果采用手工方式则很难完成,而且除了矩形外无法定义其他的形状。

    通过DHTML创建的图片地图则在IE中无法工作。

b . CSS Sprites

    和图片地图一样,也用于合并图片,但更为灵活。使用CSS Sprites,需要将多个图片合并到一个图片中。

    如:http://www.baidu.com/img/bg-1.0.0.gif

bg-1.0.0

伪代码:

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat} 

引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 .. 

#ico1 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标} 
#ico2 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标} 
#ico3 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标} 
.nav {width:容器大小;height:容器高度;background-position:X坐标 Y坐标} 

必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚 

缺点:

   1. CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,但现在可以利用CSS Sprites 样式生成工具直接生成.

Image

   2. CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片.

CSS Sprites非常值得学习和应用,特别是页面有一堆ico(图标)。但很多时候大家也要权衡一下利弊,再决定是不是应用CSS Sprites。

c. 内联图片

图片内联就是把图片数据使用data属性,在网页中包含图片,不再通过http去请求服务器获得图片,IE目前不支持该方式。但对于其他浏览器可以使用。

data:[<mediatype>][;base64],<data>

    .home{backgroup-image: url(data:image/gif;base64,RORO1HHJKJKHFSKALK…….);}

   当然图片是需要转换为base64位编码的!





除非注明,本站文章均为原创。本文基于 BY-NC-SA 协议进行授权,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 metaboy(包含链接).

本文链接地址: http://blog.wangyuxiong.com/archives/51544

订阅本站:http://www.wangyuxiong.com/feed

分类: 测试技术         标签: ,
目前还没有任何评论.

无觅相关文章插件,快速提升流量