游览器从输入URL到页面展示过程

前言

在使用游览器的时候,只要在游览器的地址栏中输入网址, 就会进入相应的网站

他是如何进入网站的,

期间到底发生了什么呢

https和http到底有什么区别,

DNS又是什么

TCP连接

等等等等……

游览器从输入URL到页面展示主要经过七个过程

  1. URL 输入
  2. DNS 解析
  3. 建立 TCP 连接
  4. 发送 HTTP / HTTPS 请求
  5. 服务器响应请求
  6. 游览器解析渲染页面
  7. HTTP 请求结束,断开 TCP 连接

输入 URL

URL,全称: 统一资源定位符, 用于定位互联网上的资源 俗称网址

我们在地址栏输入网址后敲击回车,游览器会对输入信息进行判断:

  1. 检查输入内容是否是一个合法的 URL 连接
  2. 如果合法,则判断输入的 URL 是否完整;如果不完整,游览器可能会对地址进行猜测,补全地址的前缀或者后缀
  3. 如果不合法,将输入内容作为搜索条件,使用用户设置的默认搜索引擎来进行搜索

现在大部分游览器都会从历史记录、书签等地方开始查找我们输入的网址,并给出智能提示

DNS 解析

因为游览器不能直接通过域名找到对应的服务器 IP 地址,所以需要进行 DNS 解析,查找到对应的 IP 地址进行访问

详细过程

  1. 用户在游览器中输入域名,操作系统会检查游览器缓存和本地的 hosts 文件中是否有这个网址的记录,有的话就从记录里面找到对应的 IP 地址,完成域名解析
  2. 没有的话再接着使用 TCP/IP 参数中的设置的 DNS 服务器进行查询,如果要查询的域名包含在本地配置区域资源中,则返回结果,完成域名解析
  3. 还没有的话再接着查本地 DNS 服务器是否缓存有该网址记录,有的话就返回解析结果,完成域名解析
  4. 如果还没有的话, 本地 DNS 服务器会发送查询报文到根 DNS 服务器,根 DNS 服务器收到请求后, 返回顶级域 DNS 服务器地址,然后本地 DNS 服务器发送查询报文到顶级域 DNS 服务器, 顶级域 DNS 服务器收到请求后, 返回权威 DNS 服务器地址, 然后本地 DNS 服务器再发送查询报文到权威 DNS 服务器, 权威 DNS 服务器收到请求后, 返回最终的 IP 地址, 完成域名解析

报文就是在各个系统之间进行请求和响应时用来交换信息的,还需要遵守规定好的格式

更详细的请自行度娘

建立 TCP 连接

当游览器获取到服务器 IP 地址后,游览器会用一个随机的端口号向服务器 80 端口发起 TCP 连接请求
这个连接请求到达服务端后,通过 TCP 三次握手,建立 TCP 的连接

TCP 三次握手

其实就是建立一个 TCP 连接,客户端与服务器交互需要 3 个数据包

握手的主要作用就是为了确认双方的接收和发送能力是否正常,初始序列号,交换窗口大小等信息

如图所示

  1. 第一次握手
    • 客户端给服务器发送一个 SYN 报文,并进入 SYN_SENT 状态,等待服务器的确认
    • SYN是同步的缩写，SYN 段是发送到另一台计算机的 TCP 数据包，请求在它们之间建立连接
  2. 第二次握手
    • 服务器收到 SYN 报文, 需要给客户端发送 ACK 确认报文,同时服务器也要向客户端发送一个 SYN 报文, 所以也就是向客户端发送 SYN + ACK 报文,此时服务器进入 SYN_RCVD 状态
    • ACK 是“确认”的缩写。 ACK 数据包是任何确认收到一条消息或一系列数据包的 TCP 数据包
  3. 第三次握手
    • 客户端收到 SYN + ACK 报文,向服务器发送确认包,客户端进入 ESTABLISHED 状态,待服务器收到客户端发送的 ACK 包也会进入 ESTABLISHED 状态,完成三次握手
    • ESTABLISHED 状态是表示两台机器正在传输数据

更详细的请自行度娘

为什么 TCP 采用三次握手 两次不行吗?

