HTTP 请求流程

从输入 URL 到页面展示，这中间都发生了什么？

浏览器就好比一个神秘的黑盒，左边输入一个 URL，经过这个黑盒处理，右边返回预期的结果。了解浏览器工作原理，不仅可以使你在面试中如鱼得水，更有趣的是，它在我们的实际工作中发挥着举足轻重的作用，我们却没有那么重视它。

TCP/IP 四层概念模型

HTTP(HyperText Transfer Protocol)，超文本传输协议。属于应用层协议。

Browser 发起 HTTP 请求流程

• 构建请求行，准备发起网络请求

请求行信息包括 method、path、HTTP 协议版本号

GET / HTTP/1.1

• 查找缓存

浏览器在发起请求前，会在缓存中查找请求的资源。如果找到就拦截请求，返回资源副本，结束掉当前请求；如果没有找到，则会发起网络请求。浏览器缓存是浏览器将资源副本保存到本地的技术，这样做可以缓解服务器的压力，提升性能。

浏览器如何将数据发送到服务器呢？拿收快递来说，快递小哥要给你派件，起码得知道你的收件地址吧。同理，浏览器也需要知道服务器的地址，而 IP 地址就是互联网上的“收件地址”。有了收件地址后，浏览器又是怎么将数据送到服务器的呢？这里我们介绍几个重要的基础设施 TCP/IP、DNS。

TCP(Transmission Control Protocol)，传输控制协议。属于传输层协议。它位于 IP 协议之上，基于 IP 协议提供面向连接的、可靠的、字节流形式的通信，是 HTTP 协议得以实现的基础，换言之，HTTP 协议作为应用层协议，封装请求信息文本，通过 TCP/IP 传输协议，发送到网络。

可靠：对于数据包丢失的情况，TCP 提供重传机制。TCP 还引入了数据包排序，将接收到的包按照序号重新排序，组成新的文件。

IP(Internet Protocol)，网际协议。属于网络层协议。数据包要在互联上传输，就要遵循 IP 协议。互联网上不同的设备都具有唯一的地址。当我们访问某个网址时，实质还是我们计算机的 IP 地址请求另一台计算机的 IP 地址。

DNS(Domain Name System)，域名系统。负责将域名和 IP 地址一一映射。由于 IP 地址是一串数字，不方便记忆，而域名相比 IP 友好得多。

| TCP | IP |

| 流 | 包 |

| 端口(标识应用) | IP 地址(标识主机 IP) |

• 准备 IP 地址和端口

现在，我们来看看我们可以拿到什么，一个 URL。基于上面的介绍，我们已经知道了，通过 DNS 服务，可以解析出来 IP 地址和端口号。如果 URL 中没有特别指出端口，http 默认端口 80，https 默认端口 443。浏览器还提供了 DNS 缓存服务，当某个域名解析过之后，浏览器会缓存解析的结果，方便下次查询使用，这样可以减少一次网络请求。

• 等待 TCP 队列

准备好 IP 地址和端口号，是不是就可以建立 TCP 连接了呢？不一定。拿 Chrome 来说，Chrome 有个机制，同一个域名最多只能建立 6 个 TCP 连接，如果同一个域名下有 10 个请求，会有 4 个请求进入排队等待状态，直至前面的请求响应完成。当然，如果同一个域名不大于 6 个请求，就会直接建立 TCP 连接。

• 建立 TCP 连接

此时，浏览器终于可以和服务器愉快的握手了。三次握手，也就是说浏览器和服务器总共要发送三个数据包来确认建立连接。

• 发送请求

GET / HTTP/1.1Content-Type: text/htmlContent-Length: 20

请求头与请求体之间有一个 \r\n

Server 响应 HTTP 请求流程

• 返回请求

服务器接收到浏览器的请求后，一旦处理完成，就会返回对应的资源给浏览器。当然，服务器也并非能正确处理所有的请求，对于一些不能处理的请求，服务器会通过状态码的方式通知浏览器。

响应行包括：HTTP 协议版本号、状态码、状态文本

HTTP/1.1 200 OK

• 断开连接

一般服务器完成响应后，就会断开连接。如果请求头或者响应头中有如下字段

Connection: keep-alive

TCP 连接仍会处于打开状态，这样就可以在同一个 TCP 连接上继续发送请求。保持 TCP 连接省去了下次请求时 TCP 建立连接的时间，有助于提升资源加载的速度。

读到这里，相信你已经对一次 HTTP 请求的流程有了大致了解。“纸上得来终觉浅，绝知此事要躬行。”那么我们试着用 JavaScript 代码来实现它。当然，我们并不会按照浏览器的标准去实现它，只是为了加深对这一部分知识的理解。

代码戳这里

现在我们已经可以拿到服务器返回的 HTML 了，下一篇我们解析 DOM。