浏览器从输入地址到页面显示的过程中发生了什么

发布于:

#发生的事情

从输入url到页面显示大致有这样9个步骤。
  1. 浏览器对输入的地址进行URL解析
  2. 触发缓存,如浏览器缓存
  3. DNS解析把主机域名转换为ip地址
  4. 根据ip地址找到对应的服务器,发起tcp连接
  5. 建立tcp连接后,发起http请求
  6. 服务器响应http请求,客户端获得html文件
  7. 浏览器解析html代码,请求html中的外部资源(js、img、css等)
  8. 浏览器解析渲染视图页面
  9. 服务器断开tcp连接

#URL解析

如果输入的是url而非ip地址,那么浏览器会对url进行编码,使用encodeURL函数
编码有两个函数:encodeURIComponent()encodeURI()
encodeURIComponent()
  • 会对特殊字符进行编码,包括 :/?&= 和空格等。
  • 一般用于对查询字符串中的参数进行编码。
encodeURI()
  • 用于对整个 URI 进行编码,但不会对某些特殊字符进行编码,如 :/?#[]@ 等。
  • 通常用于对整个 URI 进行编码,但不希望影响 URI 结构的部分。

#DNS解析

  • 计算机之间的通信是通过唯一的网络地址标识(即ip地址)
  • ip难以记忆,面向网络。域名方便记忆,面向用户
  • 一个ip可以对应多个域名,而一个域名只能对应一个ip
  • 域名解析是通过专用的服务器进行的,被称为DNS服务器
dns.png
即DNS解析有本地、本地DNS服务器、根DNS服务器、顶级DNS服务器、NameServer服务器五个节点,依次请求DNS解析,最后返回DNS解析结果。
  1. 本地电脑检查浏览器缓存
  2. 本地电脑检查host配置文件
  3. 本地发起DNS解析请求
  4. 向根DNS服务器发起解析请求
  5. 根DNS服务器返回顶级DNS服务器地址
  6. 本地DNS服务器向顶级DNS服务器发起解析请求
  7. 顶级DNS服务器返回NameServer服务器地址(阿里云)
  8. 本地DNS服务器向NameServer服务器发起解析请求
  9. NameServer服务器返回正确的DNS解析结果
  10. 本地DNS服务器给本地返回正确的DNS解析结果

#DNS解析优化

DNS解析延迟较高,DNS解析优化多用于优化CDN资源
在页面头部添加 <link rel="dns-prefetch" href="域名"> 可以告知浏览器预取指定域名的 DNS,加速后续资源的加载。

#TCP连接

#建立TCP连接

通过三次握手,客户端与服务器用SYN报文段交换彼此的初始序列号,维持连接状态
seq:序列号
ack:确认号
  1. 第一次握手:客户端发送一个带有随机序列号的SYN包
  2. 第二次握手:服务器收到客户端的SYN包后,服务器发送一个带有随机序列号和确认号(确认好是之前客户端发送的序列号+1)的SYN包,表示服务器已收到请求,并已准备好发送数据
  3. 第三次握手:客户端收到服务器的SYN-ACK包后,发送一个带有确认号(确认好是之前服务器发送的序列号+1)的SYN包,表示客户端已收到服务器的确认,双方已准备好通信。
handshake.jpeg

#断开TCP连接

通过四次挥手,确保数据传输的完整性,当被动方的数据全部传输给主动方后进行连接的关闭。
  1. seq:序列号
    • 在四次挥手中,每个数据包的序列号表示发送方下一个准备发送的数据包的序列号。
  2. ack:确认号
    • 在四次挥手中,确认号表示接收方期望接收的下一个数据包的序列号。
四次挥手的过程如下:
  • 第一次挥手:当一端(通常是客户端)决定关闭连接时,发送一个带有 FIN(Finish)标志位的数据包,表示数据发送完成。
  • 第二次挥手:另一端(通常是服务器端)收到 FIN 包后,会发送一个 ACK 包作为确认,同时表明自己也准备关闭发送数据。
  • 第三次挥手:服务器端发送一个带有 FIN 标志位的数据包,表示服务器已经完成数据发送。
  • 第四次挥手:客户端收到服务器端的 FIN 包后,发送一个 ACK 包作为确认,表示接收到了服务器端的关闭请求。
wave.jpeg

#浏览器解析渲染页面

解析渲染流程
1、根据 HTML 解析出 DOM
2、根据 CSS 解析出 CSS 规则树
3、结合 DOM 树和 CSS 规则树,生成渲染树
4、根据渲染树计算 DOM 节点的信息(节点的大小、位置)
5、根据计算好的信息绘制页面(CSS的颜色、背景、字体等)