从URL输入到页面展现背后发生了什么？

从URL输入到页面展现背后发生了什么？

从 URL 输入到页面展现经过以下过程：

大致流程如下：

1、在浏览器输入URL；

2、浏览器进行DNS域名解析，查找到域名对应的IP地址；

3、浏览器与服务器建立TCP连接；

4、浏览器发起请求、服务器处理请求并通过TCP连接返回响应;

5、浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重用；

6、解析HTML文档、构建DOM树、下载资源、构造CSSOM树、执行js脚本；渲染页面。

相关知识点

一、浏览器进行DNS域名解析，查找到域名对应的IP地址。

1、什么是DNS?

DNS就是用来记录域名和IP地址相互映射关系的。

2、为什么需要进行DNS域名解析？

因为浏览器不能识别URL地址，只能识别IP地址，所以需要将URL地址解析成浏览器能够识别的IP地址信息。

3、DNS 解析浏览器的实际寻址方式是怎样的？

3.1 查找浏览器缓存——近期浏览过的网站，浏览器会缓存 DNS 记录一段时间 （如果没有则往下）；

3.2 查找系统缓存——从 C 盘的 hosts 文件查找是否有存储的 DNS 信息，查找是否有目标域名和对应的 IP 地址 （如果没有则往下）；

3.3 查找路由器缓存 （如果没有则往下）；

3.4 查找 ISP DNS 缓存——从网络服务商（比如电信）的 DNS 缓存信息中查找（如果没有则往下）；

3.5 经由以上方式都没找到对应 IP 的话，就会向根域名服务器查找目标 URL 对应的 IP，根域名服务器会向下级服务器转达请求，层层下发，直到找到对应的 IP 为止。

二、浏览器与服务器建立TCP连接、断开连接。

客户端与服务器建立TCP连接的三次握手

1、首先客户端向服务器端发送一段TCP报文；

2、服务器端接收到来自客户端的TCP报文之后，结束LISTEN阶段。并返回一段TCP报文；

3、客户端接收到来自服务器端的确认收到数据的TCP报文之后，明确了从客户端到服务器的数据传输是正常的，结束SYN-SENT阶段。并返回最后一段TCP报文。

TCP的四次挥手

1、首先客户端想要释放连接，向服务器端发送一段TCP报文；

2、服务器端接收到从客户端发出的TCP报文之后，确认了客户端想要释放连接，随后服务器端结束ESTABLISHED阶段，进入CLOSE-WAIT阶段（半关闭状态）并返回一段TCP报文；

3、服务器端自从发出ACK确认报文之后，经过CLOSED-WAIT阶段，做好了释放服务器端到客户端方向上的连接准备，再次向客户端发出一段TCP报文；

4、客户端收到从服务器端发出的TCP报文，确认了服务器端已做好释放连接的准备，结束FIN-WAIT-2阶段，进入TIME-WAIT阶段，并向服务器端发送一段报文。

为什么“握手”是三次，“挥手”却要四次？

1、TCP建立连接时之所以只需要"三次握手"，是因为在第二次"握手"过程中，服务器端发送给客户端的TCP报文是以SYN与ACK作为标志位的。SYN是请求连接标志，表示服务器端同意建立连接；ACK是确认报文，表示告诉客户端，服务器端收到了它的请求报文。

2、TCP释放连接时之所以需要“四次挥手”,是因为FIN释放连接报文与ACK确认接收报文是分别由第二次和第三次"握手"传输的。
（释放连接时，被动方服务器，突然收到主动方客户端释放连接的请求时并不能立即释放连接，因为还有必要的数据需要处理，所以服务器先返回ACK确认收到报文，经过CLOSE-WAIT阶段准备好释放连接之后，才能返回FIN释放连接报文）

三、页面渲染机制

1、HTML的加载

HTML是一个网页的基础，下载完成后解析。

2、其他静态资源加载

解析HTML时，发现其中有其他外部资源链接比如CSS、JS、图片等，会立即启用别的线程下载。

但当外部资源是JS时，HTML的解析会停下来，等JS下载完执行结束后才继续解析HTML，防止JS修改已经完成的解析结果。

3、DOM树构建

在HTML解析的同时，解析器会把解析完成的结果转换成DOM对象，再进一步构建DOM树。

4、CSSOM树构建

CSS下载完之后对CSS进行解析，解析成CSS对象，然后把CSS对象组装起来，构建CSSOM树。

5、渲染树构建

当DOM树和CSSOM树都构建完之后，浏览器根据这两个树构建一棵渲染树。

6、布局计算

渲染树构建完成以后，浏览器计算所有元素大小和绝对位置。

7、渲染

布局计算完成后，浏览器在页面渲染元素。经过渲染引擎处理后，整个页面就显示出来。