高性能网站建设之减少Http连接数
来源:互联网 发布:淘宝发布商品后 编辑:程序博客网 时间:2024/05/01 17:40
减少Http连接数的具体方法是减少没必要的iframe使用,合并js文件,css文件,和一种常见的方法,合并Css小背景图,合并Css小背景图这一点已经有很多大网站都在做了,比如淘宝,百度贴吧,他们页面上看似有很多小的背景图片,而实际上这些图片都被合并成了一张大图,然后用Css的 Background-positioin属性控制显示背景图片的位置。这一点是很有效的,例如百度贴吧的一张背景图如下
大家可以看到,百度的技术人员把n张小图合并到了一张图片上,而通过css控制在页面上单独显示每一个小图。这样每一个用户访问就相当于减少了n-1个http连接数,这对于访问量大的网站来说,吞吐量的提升是显而易见的。
具体的Css是这样的,以下面的页面显示的红框部分为例,和上面的大图对比,我们可以看到下面显示的小图片其实就是上面大背景图的倒数第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测试文档的工作,如下截屏:
可以调整小图横排还是纵排,选中下图可以生成该小图所在位置的css,css可以根据需要自己调整。
最后可以生成测试文件,测试文件中包括整合后的大图,这些小图对应的所有css,和Html测试文件,如下生成的html文件截屏。
附最新的源文件,可执行文件。欢迎大家使用,反馈。(使用此工具需要安装微软的dot net framework 2.0)
希望此工具可以给大家带去方便。
1. 添加了用鼠标拖动图片或者用方向键改变图片位置的功能
2. 可以设置整幅大图的生成类型,因为png文件在ie6下透明色显示有问题,所以朋友提出这个问题
3. 可以设定大图的背景色,默认为透明色
4. 可以在选中图片之后用“+”按钮添加更多的图片
5. 可以在选中图片之后,用“-”按钮移除图片,或者直接用Delete键移除选中图片
添加了工具图标
- 高性能网站建设之减少Http连接数
- 高性能网站建设之减少Http连接数
- 高性能网站建设之减少Http连接数
- 高性能网站建设之减少Http连接数
- 高性能网站法则--减少HTTP请求数
- 网站减少Http连接数
- 《高性能网站建设指南-前端工程师技能精髓》-读书笔记1(减少 HTTP 请求 )
- 《高性能网站建设指南》阅读笔记_规则1-减少HTTP请求
- 如何减少网站的http连接数
- 高性能网站建设之PageSpeed
- CSS Sprites---减少HTTP请求次数 构建高性能网站
- 性能之巅:《高性能网站建设指南》读书笔记
- 《高性能网站建设指南》阅读笔记_规则9- 减少DNS查找
- 高性能WEB开发之如何减少请求数
- 高性能网站建设指南
- 高性能网站建设法则
- 高性能网站建设指南
- 高性能网站建设指南
- 跑跑卡丁车
- CSS hack:区分IE6,IE7,firefox
- HDU 1908 Double Queue
- Spring 3 MVC 学习资料
- 遍历Map
- 高性能网站建设之减少Http连接数
- 目前访问网站的用户过多 HTTP 错误 403.9 - 禁止访问:连接的用户过多 解决办法
- 二叉树的遍历
- 游戏外挂设计技术探讨
- 进制转化
- CSharp编码的好习惯
- 现实与程序
- Ajax开发中使用框架的作用
- 日记090813