http请求头的数据量 
[声明] 转载  原文出处:http://www.blogjava.net/BearRui/。 谢谢
我们先分析下请求头,看看每次请求都带了那些额外的数据.下面是监控的google的请求头

Host www.google.com.hk 
User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 GTBDFff GTB7.0 
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language zh-cn,en-us;q=0.7,en;q=0.3 
Accept-Encoding gzip,deflate 
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Keep-Alive 115 
Proxy-Connection keep-alive

返回的response head

Date Sat, 17 Apr 2010 08:18:18 GMT 
Expires -1 
Cache-Control private, max-age=0 
Content-Type text/html; charset=UTF-8 
Set-Cookie PREF=ID=b94a24e8e90a0f50:NW=1:TM=1271492298:LM=1271492298:S=JH7CxsIx48Zoo8Nn; expires=Mon, 16-Apr-2012 08:18:18 GMT; path=/; domain=.google.com.hk NID=33=EJVyLQBv2CSgpXQTq8DLIT2JQ4aCAE9YKkU2x-h4hVw_ATrGx7njA69UUBMbzVHVnkAOe_jlGGzOoXhQACSFDP1i53C8hWjRTJd0vYtRNWhGYGv491mwbngkT6LCYbvg; expires=Sun, 17-Oct-2010 08:18:18 GMT; path=/; domain=.google.com.hk; HttpOnly 
Content-Encoding gzip 
Server gws

Content-Length 4344

这里发送的请求头的大小大概420 bytes,返回的请求头大概 600 bytes。

可见每次请求都会带上一些额外的信息进行传输(这次请求中还没有带cookie),当请求的资源很小,比如1个不到1k的图标,可能request带的数据比实际图标的数据量还大。

所以当请求越多的时候,在网络上传输的数据自然就多,传输速度自然就慢了。

其实request自带的数据量还是小问题,毕竟request能带的数据量还是有限的。

http连接的开销

相比request头部多余的数据,http连接的开销则更加严重。先看看从用户输入1个URL到下载内容到客户端需要经过哪些阶段:

1. 域名解析 
2. 开启TCP连接 
3. 发送请求 
4. 等待(主要包括网络延迟和服务器处理时间) 
5. 下载资源

可能很多人认为每次请求大部分时间都花在下载资源上,让我们看看blogjava资源下载瀑布图(每种颜色代表的阶段与上面5个阶段对应): 

看了上图你可能惊讶,花费在等待阶段的时间比实际下载的时间要多的多,上图告诉我们: 
1. 每次请求花费的大部分时间在其他阶段,而不是在下载资源阶段 
2. 再小的资源照样会花费很多时间在其他阶段,只是下载阶段会比较短(见上图的第6个资源,才284Byte)。

正对上面提到的2种情况,我们应该要怎么进行优化了?减少请求数来减少其他阶段的花销和网络中传输的数据。

如何减少请求数

1、合并文件 
合并文件就是把很多JS文件合并成1个文件,很多CSS文件合并成1个文件,这种方法应该很多人用到过,这里不做详细介绍, 
只推荐1个合并的工具:yuiCompressor 这个工具yahoo提供的。 http://developer.yahoo.com/yui/compressor/

2、合并图片 
这是利用css sprite,通过控制背景图片的位置来显示不同的图片。这种技术也是大家都用过的,不做详细介绍,推荐1个在线合并图片的网站:http://csssprites.com/

3、把JS、CSS合并到1个文件 
上面第1种方法说的只是把几个JS文件合并成1个JS文件,几个CSS文件合并成1个CSS文件,哪如何把CSS和JS都合并到1个文件中,见我的另1篇文章: 
http://www.blogjava.net/BearRui/archive/2010/04/18/combin_css_js.html

4、使用Image maps 
Image maps 是把多个图片合并成1个图片,然后使用html中的<map>标签连接图片,并实现点击图片不同的区域执行不同的动作,image map在导航条中比较容易使用到。 
image map的使用方法见: http://www.w3.org/TR/html401/struct/objects.html#h-13.6

5、data嵌入图片 
这种方法把图片进行编码直接嵌入到html中进行使用,以减少HTTP请求,但这个会增加HTML页面的大小,而且这样嵌入的图片不能缓存。见下面这个图片:

上面的图片就是把图片进行base64编码后使用data:嵌入到html中,代码如下(后面的省略了,大家可以查看源代码看): 
<IMG SRC="data:image/gif;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAWRXhpZgAASUkqAAgAA......">

