图片,css,script,flash,等等这些都会增加http请求数,减少这些元素的数量能减少响应时间。CSS Sprites技术能减少图片的请求数,把零散的小图片放到一起,运用background-position来改变背景图片的位置,前提是html元素事先定义好宽高,其实就像一个遮罩,移动背景就会看到不同的景象。
1、内嵌图像
用data:URL scheme的方式把图片内容代码直接嵌入html代码中,这样会增大html代码的体积,改进的方式是把内嵌图片嵌入到css中(css被缓存),这样就会更好的减少http请求数而且不增大html的体积。
2、合并文件
合并文件就是把很多JS文件合并成1个文件,很多CSS文件合并成1个文件,这种方法应该很多人用到过,这里只推荐1个合并的工具:yuiCompressor 这个工具yahoo提供的。
3、合并图片
这是利用css sprite,通过控制背景图片的位置来显示不同的图片。
4、把JS、CSS合并到1个文件
上面第1种方法说的只是把几个JS文件合并成1个JS文件,几个CSS文件合并成1个CSS文件,那如何把CSS和JS都合并到1个文件中。
合并JS文件和CSS文件很多人都知道,也用过,目的是为了减少请求数。但有时候我们觉的把JS合并到1个文件,CSS又合并到另外1个文件也是浪费,我们如何能把CSS和JS一起合并进1个文件了?
这里需要使用1个常见的注释符<!-- 主要是利用css,js解析器对<!-- 进行不同的解析来实现JS和CSS合并的。
1. CSS解析器 会忽略<!--符号,
2. JS解析器会把<!--当作注释符号,与// 注释相同。
5、使用Image maps
Image maps 是把多个图片合并成1个图片,然后使用html中的<map>标签连接图片,并实现点击图片不同的区域执行不同的动作,image map在导航条中比较容易使用到。
6、data嵌入图片
这种方法把图片进行编码直接嵌入到html中进行使用,以减少HTTP请求,但这个会增加HTML页面的大小,而且这样嵌入的图片不能缓存。
7、把静态资源单独放一台静态服务器或CDN,另外也可以做下CSS / JS /IMAGES 合并,可以在firefox下用Yslow插件分析一下。
如果负载高:
1)可以统计一下每个动态程序的执行时间,时间长的程序优化下
2)页面上可能有太多动态操作功能,有些可以考虑做成异步
3)增加前端WEB SERVER,负载均衡分担请求
8、最简单的办法是使用长连接(Socket)或设置HTTP的Keep-Alive字段。特别对于图片密集型的应用,一定要做持久连接。频繁建立连接,很耗资源的。另外有可能是hacker在进行HTTP Flood攻击
要减少http请求数,应该从动静态分离、合并JS文件跟CSS文件、合并框架图片以及相对变动较少的图片成一张,通过CSS背景切割来完成渲染,比如:加速图片显示、合理使用本地Cache来缓存JS/CSS/IMAGE等方面入手,另外我补充几点:
1)压缩JS体积:删除JS中空白换行,注释,混淆把长变量换成短变量;
2)压缩CSS体积:删除CSS注释、写法尽量用简写;
补充说明:压缩、合并JS和CSS都由程序处理。而不是自己手动去缩删,不然不利于后期维护。
3)减少http请求头,图片js/css等静态资源放在静态服务器或CDN服时,尽量采用不用的域名,这样能防止cookie不会互相污染,减少每次请求的往返数据。
相信看了这些方法,大家对如何减少http请求数有了一定的了解了吧。