从输入一个URL到页面渲染的流程简介

首先说明以下是我参考网上答案和自己的思考，给出自己的想法，如果有问题，欢迎大家吐槽
从用户在浏览器中输入一个URL，到整个页面渲染，这个过程中究竟发生了什么呢？今天先简单写下整个过程，后面再一点点完善。

一、获取IP地址

为什么要获取IP地址？

IP地址对应一台真实的物理机器，而且IP地址就像人的身份证是唯一的，用户请求服务器，只需要输入为该服务器分配的唯一的IP地址即可。但由于IP地址不便于记忆，因而使用较为语义化的域名来替代IP地址，而且一个域名可能对应了对个IP地址，比如用户输入www.baidu.com,该域名下对应了多个IP，域名解析服务器会根据一定的规则分配给用户其中一个IP地址。

1. 首先会在浏览器的缓存中查找，是否缓存了URL，如果有，就直接向该URL对应的服务器发送请求；如果没有则进行下一步;
2. 在本地的hosts文件中是否保存了该URL和其对应的IP地址，如果保存了，就直接向该URL对应的服务器发送请求；如果没有则进行下一步；
3. 向本地DNS服务器（一般由本地网络接入服务器提供商提供，比如移动）发送DNS请求，本地DNS服务器会首先查询它的缓存记录，如果有就将该域名对应的IP地址返回给用户，如果没有则进行下一步；
4. 首先向根域名服务器发送DNS查询请求，根域名服务器返回给可能保存了该域名的一级域名服务器地址；本地主机再根据返回的地址，向一级域名服务器发送DNS查询请求；...一直迭代，直到找到对应的域名存放的服务器，向其发送DNS查询请求，该域名服务器返回该域名对应的IP地址；

二、TCP/IP连接

三次握手：

为什么要进行三次握手？如果是两次握手，如下面的对话只有前两句，有可能出现的问题是：客户端之前发送了一个连接请求报文，由于网络原因滞留在网络中，后来到达服务器端，服务器接收到该请求，就会建立连接，等待客户端传送数据。而此时客户端压根就不知道发生了什么，白白造成了服务器资源浪费。

注：图片来源于https://baijiahao.baidu.com/s...

1. 客户端：我要请求数据可以吗？
2. 服务器：可以的
3. 客户端：好的

三、浏览器向web服务器发送http请求

客户机与服务器建立连接后就可以通信了，这里就暂时先不详细展开说http请求了。讲下客户端请求静态资源和动态资源。

1. 静态资源：如果客户端请求的是静态资源，则web服务器根据URL地址到服务器的对应路径下查找文件，然后给客户端返回一个HTTP响应，包括状态行、响应头和响应正文。
2. 动态资源：如果客户端请求的是动态资源，则web服务器会调用CGI/VM执行程序完成相应的操作，如查询数据库，然后返回查询结果数据集，并将运行的结果--HTML文件返回给web服务器。Web服务器再将HTML文件返回给用户。

四、浏览器渲染

浏览器拿到HTML文件后，根据渲染规则进行渲染：

1. 解析HTML，构建DOM树
2. 解析CSS，生成CSS规则树
3. 合并DOM树和CSS规则树，生成render树
4. 布局render树
5. 绘制render数、树，即绘制页面像素信息
6. GPU将各层合成，结果呈现在浏览器窗口中。

五、四次挥手

客户端没有数据发送时就需要断开连接，以释放服务器资源。

注：图片来源于https://baijiahao.baidu.com/s...

1. 客户端：我没有数据要发送了，打算断开连接
2. 服务器：你的请求我收到了，我这还有数据没有发送完成，你等下
3. 服务器：我的数据发送完毕，可以断开连接了
4. 客户端：ok，你断开连接吧（客户端独白：我将在2倍的最大报文段生存时间后关闭连接。如果我再次收到服务器的消息，我就知道服务器没有收到我的这句话，我就再发送一遍）。

最终服务器收到该客户端发送的消息断开连接，客户端也关闭连接。