全栈工程师眼中的HTTP

HTTP,是Web工程师每天打交道最多的一个基本协议 。很多工作流程、性能优化都围绕HTTP协议来进行,但是我们对HTTP的理解是否全面呢?如果前端工程师和后台工程师坐在一起玩捉鬼游戏,他们对HTTP的描述可能会截然不同,从这两个角色的视角看过去,HTTP呈现出截然不同的形态 。
HTTP简介

超文本传输协议(HyperText Transfer Protocol,HTTP)是互联网上应用最为广泛的一种网络协议 。设计HTTP的最初目的是提供一种发布和接收html页面的方法 。OSI模型1义了整个世界计算机相互连接的标准,总共分为7层,其中最上层(也就是第7层)就是应用层,HTTP、HTTPS、FTP、TELNET、SSH、SMTP和POP3都属于应用层 。这是软件工程师最关心的一层 。
SI模型越靠近底层,就越接近硬件 。在HTTP协议中,并没有规定必须使用它或它支持的层 。事实上,HTTP可以在任何互联网协议或其他网络上实现 。HTTP假定其下层协议提供可靠的传输,因此,任何能够提供这种保证的协议都可以被其使用,也就是其在TCP/IP协议族使用TCP作为其传输层 。
全栈工程师眼中的HTTP

文章插图
 
OSI模型,图片来自维基百科 。
关于HTTP版本HTTP已经演化出了很多版本,它们中的大部分都是向下兼容的 。客户端在请求的开始告诉服务器它采用的协议版本号,而后者则在响应中采用相同或者更早的协议版本 。
当前应用最广泛的HTTP版本为HTTP/1.1,它自从1999年发布以来,距写作本书时已有16年的时间 。比起HTTP/1,它增加了几个重要特性,比如缓存处理(在下一章介绍)和持续连接,以及其他一些性能优化 。
2015年2月,HTTP/2正式发布 。新的HTTP版本有一些重大更新,除了一如既往地向下兼容HTTP/1以外,还有一些优化,比如减小网络传输延迟,并简化服务器向浏览器传输内容的过程 。主流的服务器(Apache、Nginx等)和浏览器(Firefox、Chrome、Safari以及IOS和Android的浏览器等)的最新版都已经支持HTTP/2,剩下的就需要网站管理员把服务器升级到最新版了 。
例子下面是一个HTTP客户端与服务器之间会话的例子,运行于www.google.com,端口80 。
客户端首先发出请求 。
GET / HTTP/1.1Host:www.google.com第一行指定方法、资源路径、协议版本 。当然这是一个简化后的例子,实际请求中还会有当前Google登录账户的cookie、HTTPS头、浏览器接受何种类型的压缩格式和UA2代码等 。
服务器随之应答 。
HTTP/1.1 200 OKContent-Length: 3059Server: GWS/2.0Date: Mon, 20 Apr 2015 20:30:45 GMTContent-Type: text/htmlCache-control: privateSet-cookie: PREF=ID=73d4aef52e57bae9:TM=1042253044:LM=1042253044:S= SMCc_HRPCQiqyX9j; expires=Sun, 17-Jan-2038 19:14:07 GMT; path=/; domain=.google.comConnection: keep-alive在这一串HTTPS头之后,会紧跟着一个空行,然后是HTML格式的文本组成的Google主页 。
介绍完关于HTTP的基本知识,我们来分别看看前端工程师和后台工程师分别是怎样看待这个最熟悉的小伙伴的 。
前端视角前端工程师的职责之一是,让网站又快又好地展现在用户的浏览器中 。
从这个角度来说,对HTTP的理解是这样的:打开HttpWatch3,然后随意访问一个网站 。HttpWatch会按照浏览器请求的次序,列出打开这个网站的时候发生的请求细节 。
  • 发出的请求列表 。
  • 每个请求的开始时间 。
  • 每个请求从开始到结束花费的时间 。
  • 每个请求的类型(比如是文本、css、JS,还是图片或者字体等) 。
  • 每个请求的状态码(比如是200、还是from cache、304、404等) 。
  • 每个请求产生的流量消耗 。
  • 每个请求gzip4压缩前的体积,以及在本地gzip解压后的体积 。
通过查看站点的HTTP请求信息,可以得到很多优化信息 。每一个前端工程师都知道的基本优化方法是:尽量减少同一域下的HTTP请求数,以及尽量减少每一个资源的体积 。5
尽量减少同一域下的HTTP请求数浏览器常常限定了对同一域名发起的并发连接数的上限 。IE6/7和Firefox2的设计规则是,同时只能对一个域名发起两个并发连接 。新版本的各种浏览器普遍把这一上限设定为4至8个 。如果浏览器需要对某个域进行更多的连接,则需要在用完了当前连接之后,重复使用或者重新建立TCP连接 。
全栈工程师眼中的HTTP

文章插图
 
QQ空间的CSS贴图由程序自动生成,保证最佳的图片质量、最合理的图片摆放和最小的体积 。


推荐阅读