带你深入剖析输入URL后的过程！！！

前言

我们在日常使用浏览器的时候，经常会通过在导航栏中输入 URL 来实现网页的跳转，或者说在我们日常开发的时候，会经常通过输入 localhost 来进行检测我们的开发是否正常，而这都是有一个对 URL 解析的过程。那么接下来我来带大家解析一下对于当我们输入URL后，究竟会有什么流程！

URL解析

当我们输入一个URL的时候，浏览器会对其进行解析，因为URL提供了一种统一的方式来定位和访问网络资源。它包含了协议、域名、路径等信息，浏览器通过解析URL可以确定需要请求的资源在哪里以及如何获取。

那么他是如何进行解析的呢，如以下示例：

protocol://domain:port/path?query#fragment

其中，protocol 表示协议（如HTTP、HTTPS），domain 表示主机名或IP地址，port 表示端口号（默认为80），path 表示资源路径，query 表示查询参数，fragment 表示片段标识符。

例如，URL https://www.example.com/path/to/resource?id=123#section1 中，协议是 HTTPS，域名是 www.example.com，路径是 /path/to/resource，查询参数是id=123，片段标识符是 section1。

那么通过以上方法我们就可以完成对URL的解析了。

DNS 解析

当我们对输入的URL进行解析之后，浏览器就会对解析之后的URL进行DNS解析，也就是将域名解析成对应的IP地址的过程。解析的步骤如下：

• 浏览器首先会检查输入的 URL 是否包含协议（如 http:// 或 https://），如果没有，默认会使用 HTTP 协议。
• 然后，浏览器会提取 URL 中的主机名（如 www.example.com）。
• 接下来，浏览器会向 DNS 服务器发送查询请求，以获取该主机名对应的 IP 地址。
• 如果在操作系统的本地缓存中没有找到该IP地址，那么他就会往根域名服务器中查找，如果还没找到那么他就会去COM顶级域名服务器中查找，直到找到该 域名.com 域名服务器后再返回该域名的IP地址
• 因此DNS 服务器将返回相应的 IP 地址，浏览器就能够通过这个 IP 地址与服务器建立连接。

具体步骤如下图所示：

建立TCP连接

当我们进行DNS解析之后，就会与服务器进行TCP连接了，对于TCP连接，它是一种可靠的面向连接的可靠的传输协议，通过三次握手确保了浏览器与服务器之间的连接可靠性。在建立连接的过程中，浏览器和服务器之间进行了一系列的握手和确认，以确保双方都准备好进行数据传输。

TCP三次握手

1. 客户端发送 SYN 报文：

   • 连接的建立始于客户端。当客户端想要与服务器建立连接时，它会发送一个称为 SYN（同步）的 TCP 报文，这个报文中包含了客户端的初始序列号（sequence number）。
   • 客户端选择一个初始的序列号，用来标识数据流中的每个字节，服务器将使用这个序列号来确认接收到的数据。

2. 服务器响应 SYN 报文并发送 ACK 报文：

   • 当服务器接收到客户端发送的 SYN 报文时，它会响应一个 SYN-ACK 报文给客户端。这个 SYN-ACK 报文中包含了服务器的初始序列号，以及对客户端的初始序列号的确认。
   • 服务器也选择一个初始的序列号，用来标识服务器发送的数据流中的每个字节。同时，它对客户端初始序列号的确认表明服务器已经准备好接收客户端发送的数据。

3. 客户端发送 ACK 报文：

   • 最后，客户端收到服务器发送的 SYN-ACK 报文后，它会发送一个 ACK（确认）报文给服务器。这个 ACK 报文不包含任何数据，只是用来确认服务器的 SYN 报文。
   • 一旦服务器收到了客户端发送的 ACK 报文，TCP 连接就建立完成，双方可以开始进行数据传输。

这个三次握手的过程保证了通信双方都能够正确地识别和确认彼此，从而确保了连接的可靠性。如果在任何一次握手过程中出现了问题，如某个报文丢失或延迟，TCP 协议会重新发送相应的报文，直到连接成功建立或超时。这样可以防止网络中出现的任何异常情况导致连接失败或数据不可靠。

TCP四次挥手

当数据将要传输完毕时，将会关闭与服务器的连接。而这就需要进行TCP的四次挥手操作了。其步骤如下：

1. 客户端发送 FIN 报文：

   • 连接的关闭始于客户端。当客户端希望关闭连接时，它会发送一个称为 FIN（结束）的 TCP 报文给服务器。这个 FIN 报文表示客户端不再发送数据，但仍然可以接收数据。
   • 客户端发送 FIN 报文后，进入 FIN_WAIT_1 状态，等待服务器确认。

2. 服务器收到 FIN 报文并发送 ACK 报文：

   • 当服务器接收到客户端发送的 FIN 报文时，它会发送一个 ACK（确认）报文给客户端，表示已经收到了客户端的关闭请求。
   • 同时，服务器可能仍然有未发送完毕的数据需要传输给客户端，因此服务器仍然可以向客户端发送数据。
   • 服务器发送 ACK 报文后，进入 CLOSE_WAIT 状态，等待应用程序关闭连接。

