浏览器中，页面加载过程中做了哪些事情 ？

前言：

---

首先我们来思考下，当我们在浏览器搜索框中，输入一个 URL 网址，按下回车键后，会出现我们想要的页面信息。那么在这个过程中，都发生了哪些事情 ？一个页面是如何从有到无的 ？一个链接是怎么样读取到渲染的页面的 ？对于这些问题，做一个相关知识点的总结。

---

• 页面加载过程发生了什么 ？

1. DNS 域名解析。
2. 建立 TCP 连接（三次握手）。
3. 发送 HTTP 请求。
4. 服务器端处理请求。
5. 返回响应结果。
6. 关闭 TCP 连接（四次挥手）。
7. 浏览器解析 HTML。
8. 浏览器页面布局渲染。

• DNS 域名解析 ？

目的：DNS 域名解析都会有一个 DNS 服务器 将域名解析成 IP 地址，以便向正确的 IP 地址发送请求。

过程：

1. 判断当前页面 DNS 是否有缓存。
2. 查询本地 DNS 缓存。
3. 请求本地 local NDS Service。
4. 根 DNS 服务器。
5. 进行域名解析。
6. 返回 IP 和 TTL 值。
7. DNS 缓存。
8. 返回解析结果给用户。

• 建立 TCP 连接 ？三次握手，详解

建立 TCP 连接，主要有 数据封装 和 三次握手（建立连接）。

三次握手：（详细版）

1. 第一次握手：建立连接时，客户端发出 syn 包（syn=j）到服务器，并进入 SYN_SENT 状态，等待服务器确认；SYN：同步序列编号。
2. 第二次握手：服务器收到 syn 包，必须确认客户的 SYN（ack=j+1）,同时自己也发送一个 SYN 包（syn=k）,即SYN+ACK  包，此时服务器进入 SYN——RECV 状态。
3. 第三次握手：客户端收到服务器的 SYN+ACK  包，向服务器发送确认包  ACK（ack=k+1）,此包发送完毕，客户端和服务器进入 ESTABLISHED（TCP连接成功）状态，完成三次握手。

三次握手：（精简版）

1. 客户端向服务器端发送连接请求报文段。
2. 服务端收到连接请求报文段后，如果同意连接，则会发送一个应答。
3. 当客户端收到连接同意的应答后，还要向服务端发送一个确认报文段，表示：服务端发来的连接同意应答，已经成功收到。

• 发送 HTTP 请求 ？

发送 HTTP 请求的动作包括 GET / POST / OUT / DELETE / OPTIONS 等这几种。

• 关闭 TCP 连接 ？四次挥手，详解

关闭 TCP 连接（四次挥手）。

四次挥手：

1. 第一次挥手：Client （可以使客户端，也可以是服务器端），设置 Sequence Number 和 Acknowledgment Number，向 Server 发送一个 FIN 报文段；此时，Client 进入 FIN_WAIT_1 状态；这表示 Client  没有数据要发送给 Server 了；客户端发送第一次挥手后，就不能在向 服务端发送数据了。

2. 第二次挥手：Server 收到了  Client  发送的FIN报文段，向  Client  回一个ACK报文段，Acknowledgment Number  为 Sequence Number 加 1；Client  进入  FIN_WAIT_2  状态；Server 告诉 Client ，我“同意”你的关闭请求；Server  第一次响应后，还可以继续向  Client  发送数据，这里只是告诉  Client ，我收到你发送的关闭请求。

3. 第三次挥手：Server  向  Client  发送  FIN  报文段，请求关闭连接，同时  Server  进入  CLOSE_WAIT  状态；当 Server  的数据响应完成后，再告诉  Client，我这边也可以关闭请求了， 这时 Server  就不能再向  Client  发送数据了。

4. 第四次挥手：Client  收到  Server  发送的  FIN  报文段，向  Server  发送  ACK  报文段，然后  Client  进入TIME_WAIT  状态；Server  收到  Client  的  ACK  报文段以后，就关闭连接；此时，Client  等待 2MSL 后依然没有收到回复，则证明  Server  端已正常关闭，那好，Client  也可以关闭连接了。

• 浏览器解析 HTML ？

1. 解析 HTML 生成 DOM 树。
2. 解析 CSS 形成  CSS 样式树。
3. DOM 树和 CSS 样式树，形成 Render Tree。

• 浏览器页面布局渲染 ？

1. 页面 Layout （布局）。
2. 页面 Paint （绘制）。