给前端看的HTTP协议浅析

Posted JavaScript

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了给前端看的HTTP协议浅析相关的知识，希望对你有一定的参考价值。

告诉你们一个不幸的消息，小编最近忙着结婚，这段时间微信无法保证及时推送，更新改为不定时推送，到年后恢复，有问题留言即可，看到就会回复，谢谢大家的支持。


简介 
HTTP（超文本传输）是一种获取网络资源的协议，例如获取一个html页面，一张图片，一个js文件，都需要遵守这个协议，HTTP协议是Web上数据交换的基础。

客户端、服务端 
客户端通常是一个浏览器，当输入URL时，浏览器发起第一个请求以获取HTML文档，服务端收到请求后，生成相应的HTML文档，返回给浏览器，浏览器解析返回的HTML文档，并根据文档中的资源信息发送其他的请求获取这些资源，例如css文件，js脚本，图片等，浏览器根据这些资源绘制页面。

页面展现流程

  1. 解析HTML构建DOM树（Parsing HTML to construct the DOM tree ）

  2. 解析CSS，根据CSS选择器计算出的样式构建渲染树（Render tree construction）

  3. 布局渲染树（Layout of the render tree）

  4. 绘制渲染树（Painting the render tree）

代理服务器 
在浏览器和服务器之间可能存在代理服务器，代理服务器主要有以下几个作用

  • 缓存功能，提高访问速度

  • 过滤（像反病毒扫描，家长监护）

  • 负载均衡，让多个服务器服务不同的请求

  • 对不同资源的权限控制

  • 登陆，允许存储历史信息

HTTP是无状态，有会话的 
HTTP协议是无状态的，在同一个连接中，两个成功执行的请求之间是没有关系的，对服务器来说，它并不知道这两个请求来自同一个连接，为了解决这个问题，可以使用cookie以及session创建有状态的会话，也可以在请求头中添加token来解决这个问题

var request = new XMLHttpRequest();
request.open('GET', '', true);
request.setRequestHeader('Authorization','')
request.send();

HTTP 流 
一个客户端与服务器的数据交换流程如下

  1. 打开一个TCP连接（或者重用之前的一个）：TCP连接用来发送一条或多条请求，当然也用来接受回应消息。客户端可能重用一个已经存在的连接，或者也可能重开几个新的与服务端的TCP连接。

  2. 发送一个HTTP报文：HTTP报文（在HTTP/2之前）是语义可读的。在HTTP/2中，这些简单的消息被封装在了帧中，这使得报文不可能被直接读出来，但是规则仍旧是相同的。

GET / HTTP/1.1
Host: developer.mozilla.org
Accept-Language: fr

  1. 读取服务端返回的报文：

HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
ETag: "51142bc1-7449-479b075b2891b"
Accept-Ranges: bytes
Content-Length: 29769
Content-Type: text/html
 
<!DOCTYPE html... )

  1. 关闭连接或者为以后的请求重用连接。

HTTP 报文 
HTTP报文有两种类型，请求与回应 
请求报文

GET / HTTP/1.1
Host: 127.0.0.1
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8

第一行 GET / HTTP/1.1 分别为请求方法 资源路径 HTTP协议版本号 
之后为Headers

响应报文

HTTP/1.1 200 OK
Server: nginx/1.6.2
Date: Mon, 07 Sep 2015 07:37:37 GMT
Content-Type: text/html
Last-Modified: Mon, 07 Sep 2015 07:18:00 GMT
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip
 
<!DOCTYPE html... )

第一行 HTTP/1.1 200 OK 分别代表HTTP协议版本号 状态码 状态码信息 
之后为Headers 
然后会有一个空行，空行之后即为响应的body了

http1.0的问题 
http1.0最引人诟病的是连接无法复用及线头阻塞

连接无法复用直接导致每次请求都需要经历三次握手和慢启动，三次握手在高延迟下影响效果非常明显，慢启动则对大文件类请求影响较大，尽管可以通过设置 Connection:Keep-Alive 来复用短时间内的连接，但依然处理不了时间跨度比较大的请求

线头阻塞即在http1.0中，请求是按顺序处理的，这就导致如果前一个请求耗时严重或者出错，后续的请求都会受到影响

http2协议 
http2是一个二进制协议，基于二进制的http2可以使成帧的使用变得更为便捷 
http2规范一共定义了10种不同的帧，每种类型都有一个唯一的8字节类型编码。在整个TCP连接或者是各个独立的流的建立和管理过程中，每种类型的帧都为特定的目的而服务，其中最基础的两种分别对应于HTTP 1.1的DATA和HEADERS

多路复用的流 
http2连接上传输的每个帧都关联到一个“流”，一个流处理完毕，这个流生命周期完结

每个单独的http2连接都可以包含多个并发的流，这些流中交错的包含着来自两端的帧。流既可以被客户端/服务器端单方面的建立和使用，也可以被双方共享，或者被任意一边关闭。在流里面，每一帧发送的顺序非常关键。接收方会按照收到帧的顺序来进行处理。

优先级和依赖性 
每个流都包含一个优先级（也就是“权重”），它被用来告诉对端哪个流更重要。当资源有限的时候，服务器会根据优先级来选择应该先发送哪些流。

头部压缩 
在http1.1中，状态行和头部是没有经过任何压缩的，而是直接以纯文本传输，当页面请求资源的个数上升的时候，cookies和请求的大小都会增加，而每个请求都会包含的cookie几乎是一模一样的，这就造成资源的额外浪费

重置 
在HTTP 1.1中，HTTP消息一旦送出就很难中断，在http2里面，可以通过发送RST_STREAM帧来中断HTTP消息，从而避免浪费带宽和中断TCP连接（可以通过切断TCP连接来中断HTTP消息）

服务器推送 
即在客户端需要某些资源的情况下，在客户端请求发送前，服务端提前把这些资源推送到客户端缓存起来，当用户需要这些资源时，可以有效的减少网络请求所耗费的时间。

流量控制 
http2上每个流都拥有自己的公示流量窗口，它可以限制另一端发送数据，流量控制的目的是在流量窗口初始值的约束下，给予接收端以全权，控制当下想要接受的流量大小


参考链接：https://daniel.haxx.se/http2/

以上是关于给前端看的HTTP协议浅析的主要内容，如果未能解决你的问题，请参考以下文章

浅析HTTP协议的请求报文和响应报文

浅析HTTP协议get请求与post请求

前端静态资源缓存控制策略浅析

HTTP协议安全性浅析

HTTP协议浅析

HTTP协议浅析