从输入 URL 到浏览器呈现页面的整体流程

在开始之前，推荐大家阅读一篇文章《React 文件下载组件 File Download》https://cloud.tencent.com/developer/article/2471856，该文章介绍了 React 文件下载组件，涵盖基本实现、问题解决、高级用法及提升用户体验的相关内容，有兴趣的朋友可以去了解下。

一、URL 解析

当我们在浏览器的地址栏中输入 URL 后，浏览器首先要做的就是对这个 URL 进行解析。URL 通常包含了协议、域名、端口号（如果非默认端口）、路径以及查询参数等部分。例如，对于一个常见的 URL“https://www.example.com:8080/products?id=123”，“https” 就是协议，表明了通信所遵循的规则，这里是超文本传输安全协议；“www.example.com” 为域名，它对应着互联网上特定服务器的地址标识；“8080” 是端口号，用于区分同一服务器上不同的服务应用程序；“/products” 是路径，指向服务器上特定资源所在的位置；“?id=123” 则属于查询参数，用于向服务器进一步传递相关的数据需求。浏览器会把 URL 拆解成这些不同的组成部分，以便后续准确地发起请求。

二、缓存检查

在正式向服务器发起请求之前，浏览器会先查看自身的缓存。浏览器缓存是一种存储机制，它会保存之前访问过的网页资源，比如 HTML 文件、图片、样式表、脚本文件等。浏览器会根据 URL 以及相关的缓存策略（如缓存的有效期、是否允许缓存等条件）来判断本地缓存中是否已经存在该请求对应的可用资源。如果缓存中存在并且依然有效，那么浏览器就可以直接从缓存中提取资源进行页面渲染，这样能极大地提高网页加载速度，减少不必要的网络请求。

三、DNS 解析

如果缓存中没有可用资源，下一步就是进行 DNS（域名系统）解析。由于网络通信是基于 IP 地址来进行的，而我们输入的是方便人类记忆的域名，所以需要通过 DNS 解析将域名转换为对应的 IP 地址。浏览器会首先查看本地的 DNS 缓存，如果没有命中，就会向操作系统配置的 DNS 服务器发送请求。DNS 服务器会按照一定的层级结构（从根域名服务器、顶级域名服务器到权威域名服务器等）逐步查询，最终找到域名对应的 IP 地址并返回给浏览器。例如，对于域名 “www.example.com”，经过 DNS 解析后可能会得到类似 “192.168.1.100” 这样的 IP 地址，有了 IP 地址，浏览器才能准确地与目标服务器建立连接。

四、建立 TCP 连接

得到目标服务器的 IP 地址后，浏览器就开始着手建立与服务器之间的 TCP（传输控制协议）连接。TCP 是一种可靠的、面向连接的网络传输协议，它通过三次握手的过程来确保连接的可靠性。首先，浏览器向服务器发送一个带有 SYN（同步序列号）标志的数据包，表明想要建立连接的意图；服务器收到后，会回复一个带有 SYN 和 ACK（确认应答）标志的数据包，表示同意建立连接并且对浏览器的请求进行确认；最后，浏览器再发送一个带有 ACK 标志的数据包给服务器，完成三次握手，此时 TCP 连接正式建立成功，双方可以开始进行数据传输了。

五、发送 HTTP 请求

在 TCP 连接建立好之后，浏览器会按照 HTTP（超文本传输协议）规范向服务器发送请求。请求中包含了请求方法（如 GET 用于获取资源、POST 用于提交数据等）、请求的 URL 路径、HTTP 版本以及各种请求头信息（例如，包含浏览器的相关标识、可接受的内容类型、语言偏好等）。如果有需要提交的数据（比如在表单提交的情况下），也会按照相应的格式放在请求体中。例如，浏览器发送一个 GET 请求去获取某个网页的 HTML 文件时，请求头中可能会表明 “Accept: text/html”，表示期望服务器返回 HTML 格式的文本内容。

六、服务器处理请求并返回响应

服务器接收到浏览器发送的 HTTP 请求后，会根据请求的内容进行相应的处理。它会查找对应的资源，如果资源存在且符合权限等要求，就会按照 HTTP 协议组装响应信息。响应信息同样包含了响应状态码（比如 200 表示请求成功、404 表示资源未找到、500 表示服务器内部错误等）、响应头（包含了诸如内容类型、内容长度、缓存策略等信息）以及响应体（也就是实际要返回给浏览器的网页内容，如 HTML 文档、图片二进制数据等）。然后通过已经建立好的 TCP 连接将响应发送回浏览器。

七、浏览器接收并解析响应

浏览器收到服务器返回的响应后，首先会查看响应状态码，判断请求是否成功。如果状态码是 200 等表示成功的代码，就会开始解析响应内容。对于 HTML 文档，浏览器会按照 HTML 的语法规范进行解析，构建出 DOM（文档对象模型）树，它代表了网页的结构。同时，浏览器会解析 CSS 样式表，构建出 CSSOM（CSS 对象模型），用于确定网页元素的样式呈现规则。之后，结合 DOM 树和 CSSOM，浏览器会生成渲染树，渲染树中只包含了需要在屏幕上显示的节点以及它们的样式信息，去除了那些如<script>标签、不可见的元素等不需要渲染的部分。

八、页面渲染与显示

最后一步就是根据渲染树进行页面的渲染和显示了。浏览器会按照渲染树中节点的布局和样式信息，将各个元素在屏幕上的相应位置进行绘制，比如文本的排版、图片的展示、按钮等交互元素的呈现等。在这个过程中，浏览器还会处理页面中的脚本代码（通常是 JavaScript），脚本可能会动态地修改 DOM 结构、样式或者进行一些交互逻辑的实现，浏览器会按照脚本的执行顺序和逻辑不断更新页面的显示效果，直到整个页面完整地呈现在我们眼前。