以上几种方法在都有利有弊,在不同情况下可以选择不同的使用方式,比如使用data嵌入图片虽然减少了请求数,但会增加页面大小。

所以微软的bing搜索在用户第一次访问的时候使用data嵌入图片,然后后台懒加载真真的图片,以后访问就直接使用缓存的图片,而不使用data。

高性能WEB开发 为什么要减少请求数,如何减少请求数!的更多相关文章

  1. 高性能WEB开发(11) - flush让页面分块,逐步呈现

    高性能WEB开发(11) - flush让页面分块,逐步呈现 在处理比較耗时的请求的时候,我们总希望先让用户先看到部分内容,让用户知道系统正在进行处理,而不是无响应.一般大家在处理这样的情况,都使用a ...

  2. 高性能WEB开发:重排与重绘

    DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件——HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构——DOM树和渲染树. D ...

  3. 高性能Web开发系列

    1. 高性能WEB开发基础 http://www.uml.org.cn/net/201404225.asp 2. 高性能WEB开发进阶(上) http://www.uml.org.cn/net/201 ...

  4. 高性能WEB开发(6) - web性能測试工具推荐

    WEB性能測试工具主要分为三种.一种是測试页面资源载入速度的,一种是測试页面载入完成后页面呈现.JS操作速度的,另一种是整体上对页面进行评价分析,以下分别对这些工具进行介绍,假设谁有更好的工具也请一起 ...

  5. 高性能WEB开发:深入理解页面呈现、重绘、回流

    在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...

  6. 高性能WEB开发:Javascript自身执行效率

    Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入 我们在编码过程中多多少少会使用到一些全局变 ...

  7. 高性能web开发:如何加载js,,js的存放位置

    外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容. 有人会问:为什么JS不能像 ...

  8. 基于hi-nginx的web开发(python篇)——动态路由和请求方法

    hi.py的提供的路由装饰器接受两个参数,第一个参数指定动态路由的正则模式,第二个参数指定同意的http请求方法列表. 比如: @app.route(r"^/client/?$", ...

  9. 高性能WEB开发:DOM编程

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和Javascript(这里指ECMscript)各自想象为一个岛屿,它们之间用 ...

随机推荐

  1. __m128i的理解[转]

    __m128i被称为128bits的整数,当我们对其赋值时,调用 __m128i _mm_set1_epi32(int i) Sets the four signed 32-bit integer v ...

  2. 镜像树(dfs)

    1214: J.镜像树 时间限制: 1 Sec  内存限制: 64 MB提交: 18  解决: 7 标签提交统计讨论版 题目描述 一棵二叉树,若其与自己的镜像完全相同,就称其为镜像树(即这棵二叉树关于 ...

  3. [分享]我的LABVIEW快速开发串口测试软件实例

    LABVIEW是美国国家仪器公司(National Instruments,简称NI)的创新产品,它允许编程人员使用图形方式来进行编程,摒弃了艰涩难懂的代码,只需要拖动相应图形控件然后连线,进行简单的 ...

  4. linux mysql 优化

    第一 在 /etc/my.cnf 中加入 skip-name-resolve ,重启mysql,这样就能禁用DNS解析,连接速度会快很多.不过,这样的话就不能在MySQL的授权表中使用主机名了而只能用 ...

  5. WinForm 鼠标进入移开窗体事件,因子控件导致的误触发

    /// <summary> /// 重写OnControlAdded方法,为每个子控件添加MouseLeave事件 /// </summary> /// <param n ...

  6. 如何清空android ListView控件的内容

    第一种方法: listView.setAdapter(null); 第二种方法: listAdapter.clear(); listAdapter.notifyDataSetChanged() ; 满 ...

  7. Windows下安装使用curl命令

    1 进入http://curl.haxx.se/download/?C=M;O=D网站 2 根据自己的操作系统位数和是否需要SSL下载相应的版本.这里下载curl-7.33.0-win64-ssl-s ...

  8. 【剑指offer】面试题25:二叉树中和为某一值的路径

    题目: 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. 思路: dfs一下就可以了.一般dfs肯定递归写比 ...

  9. Validate Binary Search Tree 解答

    Question Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is d ...

  10. openssl 生成CSR

    openssl 生成CSR 2013-12-27 15:05 3699人阅读 评论(1) 收藏 举报  分类: Security(38)  C/C++(105)  版权声明:本文为博主原创文章,未经博 ...