从浏览器输入网址到页面呈现的过程(一)：先后端交互

这是一个很是很是很是常见的问题。我将这个过程分红两部分：一部分是浏览器发送请求到服务器返回数据；一部分是浏览器收到数据开始渲染返回的结果。

先上总体的一个框架：

DNS 解析

每个网址都有一个相对应的独特的 IP 地址，这个 IP 地址对应着host这个域名的机器，其实域名是不重要的，重要的是这个 IP 地址，因为 IP 地址这一串数字不便于记忆，所以此案有域名这个东西来帮助咱们记忆。

因此，咱们首先要对域名进行解析，找到网络中真正处理这个网址的机器。

DNS 解析首先会从你的浏览器的缓存中去寻找是否有这个网址对应的 IP 地址，若是没有就向OS系统的 DNS 缓存中寻找，若是没有就是路由器的 DNS 缓存， 若是没有就是 ISP 的DNS 缓存中寻找。

因此，缓存的寻找过程就是： 浏览器 -> 系统 -> 路由器 -> ISP。

若是在某一个缓存中找到的话，就直接跳到下一步。

若是都没有找到的话，就会向 ISP 或者公共的域名解析服务发起 DNS 查找请求。这个查找的过程仍是一个递归查询的过程。好比当咱们访问segmentfault.com, 它的寻找过程是: 根域名服务器 -> .com域名服务器 -> segmentfault.com 域名服务器 返回相对应当的 IP 地址。

TCP 链接

经过 DNS 解析，咱们找到了真正处理这个网址的服务器的 IP 地址，这时候咱们要和它创建链接发送数据，TCP 是最经常使用的创建链接的协议。TCP 协议经过三次握手创建链接。

1️⃣：客户端经过 SYN 报文段发送链接请求，肯定服务端是否开启端口准备链接。状态设置为 SYN_SEND;
2️⃣：服务器若是有开着的端口而且决定接受链接，就会返回一个 SYN+ACK 报文段给客户端，状态设置为 SYN_RECV；
3️⃣：客户端收到服务器的 SYN+ACK 报文段，向服务器发送 ACK 报文段表示确认。此时客户端和服务器都设置为 ESTABLISHED 状态。链接创建，能够开始数据传输了。

发送请求

这个时候咱们的客户端已经和处理这个网址的服务器创建了链接，咱们终于能够请求咱们想要的数据了。

咱们一般的请求行是: 请求的方式 + 请求的资源的位置 + HTTP/[版本号]

好比： GET index.html HTTP/1.1

服务端回应

服务器上有一个 Web 服务器，经常使用的有 Apache 等。它用来接受客户端发来的请求，对 TCP 进行处理，解析 HTTP 协议，生成 HTTP Request 对象，而后将 HTTP Request 对象发送给请求处理器，也就是咱们经常使用的 PHP， Ruby 等这些后端程序，这些后端程序将根据 Request 对象生成相应的响应数据。

生成响应数据以后，这时候咱们就要把响应数据发送给客户端了。

一般响应由： 响应行 + 响应头部 + 响应主体 组成。

响应行：HTTP/[版本号] 状态码 状态信息

好比： HTTP/1.1 200 OK

状态码分别有如下几种：
1xx - 一些信息
2xx - 成功
3xx - 重定向
4xx - 客户端错误
5xx - 服务端错误

响应头主要是服务器想设置的一些信息，好比 cookie 等。
响应主体就是要返回的资源，好比 HTML 文件。

完成第一部分

到这里咱们已经完成了第一部分，客户端已经收到了请求的资源，假设这里收到的是 HTML 文件，下一篇咱们就来看看浏览器怎么渲染收到的 HTML 文件。

参考资料

Medium 整个流程

SegmentFault 整个流程

TCP 三次握手