http请求头的数据量
我们先分析下请求头,看看每次请求都带了那些额外的数据.下面是监控的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个文件
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......">
其中google的视频搜索中,搜索出来的视频缩略图就都是使用嵌入的图片的,见下图:
以上几种方法在都有利有弊,在不同情况下可以选择不同的使用方式,比如使用data嵌入图片虽然减少了请求数,但会增加页面大小。
所以微软的bing搜索在用户第一次访问的时候使用data嵌入图
片,然后后台懒加载真真的图片,以后访问就直接使用缓存的图片,而不使用data。
分享到:
相关推荐
我们先分析下请求头,看看每次请求都带了那些额外的数据.下面是监控的google的请求头
1、高性能Web服务器Nginx的配置与部署研究(1)Nginx简介及入门示例 内容:概述Nginx的背景知识和简单的入门实例。 2、高性能Web服务器Nginx的配置与部署研究(2)Nginx入门级配置与部署及“Hello World” 内容:...
从js,请求数等详细讲解高性能web开发,是个好资料,强烈推荐
基于c++实现的高性能web网络服务器源码(支持HTTP1.0协议中的GET和HEAD请求方法).zip 高性能Web服务器 一个小型的、高性能的多线程Web服务器 支持HTTP1.0协议中的GET和HEAD请求方法 make all编译生成二进制文件 高...
此文档一共两部分,此下载链接为第2部分。 第1章 绪论 1.1 等待的真相 1.2 瓶颈在哪里 1.3 增加带宽 1.4 减少网页中的HTTP请求 1.5 加快服务器脚本计算速度 1.6 使用动态内容缓存 1.7 使用数据缓存 1.8 将...
《决战Nginx系统卷:高性能Web服务器详解与运维》第一部分首先讲述了Nginx服务器的功能、模块管理和进程管理,然后讲述Nginx如何处理请求,在这个基础之上再认识Nginx提供的服务器的名字,Nginx服务器最大的焦点在于...
本书围绕如何构建高性能Web站点,从多个方面、多个角度进行了全面的阐述,涵盖了Web站点性能优化的几乎所有内容,包括数据的网络传输、服务器并发处理能力、动态网页缓存、动态网页静态化、应用层数据缓存、分布式...
围绕如何构建高性能Web站点,从多个方面、多个角度进行了全面的阐述,几乎涵盖了Web站点性能优化的所有内容,包括数据的网络传输、服务器并发处理能力、动态网页缓存、动态网页静态化、应用层数据缓存、分布式缓存、...
此文档一共两部分,此下载链接为第1部分。 第1章 绪论 1.1 等待的真相 1.2 瓶颈在哪里 1.3 增加带宽 1.4 减少网页中的HTTP请求 1.5 加快服务器脚本计算速度 1.6 使用动态内容缓存 1.7 使用数据缓存 1.8 将...
9.4 浏览器并发数 9.5 发挥各自的潜力 第10章 分布式缓存 10.1 数据库的前端缓存区 10.2 使用memcached 10.3 读操作缓存 10.4 写操作缓存 10.5 监控状态 10.6 缓存扩展 第11章 数据库性能优化 11.1 友好的...
《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...
本书适用于广大的Linux爱好者、具有一定Linux基础的系统管理员、Linux下的Web服务器管理员、Linux服务器下动态语言开发人员、Nginx服务器管理员、培训中心师生、运维人员以及一切应该了解和使用Nginx的用户
《决战Nginx系统卷:高性能Web服务器详解与运维》第一部分首先讲述了Nginx服务器的功能、模块管理和进程管理,然后讲述Nginx如何处理请求,在这个基础之上再认识Nginx提供的服务器的名字,Nginx服务器最大的焦点在于...
Blink 是一个为构建 “long running” 服务而生的 Web 微型高性能框架,它为构建 Web 应用程序提供简洁优雅的API,尽量减轻我们的常规开发工作。 与此同时,Blink尽可能的保持设计的简洁与可扩展性,允许开发者更加...
围绕如何构建高性能Web站点,从多个方面、多个角度进行了全面的阐述,几乎涵盖了Web站点性能优化的所有内容,包括数据的网络传输、服务器并发处理能力、动态网页缓存、动态网页静态化、应用层数据缓存、分布式缓存、...
httprouter一个高性能HTTP请求路由器,良好的可扩展性
目录回到顶部↑《构建高性能web站点(修订版)》 第1章 绪论 1 1.1 等待的真相 1 1.2 瓶颈在哪里 2 1.3 增加带宽 3 1.4 减少网页中的http请求 4 1.5 加快服务器脚本计算速度 4 1.6 使用动态内容缓存 5 1.7 ...
本书围绕如何构建高性能Web站点,从...在加入腾讯之前,获得国家系统分析师职称,目前在工作之余从事独立研究,其中包括高性能Web架构和Web敏捷开发框架,并且积极投身开源事业,同时在为Smart Developer系列进行创作。
本书围绕如何构建高性能Web站点,从...在加入腾讯之前,获得国家系统分析师职称,目前在工作之余从事独立研究,其中包括高性能Web架构和Web敏捷开发框架,并且积极投身开源事业,同时在为Smart Developer系列进行创作。