前言:
首先我们来思考下,当我们在浏览器搜索框中,输入一个 URL 网址,按下回车键后,会出现我们想要的页面信息。那么在这个过程中,都发生了哪些事情 ?一个页面是如何从有到无的 ?一个链接是怎么样读取到渲染的页面的 ?对于这些问题,做一个相关知识点的总结。
- 页面加载过程发生了什么 ?
- DNS 域名解析。
- 建立 TCP 连接(三次握手)。
- 发送 HTTP 请求。
- 服务器端处理请求。
- 返回响应结果。
- 关闭 TCP 连接(四次挥手)。
- 浏览器解析 HTML。
- 浏览器页面布局渲染。
- DNS 域名解析 ?
目的:DNS 域名解析都会有一个 DNS 服务器 将域名解析成 IP 地址,以便向正确的 IP 地址发送请求。
过程:
- 判断当前页面 DNS 是否有缓存。
- 查询本地 DNS 缓存。
- 请求本地 local NDS Service。
- 根 DNS 服务器。
- 进行域名解析。
- 返回 IP 和 TTL 值。
- DNS 缓存。
- 返回解析结果给用户。
- 建立 TCP 连接 ?三次握手,详解
建立 TCP 连接,主要有 数据封装 和 三次握手(建立连接)。
三次握手:(详细版)
- 第一次握手:建立连接时,客户端发出 syn 包(syn=j)到服务器,并进入 SYN_SENT 状态,等待服务器确认;SYN:同步序列编号。
- 第二次握手:服务器收到 syn 包,必须确认客户的 SYN(ack=j+1),同时自己也发送一个 SYN 包(syn=k),即SYN+ACK 包,此时服务器进入 SYN——RECV 状态。
- 第三次握手:客户端收到服务器的 SYN+ACK 包,向服务器发送确认包 ACK(ack=k+1),此包发送完毕,客户端和服务器进入 ESTABLISHED(TCP连接成功)状态,完成三次握手。
三次握手:(精简版)
- 客户端向服务器端发送连接请求报文段。
- 服务端收到连接请求报文段后,如果同意连接,则会发送一个应答。
- 当客户端收到连接同意的应答后,还要向服务端发送一个确认报文段,表示:服务端发来的连接同意应答,已经成功收到。
- 发送 HTTP 请求 ?
发送 HTTP 请求的动作包括 GET / POST / OUT / DELETE / OPTIONS 等这几种。
- 关闭 TCP 连接 ?四次挥手,详解
关闭 TCP 连接(四次挥手)。
四次挥手:
第一次挥手:Client (可以使客户端,也可以是服务器端),设置 Sequence Number 和 Acknowledgment Number,向 Server 发送一个 FIN 报文段;此时,Client 进入 FIN_WAIT_1 状态;这表示 Client 没有数据要发送给 Server 了;客户端发送第一次挥手后,就不能在向 服务端发送数据了。
第二次挥手:Server 收到了 Client 发送的FIN报文段,向 Client 回一个ACK报文段,Acknowledgment Number 为 Sequence Number 加 1;Client 进入 FIN_WAIT_2 状态;Server 告诉 Client ,我“同意”你的关闭请求;Server 第一次响应后,还可以继续向 Client 发送数据,这里只是告诉 Client ,我收到你发送的关闭请求。
第三次挥手:Server 向 Client 发送 FIN 报文段,请求关闭连接,同时 Server 进入 CLOSE_WAIT 状态;当 Server 的数据响应完成后,再告诉 Client,我这边也可以关闭请求了, 这时 Server 就不能再向 Client 发送数据了。
第四次挥手:Client 收到 Server 发送的 FIN 报文段,向 Server 发送 ACK 报文段,然后 Client 进入TIME_WAIT 状态;Server 收到 Client 的 ACK 报文段以后,就关闭连接;此时,Client 等待 2MSL 后依然没有收到回复,则证明 Server 端已正常关闭,那好,Client 也可以关闭连接了。
- 浏览器解析 HTML ?
- 解析 HTML 生成 DOM 树。
- 解析 CSS 形成 CSS 样式树。
- DOM 树和 CSS 样式树,形成 Render Tree。
- 浏览器页面布局渲染 ?
- 页面 Layout (布局)。
- 页面 Paint (绘制)。