适合前端的HTTP全流程总结-白红宇

1. 前言

对于开发人员，无论前端还是后端，了解HTTP网络相关的知识，都是非常有必要的。本文希望以通俗易懂的文字，将HTTP这里彻底搞定~

2. TCP/IP 协议族

一切的源点，都在于，计算机之间，也想要像人一样，融入社会（网络），相互交流沟通（通信）。而这一切，都是要基于互相有共同的语言，或者有彼此能够理解的动作和行为。

比如，两个人之间进行交流，那么可以有以下几种方式：

会说同一种语言，或会写同一种文字。

做手势，肢体语言、面部表情、点头摇头。

。。。

而所有的上述方式，都要基于双方都能听得懂or看的懂。我们可以把上述所有的方式，统称为人沟通方式集合。

TCP/IP概念

计算机也是一样的，如果两个计算机之间要进行通信，那么它们之间也要有多种相互都理解的沟通方式，我们把计算机之间的所有通信方式的集合，统称为 TCP/IP ，也就是等同于 人沟通方式集合。所以，首先一定要理解的是，经常提到的 TCP/IP ，它只是一个集合的名字，和 TCP ， IP 没有关系啊！！！

协议

上面人的交流方式有好多种，那么相对应计算机通信的方式，也就有很多种，计算机通信的方式，叫做协议。

需要注意的一点是，协议的功能不仅仅局限于通信，只要是在通信的过程中，起到了一定的作用，的方法和工具，都是协议，举例：

打电话，收发信号的功能，是一种协议，查询号码归属地，也是一种协议，只要是参与打电话这个过程，都是一种协议。

总结：

计算机之间要想通信，需要很多种协议相互配合，不是一两个协议就能搞定的，每个协议各司其职，都有着独一无二的作用。

协议之间是可以嵌套的，并不是说互相就没有关系，比如ssh协议、http协议、ftp协议等都基于TCP协议，而dns协议、SMTP协议则属于UDP协议。比如：我要去上海，TCP协议就是规定要走陆地的方式，UDP规定要走非陆地的方式，然后 ssh是坐火车，http是坐汽车，都属于TCP陆地....dns是坐飞机，SMTP是坐船，都属于UDP非陆地。。。

这么多的协议，是分到不同的层上的，比如应用层上有ftp、http协议；网络层有IP协议。。。

http协议，是针对 web服务器、浏览器 之间通信的，如果是其他服务之间通信，那就可能是另一种协议了。这也能反映出，TCP协议是个大通用，其下可以针对不同的服务衍生出不同的协议，所以对于前端来说，主要研究的就是http协议。

计算机通信的过程，是信息从一个层到另一个层（节点到节点）这样传递，每个层（节点）上都有不同的协议（方式），不同的协议发挥着各自的作用，协议之间可能有包含的关系。

3. TCP/IP 分层

我们已经大概理解了层与协议的概念，之所以分不同的层，肯定是不同的层所实现的功能有很大的差异，即每个层都要完成一个大的独立的功能，而层里面会有多个协议去配合着实现功能。

前端一般掌握四层模型就可以了，感兴趣的也可以了解一下细分成七层模型。

应用层

理解：连接了用户与计算机各种应用程序，可以让用户完成各种想要做的事情。比如打开qq，浏览器等等，这些软件都是在应用层上。让用户能够看的见、可操作，让用户能够操作计算机。

设备：该层的实际设备，可以认为就是计算机本身

传输层

理解：在用户计算机和目标计算机之间，提供可靠的、合理的数据传输服务。可以认为是沟通计算机和路由器之间的桥梁，算是对外开放的一个窗口，提供建立、维护、拆除连接的功能，并且处理连接过程中的错误。

传输层的功能，就是建立“端口对端口”的通信。相比之下，“网络层”的功能是建立“主机到主机”的通信。只要确定了主机和端口，我们就能实现程序之间的交流。

设备：该层没有实际的设备，可以认为是计算机里面我们看不到的一个程序吧，专门负责对外的连接，公关。

网络层

理解：计算机之间的标识是 IP ，所以要想和对方通信，就需要通过IP找到对方。而北京和上海之间，中间会有好多个设备，所以怎么通过一个IP，找到千里之外的对方，这就是网络层的任务。

设备：路由器

数据链路层

理解：网络层是负责大范围的查找，比如快递找到了你家小区；但是在小区里具体几号楼，则需要数据链路层。因为网络层查找的IP都是公网IP，而局域网内的计算机都是私有IP，数据链路层能够将计算机的私有IP和MAC地址映射起来，总之就是能找到小区里你的家。除此之外，物理层走的是比特流，而链路层能将比特流封装成帧，并且进行一些差错检测、流量控制等。

设备：交换机

物理层