3. 服务器发送 FIN 报文：

   • 当服务器完成了所有数据的传输后，它会发送一个 FIN 报文给客户端，表示服务器也准备关闭连接。
   • 服务器发送 FIN 报文后，进入 LAST_ACK 状态，等待客户端的确认。

4. 客户端收到 FIN 报文并发送 ACK 报文：

   • 客户端收到服务器发送的 FIN 报文后，表示服务器已经不会再向客户端发送数据，但客户端仍然可以向服务器发送数据。
   • 客户端发送一个 ACK 报文给服务器，表示已经收到了服务器的关闭请求，并且客户端也准备好关闭连接。
   • 客户端发送 ACK 报文后，进入 TIME_WAIT 状态，等待可能出现的延迟的报文。

一旦客户端发送了 ACK 报文，服务器收到这个 ACK 报文后就会进入 CLOSED 状态，表示连接已经完全关闭。而客户端在经过 TIME_WAIT 状态后也会进入 CLOSED 状态，表示连接已经彻底关闭。这个四次挥手的过程保证了双方能够安全地关闭连接，并且在关闭后不会再接收到任何残留的数据。

构建HTTP请求

浏览器根据用户输入的 URL 和其他请求信息构建一个 HTTP 请求。这个请求通常包括请求方法（如 GET、POST 等）、请求头部（如 User-Agent、Accept 等）、请求体（如果是 POST 请求，可能会包含表单数据或其他数据）等。

发送HTTP请求

一旦 HTTP 请求构建完成，浏览器就会通过建立的 TCP 连接将请求发送给服务器。发送的过程中，浏览器将请求报文按照 TCP 协议进行分割和传输，确保数据的完整性和可靠性。

聊到HTPP就不得不聊一下HTTP的发展史了

HTTP的发展史

我们都知道HTTP是一种用于传输超文本数据的应用层协议，它是 Web 世界中最重要的协议之一。HTTP 的发展经历了多个阶段，下面本人将通过各个版本的优缺点来讲解一下HTTP的发展史：

1. HTTP/0.9：

   • 优点：

     • 简单易用：HTTP/0.9 非常简单，只支持 GET 请求，响应内容是纯文本的 HTML 页面。

   • 缺点：

     • 功能有限：只支持 GET 方法，无法传输其他类型的数据；没有请求头和响应头等概念，缺乏扩展性和灵活性。

2. HTTP/1.0：

   • 优点：

     • 引入了多种请求方法和状态码，提供了更丰富的功能和更灵活的操作。
     • 支持请求头和响应头，使得客户端和服务器之间可以传递更多的信息。

   • 缺点：

     • 每次请求都需要建立新的 TCP 连接，导致了连接的频繁建立和关闭，性能较低。
     • 无法有效处理并行请求，存在队头阻塞问题，影响了页面加载速度。

3. HTTP/1.1：

   • 优点：

     • 引入了持久连接和管道化等特性，减少了连接建立和关闭的开销，提高了性能。
     • 支持了多种优化技术，如分块传输编码、范围请求、缓存控制等，提升了用户体验。

   • 缺点：

     • 依然使用明文传输，安全性较差。
     • 头部字段过大，占用了较多的带宽资源。

4. HTTP/2：

   • 优点：

     • 引入了多路复用、头部压缩、服务器推送等特性，大幅提高了性能和安全性。
     • 解决了 HTTP/1.x 中的队头阻塞问题，支持并行请求，提高了页面加载速度。

   • 缺点：

     • 虽然 HTTP/2 通过二进制传输和头部压缩减少了数据传输量，但协议本身更加复杂，实现和调试难度增加。

5. HTTP/3：

   • 优点：

     • 基于 QUIC 协议，采用了基于 UDP 的传输方式，解决了 TCP 的队头阻塞问题，进一步提高了性能和安全性。
     • 支持快速连接建立、0-RTT 握手、实时性优化等特性，适用于现代互联网环境下的大规模并发连接和高延迟网络。

   • 缺点：

     • 尚未广泛普及，部署和支持的成本较高。
     • 由于 UDP 协议的特性，可能会面临一些网络层面的问题，如丢包、重排序等。

服务器处理请求

服务器接收到浏览器发送的 HTTP 请求后，会根据请求的内容执行相应的操作。这可能包括查询数据库、处理业务逻辑、读取文件等。服务器根据请求的不同，可能会返回静态内容或者动态生成的内容。

服务器发送响应

服务器处理完请求后，会向浏览器发送 HTTP 响应。响应中包含了状态码、响应头和响应体等信息。响应体中包含了请求的资源，如 HTML、CSS、JavaScript 文件等。

接收HTML文件

