<ruby id="t351n"><dfn id="t351n"></dfn></ruby>

              <form id="t351n"></form>

              <form id="t351n"></form>

                  首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
                  当前位置: 首页 > 教程频道 > 网站开发 > SEO优化 >

                  高性能网站建设之减少Http连接数

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

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

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


                  background-image: url(http://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测试文档的工作如下截屏
                  可以调整小图横排还是纵排选中下图可以生成该小图所在位置的csscss可以根据需要自己调整
                  最后可以生成测试文件测试文件中包括整合 后的大图这些小图对应的所有css和Html测试文件如下生成的html文件截屏

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


                   

                   

                  附最新的源文件可执行文件欢迎大家使用反馈(使用此工具需要安装微软的dot net framework 2.0)

                   

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

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

                  11ѡ5Ͷע

                        <ruby id="t351n"><dfn id="t351n"></dfn></ruby>

                              <form id="t351n"></form>

                              <form id="t351n"></form>

                                        <ruby id="t351n"><dfn id="t351n"></dfn></ruby>

                                              <form id="t351n"></form>

                                              <form id="t351n"></form>