主要因为以下几点原因

  1. 确认双方的收发能力

    • TCP 建立连接之前需要确认客户端与服务器双方的收包和发包的能力
    • 第一次握手：客户端发送网络包,服务端收到了 这样服务端就能得出结论:客户端的发送能力、服务端的接收能力是正常的
    • 第二次握手：服务端发包,客户端收到了 这样客户端就能得出结论:服务器的接收、发送能力,客户端的接收、发送能力是正常的 不过此时服务器并不能确认客户端的接收能力是否正常
    • 第三次握手：客户端发包,服务端收到了 这样服务端就能得出结论:客户端的接收、发送能力是正常,服务器自己的发送、接收能力正常
    • 所以，只有三次握手才能确认双方的接收与发送能力是否正常

  2. 确认序列号可靠同步

    • 如果是两次握手,服务端无法确定客户端是否已经接收到了自己发送的初始序列号,如果第二次握手报文丢失,那么客户端就无法知道服务端的初始序列号,那么 TCP 的可靠性就无从谈起了

  3. 阻止重复历史连接的初始化

    • 客户端由于某种原因发送了两个不同序号的 SYN 包,我们知道网络环境是复杂的,旧的数据包有可能先到达服务器 如果是两次握手,服务器收到旧的 SYN 就会立刻建立连接,那么就会造成网络异常
    • 如果是三次握手,服务器需要回复 SYN + ACK 包,客户端会对比应答的序号,如果发现是旧的报文,就会给服务器发 RST 报文,直到正常的 SYN 到达服务器后才正常连接
    • RST：（Reset the connection）用于复位因某种原因引起出现的错误连接，也用来拒绝非法数据和请求。如果接收到RST位时候，通常发生了某些错误
    • 所以三次握手才有足够的上下文信息来判断当前连接是否是历史连接

  4. 安全问题

    • TCP 新建连接时,内核会为连接分配一系列的内存资源,如果采用两次握手就建立连接,那会放大 DDOS 攻击
    • TCP 作为一种可靠的传输控制协议,其核心思想是既要保证数据可靠传输,又要提高传输的效率,而三次握手恰好可以满足以上两方面的需求

发送 HTTP / HTTPS 请求

建立连接后就可以通过 HTTP 进行数据传输

如果使用 HTTPS,会在 TCP 与 HTTP 之间多添加一层协议作为加密及认证的服务
HTTPS 使用量 SSL 和 TLS 协议,保障了信息的安全

SSL 协议的作用是,认证客户端和服务器,确保数据发送到正确的客户端和服务器,加密数据防止数据中途被窃取,维护数据的完整性,确保数据在传输过程中不被改变

TSL 协议的作用是,用于在两个通信应用程序之间提供保密性和数据完整性

TLS 协议有两层组成: TLS 记录协议和 TLS 握手协议

服务器响应请求

当游览器到 web 服务器的连接建立后,游览器会发送一个初始的 HTTP GET 请求,请求目标通常是一个 HTML 文件

服务器收到请求后,将发回一个 HTTP 响应报文,内容包括相关响应头和 HTML 正文

游览器解析渲染页面

当游览器收到服务器响应后,开始解析并渲染页面

不同的游览器引擎渲染过程不太一样,以谷歌为例

  1. 处理 HTML 标记并构建 DOM 树
  2. 处理 CSS 标记并构建 CSSOM 树
  3. 将 DOM树 与 CSSOM树 合并成一个渲染树
  4. 根据渲染树来布局,以计算每个节点的几何信息
  5. 将各个节点渲染到屏幕上,这样就完成了页面渲染

HTTP 请求结束,断开 TCP 连接

渲染完成之后就可以断开 TCP 连接了

现在的游览器页面为了优化请求的耗时,默认都会开启持久连接,也就是说,标签页关闭的时候 TCP 连接才会关闭,这个关闭的过程就是四次挥手

TCP 四次挥手过程

当我们的应用程序不需要数据通信了,就会发起断开 TCP 连接 建立一个连接需要三次握手,而断开一个连接需要经过四次挥手

如图所示

  1. 第一次挥手

    • 客户端发起 FIN 包,客户端进入 FIN_WAIT_1 状态, TCP 规定,及时 FIN 包不携带数据,也要消耗一个序号
    • FIN表示关闭连接

  2. 第二次挥手

    • 服务器端收到 FIN 包,发出确认包 ACK , 并带上自己的序号,服务器端进入了 CLOSE_WAIT 状态, 这个时候客户端已经没有数据要发送了, 不过服务器端有数据发送的话,客户端依然需要接收, 客户端收到服务器端发送到 ACK 后,进入了 FIN_WAIT_2 状态

  3. 第三次挥手

    • 服务器端数据发送完毕后,向客户端发送 FIN 包,半连接状态下服务器可能又发送了一些数据,服务器此时进入了 LAST_ACK 状态

  4. 第四次挥手

    • 客户端收到服务器的 FIN 包后,发出确认包 ACK , 此时客户端进入了 TIME_WAIT 状态,此时 TCP 连接还没有释放, 必须经过两个 MSL 后,才会进入 CLOSED 状态, 而服务器端收到客户端的确认包 ACK 后就进入了 CLOSED 状态, 可以看出服务器端结束 TCP 连接的时间要比客户端早一些

为什么建立连接握手三次,关闭连接时需要四次呢?

TCP 握手的时候,接收端发送 SYN + ACK 的包是将一个 ACK 和一个 SYN 合并到一个包中,所以减少了一次包的发送,三次完成握手

对于四次挥手,因为 TCP 是全双工通信, 在主动关闭方发送 FIN 包后,接收端可能还要发送数据, 不能立即关闭服务器端到客户端的数据通道, 所以也就不能将服务器端的 FIN 包和对客户端的 ACK 包合并发送, 智能先确认 ACK ,然后服务器等到无需发送数据时在发送 FIN 包, 所以四次握手时必须是四次数据包的交互

互联网 | 因特网 | 万维网 关系图

互联网(internet)
因特网(lnternet)
万维网(www)