理解：物理层就是为各种物理设备提供一个传输的通道，物理和物理设备之间若要传递信息，那么就需要对一些特性描述进行定义，比如电压、电流、插座尺寸等。该层流动的是比特流。

设备：网线、水晶头、光缆等

4. 数据包

发送端在层与层之间传输数据时，每经过一层时必定会被打上一个该层所属的首部信息。反之，接收端在层与层传输数据时，每经过一层时会把对应的首部消去。这种把数据信息包装起来的做法称为封装。

以太网首部

大概了解一下即可

（1）其中的源地址和目的地址是指网卡的硬件地址（也叫MAC 地址），长度是48 位，是在网卡出厂时固化的。

（2）注意网卡芯片（例如DM9000A）收到的数据就是如上所示的一长串数据；其中包括以太网帧头、IP报报头、传输层协议段头、应用层所需数据。

（3）以太网帧中的数据长度规定最小46 字节，最大1500 字节，ARP 和RARP 数据包的长度不够46 字节，要在后面补填充位。最大值1500 称为以太网的最大传输单元（MTU），不同的网络类型有不同的MTU，如果一个数据包从以太网路由到拨号链路上，数据包度大于拨号链路的MTU了，则需要对数据包进行分片fragmentation）。ifconfig 命令的输出中也有“MTU:1500”。注意，MTU 个概念指数据帧中有效载荷的最大长度，不包括帧首部的长度。

这里只需要了解大概，在经过每一层，都要在数据包中添加上该层相关的信息。

5. 与HTTP关系密切的协议：IP、TCP和DNS

从上面内容我们已经知道，数据会在 应用层 --> 传输层 --> 网络层 --> 数据链路层 这样传递，而关于数据链路层的一些知识，感兴趣的同学可以看一下阮一峰老师的文章。

我们只研究：

应用层：http协议、dns协议

传输层：TCP协议

网络层：IP协议

IP地址和MAC地址

每个计算机的网卡都有一个全球唯一的地址来标识自己，不会重复。计算机和计算机之间发送和传输数据都是通过网卡进行的，所以计算机之间建立连接也就是两个网卡之间建立连接。网卡的地址，就是数据包的发送地址和接收地址，这叫做MAC地址。

理论上，单单依靠MAC地址，上海的网卡就可以找到洛杉矶的网卡了，技术上是可以实现的。但是，面对着无数的计算机，如果都使用MAC地址进行通讯，那么就需要维护一个极其庞大的MAC地址表，在查找目的机器的时候，就需要向全世界发送数据包，可想而知会造成多大的网络流量。

所以要将无数的计算机，划分成一个一个的子网，每个子网都有个地址进行标识，这就是 IP 地址。

而关于 IP地址、子网掩码、公网IP和局域网IP 等有关的知识，大家可以百度详细的学一下。

这里我们就还需知道，通信的最后一定会根据 IP 地址找到对应的 MAC 地址，而干这个的，就是 ARP 协议。

DNS

提供www域名到IP地址之间的解析服务。

而实际上，DNS服务器查询一个域名的IP，是需要多次迭代查询的。

查询crm.baidu.cn的IP的步骤：

客户端首先向 根DNS服务器 发送 crm.baidu.cn 的请求。

根DNS服务器 发现是cn，然后告诉你并返回 管理cn 的DNS服务器 地址

接着客户端去询问 管理cn 的DNS服务器 ，然后返回的是 baidu.cn 的地址。

此时，客户端收到的，是百度公司的一个地址，发送 crm.baidu.cn 给百度公司，返回给你 IP 。

即：(1) 得到 cn 的地址 (2) 得到 baidu.cn 的地址 (3) 得到 crm.baidu.cn 的地址

注意：浏览器会对网址的dns信息进行缓存，如果缓存存在，则直接取得网址的IP

HTTP和TCP的区别

到这里，很多同学还可能分不清HTTP和TCP，下面就先讲一下区别

区别1： TCP是传输层，而http是应用层

区别2：

TCP就是单纯的建立连接，不管传的是啥数据，就比如打电话，只要双方都接通了，TCP的任务就完成了，它不管双方要说啥，用英文还是法语交流的。。。

而HTTP是定义了传递数据的格式和规范，像浏览器中见到的 header 中 Content-Type: text/html; ETag: "5c47ddbc-2b3" 。。。就像打电话过程中定义要用英语沟通一样。

HTTP是基于TCP的，所以有HTTP一定有TCP，就像HTTP是要用英文打电话，那是不是得基于建立电话的连接。

总结：TPC/IP协议是传输层协议，主要解决数据如何在网络中传输，而HTTP是应用层协议，主要解决如何包装数据。

