浏览器输入URL后发生了什么

327 阅读6分钟

我正在参加「掘金·启航计划」

前言

你是否曾经想过,当你在浏览器中输入一个URL并按下回车键后,会发生什么事情?这个简单的动作背后隐藏着一系列复杂而精密的过程。在本篇博客中,我们将深入探索浏览器输入URL后发生的一系列神奇事件。 总的来说,浏览器输入url后会发生以下几个过程:

  • URL解析
  • DNS解析
  • 建立TCP连接
  • 发送HTTP请求
  • 服务器处理请求
  • 浏览器解析渲染页面
  • 连接结束

第一步:URL解析

当你在浏览器地址栏中输入URL后,浏览器首先会进行URL解析。它会检查输入的字符串是否符合URL的格式,并提取出协议(如HTTP或HTTPS)、主机名(例如www.google.com)以及可选的端口号等信息。

第二步:DNS解析

一旦URL被解析出来,浏览器需要将主机名转换为对应的IP地址。为了实现这一点,浏览器会发起DNS(Domain Name System)解析请求,将主机名发送给DNS服务器。DNS服务器将返回与该主机名对应的IP地址,使得浏览器能够建立与目标服务器的连接。

第三步:建立TCP连接

现在,浏览器知道了目标服务器的IP地址,它会尝试建立与该服务器的连接。这通常是通过使用TCP(Transmission Control Protocol)的三次握手来实现的。

image.png

  1. 第一次握手 客户端向服务器发送一个SYN(synchronize)报文,告诉服务器它希望与服务器建立连接,同时客户端还会随机生成一个序列号 seq=x。

  2. 第二次握手 服务器接收到客户端的SYN报文后,会回复一个SYN+ACK(synchronize-acknowledgment)报文,表示它已经收到了客户端的请求,并准备好与客户端建立连接。同时服务器也会随机生成一个序列号 seq=y,并且把客户端的序列号加1(即 ack=x+1)作为确认号 ack 发送给客户端。

  3. 第三次握手 客户端收到服务器的SYN+ACK报文后,会再次向服务器发送一个ACK(acknowledgment)报文,表示它已经收到了服务器的确认,并准备好发送数据。同时客户端也会把服务器的序列号加1(即 ack=y+1)作为确认号 ack 发送给服务器。

完成了这个过程之后,客户端和服务器就可以开始正式通信了,并且双方都知道了对方的初始序列号,以便在后续的数据传输中保证数据的可靠性和正确性。

第四步:发送HTTP请求

一旦连接建立完成,浏览器会发送一个HTTP请求给服务器。这个请求中包含了之前解析出的URL信息,以及其他一些头部信息,如请求的方法(GET、POST等)、可选的请求体(对于POST请求)等。

第五步:服务器处理请求

服务器接收到浏览器发送的HTTP请求后,会根据请求的内容进行处理。这可能包括读取文件、查询数据库、执行脚本等操作。一旦服务器处理完成,它会生成一个HTTP响应,其中包含了状态码、响应头部以及可选的响应体。

第六步:浏览器解析渲染

一旦浏览器获取到服务器返回的HTTP响应报文,它就会开始解析报文,读取响应正文中的HTML、CSS、JavaScript等内容,并将这些内容渲染成一张完整的网页。此时页面渲染会经过以下步骤:

  1. 构建 DOM 树

浏览器会通过解析 HTML 文件构建出 DOM(Document Object Model)树。DOM 是指浏览器将 HTML、XML 和 SVG 等文档解析成树形结构的 API。在这个过程中,浏览器会按照 HTML 文件中标签的先后顺序构建节点,并根据节点间嵌套的关系和属性构建出树形结构。

  1. 样式计算

浏览器在构建 DOM 树的同时,还会解析 CSS 文件并计算出每个元素的样式。在这个过程中,浏览器会将 CSS 样式表转换成 CSS 规则树,然后根据规则树和 DOM 树计算出每个元素最终的样式。

  1. 布局(Layout)

布局(或称回流)是指浏览器根据 DOM 树和样式计算结果,计算出每个元素在页面中的位置和大小的过程。在这个过程中,浏览器会根据盒模型和定位方式等计算出每个元素的位置和大小,并建立起元素间的父子关系和兄弟关系等。

  1. 绘制(Painting)

在布局完成后,浏览器会将页面的内容绘制到屏幕上。

第七步:连接结束

当数据传输结束时,会经过TCP四次挥手断开连接。

image.png

  1. 第一次挥手 客户端发起TCP连接关闭请求,发送一个FIN(finishing)报文,告诉服务器它已经完成了所有的数据传输,并准备好关闭连接。此时客户端不能再向服务器发送数据,但可以接收数据。

  2. 第二次挥手 服务器接收到客户端发送的FIN报文后,会回复一个ACK(acknowledgment)报文,表示它已经收到了客户端的请求,并准备好关闭连接。此时服务器可以继续向客户端发送数据,但不能再接收客户端的数据。

  3. 第三次挥手 如果服务器还有数据需要发送给客户端,它会继续发送数据,待数据发送完毕后,会发送一个FIN报文给客户端,告诉客户端它也已经完成了数据传输,并准备好关闭连接。

  4. 第四次挥手 客户端接收到服务器发送的FIN报文后,会回复一个ACK报文,表示它已经收到了服务器的请求,并准备好关闭连接。此时客户端会等待一段时间(等待服务器关闭连接),之后会自动关闭TCP连接,并释放相关的资源。

通过这个过程,客户端和服务器可以协商关闭连接的时机,并确保双方都能够完全关闭连接并释放相关的资源。