• 端午小长假 宜春接游270.6万人次 旅游综合收入12.73亿元 2019-04-20
  • [微笑]责权利平滑对接…… 2019-04-04
  • 中国预计投资1.5万亿相关新闻 2019-04-02
  • 北京东城区食药监局夜查簋街小龙虾 2019-04-02
  • 网络促销不得先涨价后打折 2019-03-29
  • 除了整容和绯闻,BY2还要踢馆创造101? 2019-03-28
  • 北京:非京牌车要管起来 2019-03-28
  • 四两等可来看看[微笑] 2019-03-27
  • 听!春蝉大合唱:“想啊想啊” 2019-03-27
  • 北斗星基导航“中国精度”运营三周年用户超5万 2019-03-25
  • 高压水清洗、酒精消毒 YouBike场站清洁有条不紊开展 2019-03-25
  • 近日六省份十名省委常委履新 其中一名女性 2019-03-24
  • 网约车陷阱多 谨防四类风险 2019-03-24
  • 事实告诉中国,与外界有限交流,是保障国民经济安全的不二法门。换句话说,必须独立自主、自力更生、艰苦奋斗、勤俭建国。那种疯狂消耗型需求经济不适合中国。 2019-03-20
  • 高考结束季壮游到新疆 三岁“京和号” 七大亮点新出发 2019-02-23
  • 四川省金7乐官网下载 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图

    四川金七乐开奖规则:高性能网站建设之减少Http连接数

    2010-09-05 来源:读书人 【读书人网(www.o28u.net):综合教育门户网站】
    关于CSS背景图合并工具,请大家参看随笔:Css背景图合并 工具功能增强(V0.1)
    在对大访问量网站进行性能优化时,其中有一点是尽量减少http连接数,道理很明了,减少了单个PV的http连接数, 肯定可以增加单台服务器的用户负载数。
    减少Http连接数的具体方法是减少没必要的iframe使用,合并js文件,css文件,和一种常见的方 法,合并Css小背景图,合并Css小背景图这一点已经有很多大网站都在做了,比如淘宝,百度贴吧,他们页面上看似有很多小的背景图片,而实际上这些图片 都被合并成了一张大图,然后用Css的Background-positioin属性控制显示背景图片的位置。这一点是很有效的,例如百度贴吧的一张背景 图如下

    点击在新窗口中浏览此图片

    大家可以看到, 百度的技术人员把n张小图合并到了一张图片上,而通过css控制在页面上单独显示每一个小图。这样每一个用户访问就相当于减少了n-1个http连接数, 这对于访问量大的网站来说,吞吐量的提升是显而易见的。
    具体的Css是这样的,以下面的页面显示的红框部分为例,和上面的大图对比,我们可以看到 下面显示的小图片其实就是上面大背景图的倒数第4个图片,具体的css代码如下(可以通过firefox安装firebug插件或者通过个google浏 览器查看元素的css)


    background-image: url(//tieba.baidu.com/tb/cms/img/index/sprites.png);
    background-repeat: no-repeat;
    background-position-x: 7px;
    background-position-y: -253px;


    其关键代码在于background-position-y,这里是负值,表示背景图的左上角的纵坐 标值x减去背景开始显示的位置的纵坐标。
    这个优化方式很好,但是做起来却比较费事,做出小图后需要把小图整合到一张大图上,然后再调整css中的 背景位置。鉴于此,我做了一个生成工具---Css背景图合并工具,可以帮助大家完成整合小图,并生成对应css和html测试文档的工作,如下截屏:
    可以调整小图横排还是纵排,选中下图可以生成该小图所在位置的css,css可以根据需要自己调整。
    最后可以生成测试文件,测试文件中包括整合 后的大图,这些小图对应的所有css,和Html测试文件,如下生成的html文件截屏。

    点击在新窗口中浏览此图片

    四川省金7乐官网下载 www.o28u.net
     

     

    附最新的源文件,可执行文件?;队蠹沂褂?,反馈。(使用此工具需要安装微软的dot net framework 2.0)

     

    希望此工具可以给大家带去方便。

    ------------------------------------------------------------
    非常感谢,各位的支持,根据大家的反馈,新版本做了一些增强: 
    1. 添加了用鼠标拖动图片或者用方向键改变图片位置的功能 
    2. 可以设置整幅大图的生成类型,因为png文件在ie6下透明色显示有问题,所以朋友提出这个问题 
    3. 可以设定大图的背景色,默认为透明色 
    4. 可以在选中图片之后用“+”按钮添加更多的图片 
    5. 可以在选中图片之后,用“-”按钮移除图片,或者直接用Delete键移除选中图片 
    添加了工具图标

  • 端午小长假 宜春接游270.6万人次 旅游综合收入12.73亿元 2019-04-20
  • [微笑]责权利平滑对接…… 2019-04-04
  • 中国预计投资1.5万亿相关新闻 2019-04-02
  • 北京东城区食药监局夜查簋街小龙虾 2019-04-02
  • 网络促销不得先涨价后打折 2019-03-29
  • 除了整容和绯闻,BY2还要踢馆创造101? 2019-03-28
  • 北京:非京牌车要管起来 2019-03-28
  • 四两等可来看看[微笑] 2019-03-27
  • 听!春蝉大合唱:“想啊想啊” 2019-03-27
  • 北斗星基导航“中国精度”运营三周年用户超5万 2019-03-25
  • 高压水清洗、酒精消毒 YouBike场站清洁有条不紊开展 2019-03-25
  • 近日六省份十名省委常委履新 其中一名女性 2019-03-24
  • 网约车陷阱多 谨防四类风险 2019-03-24
  • 事实告诉中国,与外界有限交流,是保障国民经济安全的不二法门。换句话说,必须独立自主、自力更生、艰苦奋斗、勤俭建国。那种疯狂消耗型需求经济不适合中国。 2019-03-20
  • 高考结束季壮游到新疆 三岁“京和号” 七大亮点新出发 2019-02-23
  • 加拿大快乐8开奖官网 董少爷和白小姐 360比分直播 竞彩足球混合过关结果查询 北京单场6串1奖金计算 北京pk10开奖 彩票投注截止时间 群英会开奖结果查看 刮刮乐有技巧吗 福利彩票开奖号码 体彩6+1第18127期 香港六合彩白小姐 新时时彩历史号码 15选5开奖结果查询 混合过关投注技巧 足球队