把IP想像成一种高速公路，它允许其它协议在上面行驶并找到到其它电脑的出口。TCP和UDP是高速公路上的“卡车”，它们携带的货物就是像HTTP，文件传输协议FTP这样的协议等。

HTTP是利用TCP在两台电脑(通常是Web服务器和客户端)之间传输信息的协议。客户端使用Web浏览器发起HTTP请求给Web服务器，Web服务器发送被请求的信息给客户端。即TCP是个通用的协议，HTTP则是基于它在网页web方面的传输方式。

6. TCP

到这里，通过网络层和数据链路层，已经能够实现了计算机找到另一个计算机了，但是真正的通讯，是计算机的进程之间交换数据，比如qq聊天。所以TCP/UDP所在的传输层，就是起到了计算机两个进程间的通信。

TCP，对方同意时才能建立连接，像打电话。

UDP，不管对方接受不，直接发过去，比如给对方发微信。

TCP概述

提供可靠的、安全的连接服务，具备以下功能:

将数据包进行分段传输，否则如果数据包特别大，那么容易造成堵塞。

对每个分段后的数据包进行编号的控制顺序，到达后再根据编号拼成完整的数据包。

数据传输过程中，对网络延迟、丢包等现象，有重发机制来保证数据的完整性。

控制流量，避免发送速率过快，平稳的将数据传输过去。

使用“滑动窗口”的流量控制机制来高网络的吞吐量。

TCP首部

之前介绍过了，到达每一层都会封装一个对应的首部，我们来看这层添加了什么样子的首部：

源端口和目的端口：存放着本机与目标计算机，各自的，本次连接所开通的，端口号。

序列号：连接传输时，传输的数据，每一个字节都要进行顺序的编号。例如，连接时的序号初始值是301，要传输的数据为100字段，那么再传输数据时，序号就从401开始。

URG--紧急，当URG=1，表明紧急指针字段有效。告诉系统此报文段中有紧急数据。

ACK--确认，仅当ACK=1时，确认号字段才有效。TCP规定，在连接建立后所有报文的传输都必须把ACK置1。

RST--复位，当RST=1，表明TCP连接中出现严重差错，必须释放连接，然后再重新建立连接。

同步SYN，在连接建立时用来同步序号。当SYN=1，ACK=0，表明是连接请求报文，若同意连接，则响应报文中应该使SYN=1，ACK=1。

终止FIN，用来释放连接。当FIN=1，表明此报文的发送方的数据已经发送完毕，并且要求释放。

如上就是TCP首部的一些解释，双方计算机建立连接时的沟通，就是以如上的这些字段进行交流，所以字段的参数值，在连接过程中，也会根据实况进行改变。

TCP建立连接

三次握手

TCP建立两个计算机的连接，就是用传说中的三次握手，客户端和服务端总共需要发送3个包以确认连接的建立。

（1）第一次握手：Client将标志位SYN置为1，随机产生一个值seq=J，并将该数据包发送给Server，Client进入SYN_SENT状态，等待Server确认。

（2）第二次握手：Server收到数据包后由标志位SYN=1知道Client请求建立连接，Server将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给Client以确认连接请求，Server进入SYN_RCVD状态。

（3）第三次握手：Client收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给Server，Server检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，Client和Server进入ESTABLISHED状态，完成三次握手，随后Client与Server之间可以开始传输数据了。

四次挥手

TCP连接的释放，就是传说中的四次挥手。

（1）第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。

（2）第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。

（3）第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。

（4）第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。

经典问题：

为什么要三次握手，而不是两次：

比如 A 向 B 发送请求连接

第三次是需要A再确认一下，这次请求是不是还有效的，，，，设想如果网络延迟，A发送的请求在5分钟后才到达B（其实对于A来说这个请求已经失效了），这时需要A的第三次握手，来确认这个连接还有效不了。。。

释放连接的时候，为什么要四次挥手呢：

看图中，第二次挥手, B 只是告诉A ，我收到了你关闭连接的请求了，但是数据还没传完呢，此时还可以继续传数据。。。然后当数据传完了，B再向A发送第三次挥手，告诉A数据传完了，断开连接吧。

四次挥手的最后，为什么会有2ms的等待：

A向B发送的第四次挥手，如果网络延迟，那么B可能收不到，，，这时A有2ms的这个循环，继续向B发送。。。如果B收到了，那么这2ms就消失了。

HTTP

前面介绍了这么多，终于到了和前端息息相关的 HTTP 协议了，为什么说和前端直接联系，因为 HTTP 协议，就是负责浏览器同服务器后端进行通信的规则，它允许将html文档等从web服务器上，传输到用户浏览器中。

HTTP协议定义了浏览器如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。

HTTP 是基于 TCP 的，即 http 传输建立之前需要先建立tcp连接，也就是三次握手，在建立tcp连接之后方可真正请求响应请求。。

