从输入URL到页面展示到底发生了什么？

---

前言

从输入URL到页面展示到底发生了什么？这可以说是面试必问的一个问题，简单的动作背后隐藏着很多细节，总体上可以分为七步：输入地址->浏览器查找域名的 IP 地址->TCP三次握手->发送 HTTP 请求->服务器处理请求并返回 HTTP 报文->浏览器解析渲染页面->TCP四次挥手。

---

一、输入地址

URL（Uniform Resource Locator)，统一资源定位符，用于定位互联网上资源，俗称网址。
例如：https://www.baidu.com/

当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能得 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。

---

二、浏览器查找域名的 IP 地址

在浏览器输入网址后，首先要经过域名解析，因为浏览器并不能直接通过域名找到对应的服务器，而是要通过 IP 地址。

https://www.baidu.com/域名是由什么部分组成的呢？

1.https：http+加密+认证+完整性保护。
2.www：World Wide Web，万维网。
3.www与后面的baidu.com一起构成了一个域名地址。

在真正发起请求之前，需要进行DNS解析，解析出baidu.com背后的ip地址是什么。

总结：浏览器通过向 DNS 服务器发送域名，DNS服务器查询到与域名相对应的 IP 地址，然后返回给浏览器，浏览器再将 IP 地址打在协议上，同时请求参数也会在协议搭载，然后一并发送给对应的服务器。

---

三、TCP三次握手

在客户端发送数据之前会发起TCP三次握手用以同步客户端和服务端的序列号和确认号，并交换 TCP 窗口大小信息。

---

四、浏览器发送 HTTP 请求

TCP 三次握手结束后，开始发送 HTTP 请求报文。
请求报文由请求行（request line）、请求头（header）、请求体三个部分组成。

1. 请求行包含请求方法、URL、协议版本

2. 请求头包含主机地址，以及客户端的一些环境信息，以键值对的形式传递

3. 请求体，可以承载多个请求参数的数据  例如：username=admin&userpwd=123

---

五、服务器处理请求并返回 HTTP 报文

服务器收到了我们的请求，也处理我们的请求，到这一步，它会把它的处理结果返回，也就是返回一个HTPP响应。
一个http响应代表服务器向客户端回送的数据，它包括：响应行，响应头，响应体。

1.响应行里包含了http协议版本，以及用于描述服务器对请求的处理结果。
HTTP/1.1 (协议版本) 200(状态码) OK(状态码描述)

2.响应头用于描述服务器的基本信息，以及数据描述
Ser ver Apache-Coyote/1.1
Content-Type text /html;char set=UTF-8
Content-Length 0 Date Wed, 13 Sep 2017 02:26:07 GMT

3.响应体代表服务器向客户端浏览器回送的正文

---

六、浏览器解析渲染页面

浏览器解析服务器的响应并进行页面渲染，最后呈现丰富的网页在我们面前。
浏览器解析渲染页面分为一下五个步骤：

1.根据 HTML 解析出 DOM 树
2.根据 CSS 解析生成 CSS 规则树
3.结合 DOM 树和 CSS 规则树，生成渲染树
4.根据渲染树计算每一个节点的信息
5.根据计算好的信息绘制页面

---

七、TCP四次挥手

当数据传送完毕，需要断开 tcp 连接，此时发起 tcp 四次挥手。

---

总结

本章简要的介绍了输入URL到页面展示的基本过程，在面试中最好能够简洁清晰的描述出基本流程。同时读者可以查阅相关资料深入学习每个步骤背后的原理，例如DNS解析的步骤。

---