从输入URL到页面渲染的过程(详解)

1.DNS域名解析

首先是URL解析,判断输入的是一个合法的URL还是一个待搜索的关键词,并且根据你输入的内容自动完成字符编码等操作.

然后是DNS解析，目的就是找到URL对应的服务器IP地址。

会依次搜索:

• 浏览器的DNS缓存；
• 操作系统的DNS缓存;
• 路由器的DNS缓存；
• 向服务商的DNS服务器查询；
• 向全球13台根域名服务器查询；

2.建立TCP的连接,发起TCP的三次握手

浏览器拿到IP后,在想服务器发起http请求之前,先要和服务器建立TCP连接.就是TCP的三次握手.

• 2.1 第一次握手:客户端发送’SYN’数据包给服务端
• 2.2 第二次握手:服务端收到客户端的数据包,返回’SYN/ACK’数据包给客户端
• 2.3 第三次握手:客户端收到服务端的返回后,发送’ACK’数据包给服务端

3.发送http请求

连接建立成功之后,就可以发送HTTP请求到服务器请求数据了

• 3.1 客户端向服务器发送http请求的时候会有一些请求信息,请求信息包含三个部分:
  - 1.请求行
  - 2.请求头
  - 3.请求体
  • 请求头和请求正文之间是一个空行,这个空行非常重要,它表示请求头已经结束,接下来是请求正文
• 3.2 然后后端在固定的端口接收到TCP报文开始,它会对TCP连接进行处理,对HTTP协议进行解析,并按照报文格式进一步封装程HTTP Request对象
  • 一般大型的网站会将你的请求代理到反向代理服务器中,因为当网站访问量非常大,网站越来越慢,一台服务器已经不够用了
  • 于是将同一个引用部署在多台服务器上,将大量用户的请求分配给多台机器处理
  • 此时,客户端部署直接通过HTTP协议访问某网站引用服务器,而是先请求到Nginx,Nginx在请求应用服务器,然后将结果返回给客户端.这里的Nginx的作用是反向代理服务器,同时也带来了一个好处,其中一台服务器万一挂了,只要还有其他服务器正常运行,就不会影响用户使用.

4.服务器处理相关的请求,返回处理后的结果

通过Nginx的反向代理,我们到达了web服务器,服务器处理请求,访问数据库,然后将处理结果返回.也就是返回一个HTTP响应.
hTTP响应和HTTP请求相似,也由三个部分组成.

• 响应行
• 响应头
• 响应体

5. 断开TCP连接,四次挥手

浏览器接受完服务器返回的资源后，需要断开TCP连接。断开TCP连接需要经历四次挥手.

• 5.1 第一次挥手：浏览器器发送一个FIN，以及选择号seq=u（表示：u之前的数据已经全部发送，并且数据发到u就可以截止了，就不再有数据了），用来关闭Client到Server的数据传送。Client进入FIN_WAIT_1状态。
• 5.2 第二次挥手：服务器收到FIN后，发送一个请求号seq=v和确认序号ack=u+1给Client。Server进入CLOSE_WAIT状态。
• 5.3 第三次挥手：Server发送一个FIN，请求号为最新的seq=w和确认序号ack=u+1，用来关闭Server到Client的数据传送。Server进入LAST_ACK状态。
• 5.4 第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为w+1。Server进入CLOSED状态，完成四次挥手。

6. 资源解析

浏览器接收到来自服务器的响应资源后,如果响应资源进行了压缩,需要进行解压,然后,对响应资源做缓存,接下来对资源进行解析.这些资源包括html、css和JavaScript等文件。

• html通过html解析器输出dom树
• css通过css解析器输出css规则
• 结果dom树和css规则，计算出dom书中每个节点的具体样式，生成渲染树。
• 浏览器根据渲染树开始布局和绘制，会触发回流和重绘
• 构建图层树，显示页面。