HTTP 请求/响应的步骤：

1、客户端连接到Web服务器

一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口（默认为80）建立一个TCP套接字连接。

2、发送HTTP请求

通过TCP套接字，客户端向Web服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据4部分组成。

3、服务器接受请求并返回HTTP响应

Web服务器解析请求，定位请求资源。服务器将资源复本写到TCP套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。

4、释放连接TCP连接

若connection 模式为close，则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接;若connection 模式为keepalive，则该连接会保持一段时间，在该时间内可以继续接收请求;

5、客户端浏览器解析HTML内容

客户端浏览器首先解析状态行，查看表明请求是否成功的状态代码。然后解析每一个响应头，响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化，并在浏览器窗口中显示。

例如：在浏览器地址栏键入URL，按下回车之后会经历以下流程：

(1)、浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;

(2)、解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;

(3)、浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;

(4)、服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;

(5)、释放 TCP连接;

(6)、浏览器将该 html 文本并显示内容;

HTTP 消息结构

HTTP 请求方法

HTTP 首部字段含义

通用首部字段含义(前、后端通用，大概看一眼)

请求首部(request)

响应首部(response)

状态码

HTTP 2.0

HTTP2.0的基本单位为二进制帧流，而不是1.0的文本格式

消息头（报文首部）压缩

多路复用，以前每次请求都需要建立TCP连接，经历三次握手和四次挥手，，，2.0可以只建立一次连接，处理多个请求

服务端推送，服务器会主动将资源推送给客户端，例如把js和css文件主动推送给客户端而不用客户端解析HTML后请求再响应。

HTTPS

由于HTTP协议过于简单：

通信使用明文（不加密），内容可能会被窃听。

不验证通信方的身份，因此可能遭遇伪装

无法验证报文的完整性，所以有可能已遭篡改。

https是http的加密版本，是在http请求的基础上，采用ssl进行加密传输。

要知道的是，HTTPS并非是应用层的一种新的协议。只是HTTP通信接口部分用SSL或TLS协议代替而已。也就是说，所谓的HTTPS，其实就是身披SSL协议外壳的HTTP。

加密技术

对称加密： 以DES为代表，客户端和服务端拿到的密钥是一样的，即加密和解密使用的密钥是一样的，只有一个密钥。

优点：算法公开、计算量小、加密速度快、加密效率高。

缺点：秘钥的管理和分发非常困难，不够安全。在数据传送前，发送方和接收方必须商定好秘钥，然后双方都必须要保存好秘钥，如果一方的秘钥被泄露，那么加密信息也就不安全了。另外，每对用户每次使用对称加密算法时，都需要使用其他人不知道的唯一秘钥，这会使得收、发双方所拥有的钥匙数量巨大，密钥管理成为双方的负担。

非对称加密： 以RES为代表，需要两个密钥来进行加密和解密，这两个密钥是配对的，分别是公开密钥（公钥）和私有密钥（私钥）。私钥只能由一方安全保管，不能外泄，而公钥则可以发给任何请求它的人。非对称加密使用这对密钥中的一个进行加密，而解密则需要另一个密钥。

工作原理:

1.A向B发送信息，A和B都要产生一对用于加密和解密的公钥和私钥

2.A的私钥保密，A的公钥告诉B，B的私钥保密，B的公钥告诉A、

3.A要给B发送信息时，A用B的公钥加密信息，因为A知道B 的公钥

4.A将这个消息发给B，（已经用B的公钥加密消息）

5.B收到这个消息后，B用自己的私钥解密A的消息，其他所有收到这个报文的人都无法解密，因为只有B才有B 的私钥。

优点：安全性更高，公钥是公开的，秘钥是自己保存的，不需要将私钥给别人。

缺点：加密和解密花费时间长、速度慢，只适合对少量数据进行加密。

HTTPS采用共享密钥加密和公开密钥加密两者并用的混合加密机制。在交换密钥环节使用非对称密钥加密方式，之后建立的通信交换报文阶段则使用对称密钥加密方式。

确认加密算法的过程使用的是非对称性加密。数据传输过程使用对称性加密。

输入url后发生了什么

1. 浏览器地址栏输入 URL 并回车2. 浏览器查找当前URL是否存在缓存，缓存是否过期（URL对应的IP）3. DNS 解析 URL 对应的IP（如果第2步没缓存的情况下）。这里涉及到了DNS迭代查询，回看文中关于 DNS 那部分。4. 根据 IP 建立 TCP 的连接（三次握手）5. HTTP 发起请求6. 服务器处理请求，浏览器接收 HTTP 响应7. 渲染页面，构建 DOM 树8. 关闭 TCP 连接（四次挥手）复制代码

最后：字写了很多，现在有点迷糊，以后再慢慢完善~