从url到页面的过程发生了什么

从浏览器中输入url到页面的形成，这中间发生了什么，请往下看吧。

输入url --- 解析url --- 缓存判断 --- DNS解析 ---获取MAC地址 --- TCP三次握手 --- 发送HTTP请求 --- 响应HTTP请求 ---页面渲染（ 构建DOM --- 构建CSSOM --- 构建渲染树 --- 布局 --- 绘制）--- TCP四次挥手

目录

解析url

缓存判断

DNS解析

获取MAC地址

TCP三次握手

HTTPS握手

返回数据

页面渲染

TCP四次挥手

---

解析url

分析所需要使用的传输协议和请求的资源的路径。

如果该路径有盘符（C:/..... ，D:/....），说明请求的资源是本地的，则浏览器会从本地文件系统中读取相应的文件内容，解析文件，创建DOM树和CSS树，构建渲染树，布局和绘制。

缓存判断

如果不是上述情况，浏览器会判断请求的资源是否在缓存里，如果在且没有失效，那么直接使用，否则向服务器发起新的请求。

DNS解析

将url中的域名解析为IP地址。先判断本地是否有该域名的缓存，有则使用，没有则向本地DNS服务器发起请求，本地DNS服务器也会检查缓存，如果没有继续向下查找....

顺序：本地缓存---本地DNS服务器---根域名服务器---顶级域名服务器---权威域名服务器。

最终获取到域名的IP地址，将这个地址发给请求的用户。

获取MAC地址

浏览器得到IP地址之后，数据传输还需要知道目的主机MAC地址。

数据链路层的发送需要添加通信双方的MAC地址。

TCP三次握手

TCP建立的三次握手过程：

（1）客户端向服务端发送一个SYN连接请求报文段和一个随机序号

（2）服务端接收到请求后向客户端发送一个SYN+ACK报文段，确认连接请求，并向客户端发送一个随机序号。

（3）客户端接收到服务端的确认应答后，进入连接建立的状态，同时向服务端发送一个ACK确认报文段，服务端接收到确认之后，也进入连接建立状态，这样双方的连接就建立起来了。

常见面试题：

为什么不是两次握手，而是三次？

为了实现可靠数据传输， TCP 协议的通信双方， 都必须维护一个序列号， 以标识发送出去的数据包中， 哪些是已经被对方收到的。 三次握手的过程即是通信双方相互告知序列号起始值， 并确认对方已经收到了序列号起始值。 如果只是两次握手， 至多只有连接发起方的起始序列号能被确认， 另一方选择的序列号则得不到确认。

HTTPS握手

如果使用的HTTPS协议，在通信之前还存在TLS的一个四次握手的过程：

（1）首先由客户端向服务器端发送使用的协议的版本号、一个随机数和可以使用的加密方法。

（2）服务器端收到后，确认加密的方法，也向客户端发送一个随机数和自己的数字证书。

（3）客户端收到后，首先检查数字证书是否有效，如果有效，则再生成一个随机数，并使用证书中的公钥对随机数加密，然后发送给服务器端，并且还会提供一个前面所有内容的 hash 值供服务器端检验。

（4）服务器端接收后，使用自己的私钥对数据解密，同时向客户端发送一个前面所有内容的 hash 值供客户端检验。

返回数据

当页面请求发送到服务器后，服务器端会返回一个HTML文件作为响应，浏览器接收到响应后，开始对HTML文件进行解析。

页面渲染

浏览器根据HTML文件构建DOM树，根据解析到的CSS文件构建CSSOM树，如果遇到script标签，判断是否含有defer或async属性，要不然script的加载和执行会造成页面渲染的阻塞。当DOM树和CSSOM树构建好之后，根据它们来构建渲染树，再根据渲染树进行布局，布局完成之后，使用浏览器的UI接口对页面进行绘制，这个时候整个页面就显示出来了。

拓展：

defer和async这两个script资源提示符，都是异步加载js内容。但defer是等dom元素解析完之后，执行js内容；async是当js加载完成之后，直接执行，不管dom元素有没有解析完，js执行完，如果还有dom元素没有解析，则继续解析dom元素。

TCP四次挥手

最后一步是TCP断开连接的四次挥手过程：

（1）若客户端认为数据发送完成，则它需要向服务端发送连接释放请求。

（2）服务端收到连接释放请求后，会告诉应用层要释放 TCP连接，然后会发送 ACK 包，并进入关闭等待状态（ CLOSE_WAIT）。

此时，从TCP客户进程到TCP服务器进程这个方向的连接就释放掉了，TCP连接处于半关闭状态。因为 TCP 连接是双向的，所以服务端仍旧可以发送数据给客户端，服务端如果此时还有没发完的数据会继续发送。

（3）服务端数据发送完毕后，会向客户端发送连接释放请求，然后服务端便进入最后确认状态（LAST-ACK）。

（4）客户端收到释放请求后，向服务端发送确认应答，当服务端收到确认应答后，便进入关闭状态（CLOSED ）；客户端进入 时间等待状态（TIME-WAIT ），该状态会持续 2MSL（MSL：最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有服务端的重发请求的话，就进入关闭状态（CLOSED ）。

这就是从url到页面的大致过程。

如果本文对你有帮助，希望能得到你的点赞或收藏或关注，这是对我最好的鼓励；

如你有问题或疑惑，欢迎在评论区写下，必将努力解答；

如本文有误区，希望你不吝赐教，让我们共勉！