当你在浏览器中输入一个 URL 地址到网页呈现出来，中间经历了以下复杂而精彩的过程：

一、用户输入 URL

用户在浏览器地址栏中输入 URL（Uniform Resource Locator，统一资源定位符），比如 “https://www.example.com”。

二、DNS 解析

1. 浏览器首先检查自身的缓存中是否有该 URL 对应的 IP 地址。如果有，直接使用该 IP 地址进行后续步骤。
2. 如果浏览器缓存中没有，浏览器会查询操作系统的缓存，看是否有该 URL 的 IP 地址记录。
3. 若操作系统缓存中也没有，操作系统会向本地 DNS 服务器发起查询请求。本地 DNS 服务器通常由你的网络服务提供商（ISP）提供。
4. 本地 DNS 服务器也可能没有该 URL 的 IP 地址记录，这时它会向根 DNS 服务器发起查询。根 DNS 服务器会告知本地 DNS 服务器负责该顶级域名（如 “.com”）的 DNS 服务器地址。
5. 本地 DNS 服务器接着向顶级域名 DNS 服务器查询，顶级域名 DNS 服务器又会告知负责该二级域名（如 “example.com”）的 DNS 服务器地址。
6. 本地 DNS 服务器继续向二级域名 DNS 服务器查询，最终获得该 URL 对应的 IP 地址，并将其返回给操作系统，操作系统再将 IP 地址返回给浏览器。
   
   

三、建立 TCP 连接（对于 HTTP/1.1 及以下版本通常需要建立连接，HTTP/2 和 HTTP/3 有所不同）

1. 浏览器获得 IP 地址后，使用该 IP 地址和目标服务器的端口号（通常 HTTP 为 80 端口，HTTPS 为 443 端口）尝试建立 TCP 连接。
2. 首先进行 “三次握手”：

• 第一次握手：客户端（浏览器）向服务器发送一个带有 SYN（同步）标志的数据包，请求建立连接，并随机生成一个初始序列号（seq=x）。
• 第二次握手：服务器接收到客户端的数据包后，向客户端发送一个带有 SYN 和 ACK（确认）标志的数据包，表示服务器同意建立连接，并确认收到了客户端的请求。服务器也随机生成一个初始序列号（seq=y），同时将客户端的序列号加 1 后作为确认号（ack=x+1）。
• 第三次握手：客户端接收到服务器的数据包后，向服务器发送一个带有 ACK 标志的数据包，表示客户端确认收到了服务器的同意，并确认服务器的序列号。客户端将服务器的序列号加 1 后作为确认号（ack=y+1）。

四、发送 HTTP 请求

1. TCP 连接建立成功后，浏览器向服务器发送 HTTP 请求报文。请求报文包含请求方法（如 GET、POST 等）、请求 URL、HTTP 版本号、请求头（包含各种元数据，如用户代理、接受的内容类型等）和请求体（如果有）。

五、服务器处理请求

1. 服务器接收到 HTTP 请求后，根据请求的 URL 和方法进行相应的处理。
2. 如果是静态资源请求（如 HTML 文件、图片、CSS 文件、JavaScript 文件等），服务器直接从文件系统中读取相应的文件，并将其返回给浏览器。
3. 如果是动态资源请求（如 PHP、JSP、ASP.NET 等动态网页），服务器会执行相应的脚本或程序，生成动态内容，并将其返回给浏览器。在这个过程中，服务器可能会与数据库进行交互，获取数据并进行处理。

六、服务器返回 HTTP 响应

1. 服务器处理完请求后，向浏览器发送 HTTP 响应报文。响应报文包含 HTTP 版本号、状态码（如 200 表示成功、404 表示未找到资源等）、响应头（包含各种元数据，如内容类型、内容长度等）和响应体（即请求的资源内容）。

七、浏览器解析渲染页面

1. 浏览器接收到 HTTP 响应后，首先解析响应头，获取响应的内容类型、编码方式等信息。
2. 如果响应的内容是 HTML 文件，浏览器会开始解析 HTML 文档：

• 构建 DOM 树：浏览器逐行解析 HTML 代码，将标签转换为 DOM（Document Object Model，文档对象模型）节点，并构建成一棵 DOM 树。
• 下载并解析 CSS：浏览器会发现 HTML 文档中引用的 CSS 文件，并发送请求下载这些文件。下载完成后，浏览器解析 CSS 代码，构建 CSSOM（CSS Object Model，CSS 对象模型）。
• 构建渲染树：结合 DOM 树和 CSSOM，浏览器构建渲染树，渲染树只包含需要显示在页面上的节点和对应的样式信息。
• 布局：浏览器根据渲染树进行布局计算，确定每个节点在屏幕上的位置和大小。
• 绘制：最后，浏览器根据布局结果，将页面绘制到屏幕上。

3. 如果响应的内容是图片、视频等其他资源，浏览器会根据资源的类型进行相应的处理，如显示图片、播放视频等。

至此，网页就完整地呈现在用户面前了。