输入 URL 到页面渲染的整个流程

前端输入 url 到页面渲染的流程:

1. DNS 解析 URL 的过程

• 浏览器输入域名后, 操作系统首先会检查本地 hosts 文件是否有当前网址的映射关系, 如果有直接调用这个 IP 地址映射完成域名解析
• 如果没有则查找本地 DNS 解析器缓存中是否有当前网址的映射关系, 如果有直接返回完成域名解析
• 如果没有则到本地 TCP/IP 设置的 DNS 服务器进行查询, 如果查找的网址在 DNS 资源的范围内则返回解析给主机, 此解析具有权威性
• 如果不在本地 DNS 资源范围内, 但该服务器存储了网址的映射关系, 则调用这个 IP 的映射关系, 完成域名解析
• 如果本地 DNS 服务器解析失败并且缓存中没有对应的映射关系则去 DNS 服务器中查找

2. 浏览器与服务器交互的过程

• 根据 IP 建立 TCP 连接（三次握手）
  • 首先客户端向服务端发送一个同步信号 SYN， 等待服务端接收
  • 服务端收到同步信号后会返回一个确认信号以及一个同步信号 SYN/ACK 给客户端
  • 客户端收到后返回一个确认信号 ACK，此时通道建立
• HTTP 发起请求
• 服务器处理请求， 浏览器接收 HTTP 响应
• 渲染页面
• 关闭 TCP 连接（四次挥手）
  • 客户端发送一个结束信号 FIN 给服务端
  • 服务端收到后发送一个确认信号 ACK 给客户端
  • 当服务端数据传输完之后发送一个 FIN 结束信号给客户端
  • 客户端收到后发送一个确认信号 ACK 给服务端， 此时通道关闭

3. 浏览器页面渲染的过程

• 解析 HTML 文件为 DOM 树
• 解析 CSS 文件为 CSS 规则树
• 合并 DOM 树以及 CSS 规则树为 renderTree 渲染树
• 进入 Layout 环节， 对元素节点进行大小尺寸以及位置的计算
• painting 环节，将渲染树各个节点绘制到屏幕上