当浏览器接收到服务器返回的 HTML 文件时，它会开始解析文件内容。首先，浏览器需要识别文件的字符编码，以确保正确地解析文本内容。然后，浏览器将 HTML 文件解析成一个树形结构，这个结构就是文档对象模型（DOM）也可称为DOM树。DOM 表示了网页的结构和内容，包括 HTML 元素、属性和文本内容等。

解析CSS文件

浏览器接着会解析 HTML 文件中引用的 CSS 文件。它会识别 CSS 文件中的样式规则，并根据这些规则对页面进行渲染并构成CSSOM。这包括了确定每个元素的大小、位置、颜色等样式属性。浏览器会将 CSS 解析后的样式信息应用到相应的 HTML 元素上，以确保页面按照设计进行布局和显示。

执行JS文件

如果 HTML 文件中包含了 JavaScript 文件，浏览器会下载并执行这些文件。JavaScript 是一种脚本语言，它可以操作 DOM、修改页面内容、响应用户事件等。浏览器执行 JavaScript 文件后，可能会修改页面的内容、样式或行为，从而实现丰富的交互和动态效果。

构建页面

构建页面的过程是浏览器将网页内容转换为可视化的过程，它包括了将 DOM 和 CSSOM 合并成渲染树、确定页面布局和样式、以及将页面绘制到屏幕上的多个步骤。这个过程确保了用户能够以可视化的形式访问和与网页进行交互。

1. 构建渲染树 ：

   • 渲染树是由 DOM 结构和 CSS 样式信息组合而成的，它描述了页面上每个可见元素的布局和样式。构建渲染树的过程主要包括以下几个步骤：

     • 合并 DOM 和 CSSOM：浏览器会将解析后的 DOM 树和 CSS 样式表中的样式信息合并，形成渲染树的初始结构。
     • 计算每个元素的样式：浏览器会根据 CSS 规则计算每个元素的最终样式信息，包括盒模型（Box Model）、外边距（Margin）、内边距（Padding）、边框（Border）等。
     • 生成渲染树：经过计算和合并后，浏览器会生成渲染树，其中包含了所有需要渲染到页面上的元素和其对应的样式信息。

2. 页面布局 ：

   • 页面布局是根据渲染树中的信息确定页面上每个元素的位置和大小，以便进行页面的绘制和渲染。布局过程主要包括以下几个步骤：

     • 计算盒模型：浏览器会根据渲染树中每个元素的盒模型信息，计算出每个元素在页面上的实际大小和位置。
     • 确定元素的位置：浏览器会根据元素的布局方式（如流式布局、浮动布局等）和其他因素，确定每个元素在页面中的准确位置。
     • 处理重叠和层叠：如果页面中有重叠或层叠的元素，浏览器会根据层叠上下文（Stacking Context）等规则来确定它们的显示顺序和层级关系。

3. 绘制页面：

   • 绘制页面是将渲染树中的每个元素转换为屏幕上的像素点的过程，以便最终呈现给用户。绘制过程主要包括以下几个步骤：

     • 创建图层：浏览器会将页面分成多个图层，每个图层包含一组相关联的元素，以便更高效地进行绘制和渲染。
     • 对图层进行绘制：浏览器会对每个图层进行绘制操作，包括填充背景色、绘制文本、绘制边框等。
     • 合成图层：最后，浏览器会将所有图层合成为最终的页面图像，并将其显示在屏幕上，呈现给用户。

页面渲染

页面渲染是构建页面后的最后一步，它涉及将构建好的页面内容绘制到用户的屏幕上，以供用户查看和交互。页面渲染的过程包括将页面分成多个图层、对图层进行绘制、合成图层等步骤，以实现快速且流畅的渲染效果。以下是页面渲染的详细过程：

1. 创建图层 ：

   • 浏览器将页面分成多个图层，每个图层包含了一组相关联的元素。图层的创建可以基于多种因素，如元素的层叠关系、动画效果、3D 变换等。将页面分成多个图层可以提高渲染效率，允许浏览器只更新需要变化的部分，而不是整个页面。

2. 绘制图层 ：

   • 一旦图层被创建，浏览器会对每个图层进行绘制操作。这包括了填充背景色、绘制文本、绘制边框、渲染图像等。绘制过程使用 GPU 加速，以提高绘制效率和性能。

3. 合成图层 ：

   • 绘制完成后，浏览器会将所有图层合成为最终的页面图像。合成过程中，浏览器会考虑图层之间的层叠关系、透明度、混合模式等因素，确保最终的页面呈现符合预期的效果。
   • 合成过程中可能会使用硬件加速，如 GPU 加速和硬件合成器，以提高合成的效率和性能。

4. 显示页面 ：

   • 最后，合成后的页面图像会被发送到用户的显示器上进行显示。显示器会根据图像的内容和像素点信息，将页面内容渲染到屏幕上，呈现给用户。这个过程是用户最终看到页面内容的关键步骤。

结语

以上就是本人对于用户输入URL到页面渲染过程的理解，如有不足之处欢迎加以补充。