`
Fangrn
  • 浏览: 796871 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

高性能WEB开发 - 为什么要减少请求数,如何减少请求数!

    博客分类:
  • j2ee
阅读更多
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个文件
     上面第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......">

 

     其中google的视频搜索中,搜索出来的视频缩略图就都是使用嵌入的图片的,见下图:
    
      
  
   
    
       以上几种方法在都有利有弊,在不同情况下可以选择不同的使用方式,比如使用data嵌入图片虽然减少了请求数,但会增加页面大小。

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

相关推荐

    高性能WEB开发 为什么要减少请求数,如何减少请求数!

    我们先分析下请求头,看看每次请求都带了那些额外的数据.下面是监控的google的请求头

    实战Nginx高性能Web服务器

    1、高性能Web服务器Nginx的配置与部署研究(1)Nginx简介及入门示例 内容:概述Nginx的背景知识和简单的入门实例。 2、高性能Web服务器Nginx的配置与部署研究(2)Nginx入门级配置与部署及“Hello World” 内容:...

    高性能web开发(2)

    从js,请求数等详细讲解高性能web开发,是个好资料,强烈推荐

    基于c++实现的高性能web网络服务器源码(支持HTTP1.0协议中的GET和HEAD请求方法).zip

    基于c++实现的高性能web网络服务器源码(支持HTTP1.0协议中的GET和HEAD请求方法).zip 高性能Web服务器 一个小型的、高性能的多线程Web服务器 支持HTTP1.0协议中的GET和HEAD请求方法 make all编译生成二进制文件 高...

    构建高性能Web站点(PDF)-第2部分

    此文档一共两部分,此下载链接为第2部分。 第1章 绪论 1.1 等待的真相 1.2 瓶颈在哪里 1.3 增加带宽 1.4 减少网页中的HTTP请求 1.5 加快服务器脚本计算速度 1.6 使用动态内容缓存 1.7 使用数据缓存 1.8 将...

    决战Nginx: 系统卷 - 高性能Web服务器详解与运维.z01

    《决战Nginx系统卷:高性能Web服务器详解与运维》第一部分首先讲述了Nginx服务器的功能、模块管理和进程管理,然后讲述Nginx如何处理请求,在这个基础之上再认识Nginx提供的服务器的名字,Nginx服务器最大的焦点在于...

    构建高性能web站点 高清完整版

    本书围绕如何构建高性能Web站点,从多个方面、多个角度进行了全面的阐述,涵盖了Web站点性能优化的几乎所有内容,包括数据的网络传输、服务器并发处理能力、动态网页缓存、动态网页静态化、应用层数据缓存、分布式...

    构建高性能Web站点(修订版).pdf

    围绕如何构建高性能Web站点,从多个方面、多个角度进行了全面的阐述,几乎涵盖了Web站点性能优化的所有内容,包括数据的网络传输、服务器并发处理能力、动态网页缓存、动态网页静态化、应用层数据缓存、分布式缓存、...

    构建高性能Web站点(PDF)

    此文档一共两部分,此下载链接为第1部分。 第1章 绪论 1.1 等待的真相 1.2 瓶颈在哪里 1.3 增加带宽 1.4 减少网页中的HTTP请求 1.5 加快服务器脚本计算速度 1.6 使用动态内容缓存 1.7 使用数据缓存 1.8 将...

    构建高性能Web站点_PDF_45.5M

    9.4 浏览器并发数 9.5 发挥各自的潜力 第10章 分布式缓存 10.1 数据库的前端缓存区 10.2 使用memcached 10.3 读操作缓存 10.4 写操作缓存 10.5 监控状态 10.6 缓存扩展 第11章 数据库性能优化 11.1 友好的...

    构建高性能web站点 精选版

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    决战Nginx系统卷——高性能Web服务器详解与运维

     本书适用于广大的Linux爱好者、具有一定Linux基础的系统管理员、Linux下的Web服务器管理员、Linux服务器下动态语言开发人员、Nginx服务器管理员、培训中心师生、运维人员以及一切应该了解和使用Nginx的用户

    决战Nginx: 系统卷 - 高性能Web服务器详解与运维.part2

    《决战Nginx系统卷:高性能Web服务器详解与运维》第一部分首先讲述了Nginx服务器的功能、模块管理和进程管理,然后讲述Nginx如何处理请求,在这个基础之上再认识Nginx提供的服务器的名字,Nginx服务器最大的焦点在于...

    PHP高性能Web微框架BlinkFramework.zip

    Blink 是一个为构建 “long running” 服务而生的 Web 微型高性能框架,它为构建 Web 应用程序提供简洁优雅的API,尽量减轻我们的常规开发工作。 与此同时,Blink尽可能的保持设计的简洁与可扩展性,允许开发者更加...

    构建高性能Web站点

    围绕如何构建高性能Web站点,从多个方面、多个角度进行了全面的阐述,几乎涵盖了Web站点性能优化的所有内容,包括数据的网络传输、服务器并发处理能力、动态网页缓存、动态网页静态化、应用层数据缓存、分布式缓存、...

    Go-httprouter高性能HTTP请求路由器良好的可扩展性

    httprouter一个高性能HTTP请求路由器,良好的可扩展性

    构建高性能web站点

    目录回到顶部↑《构建高性能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站点 part2

    本书围绕如何构建高性能Web站点,从...在加入腾讯之前,获得国家系统分析师职称,目前在工作之余从事独立研究,其中包括高性能Web架构和Web敏捷开发框架,并且积极投身开源事业,同时在为Smart Developer系列进行创作。

    构建高性能WEB站点 part1

    本书围绕如何构建高性能Web站点,从...在加入腾讯之前,获得国家系统分析师职称,目前在工作之余从事独立研究,其中包括高性能Web架构和Web敏捷开发框架,并且积极投身开源事业,同时在为Smart Developer系列进行创作。

Global site tag (gtag.js) - Google Analytics