域名解析
输入网址之后，首先，浏览器需要解析输入的域名，通过 DNS（Domain Name System）服务查找该域名对应的 IP 地址。DNS 解析过程会遵循以下缓存查询顺序：
- 浏览器自身的 DNS 缓存
- 操作系统级别的 DNS 缓存
- 路由器中的 DNS 缓存
- 互联网服务提供商(ISP)的 DNS 缓存
如果上述缓存层次均未命中，则 ISP 的 DNS 服务器作为 DNS 递归器发起 DNS 查找流程，它将依次询问根域名服务器、顶级域名服务器（如.com），直至找到目标域名（例如maps.google.com）所对应的权威 DNS 服务器，并获取其 IP 地址。
举例来说，当需要查询 maps.google.com 的 IP 地址时，DNS 解析过程会按以下步骤进行：
- 首先，本地 DNS 解析器向根域名服务器发起查询请求。
- 根域名服务器指引解析器到负责
.com域名的权威服务器。 - 解析器接着联系
.com顶级域名服务器以继续查询。 -
.com域名服务器将解析请求指向google.com的权威域名服务器。 - 最终，
google.com的域名服务器包含着maps.google.com的记录，并回复其对应的 IP 地址。
下图是一个 DNS 查询流程的示意图：
建立 TCP 连接
当浏览器得知服务器的 IP 地址后，它会通过 TCP（传输控制协议）与服务器建立连接以进行数据交换。这一建立连接的过程被称为“TCP/IP 三次握手”，具体步骤如下：
- 客户端（浏览器）向服务器发送一个 SYN（同步序列编号）数据包，表达出建立连接的请求。
- 如果服务器上的端口处于监听状态且能接受新的连接，服务器则回复一个 SYN/ACK（同步并确认）数据包给客户端。
- 客户端接收到 SYN/ACK 数据包后，再向服务器发送一个 ACK（确认）数据包。
经过这三步交互，TCP 连接成功建立起来，双方即可开始安全可靠的数据传输过程。
浏览器发起 HTTP(S) 请求
当浏览器向服务器发送一个 HTTP 请求时，它会包含几个关键部分：请求方法（如 GET）、目标网址以及一系列的头信息。这些头信息包括但不限于 User-Agent（浏览器类型）、Accept（接受的数据类型）、Connection: Keep-Alive（保持连接状态）、Host（服务器域名）和Cookie（存储的用户信息）等。
服务器处理请求并返回
服务器在接收到请求后进行处理，然后通过 HTTP response 将数据返回，这个响应中包括了 HTTP 状态码以及一系列附加信息，如 Content-Encoding（内容编码方式）、Cache-Control（指导浏览器如何缓存页面）和 Cookie等头部信息。
以下是 HTTP 状态码的意义：
- 1XX：信息性消息，表明服务器已接收到请求，并正在进行进一步处理。
- 2XX：成功，表示客户端的请求已被服务器成功处理。
- 3XX：重定向，要求客户端采取进一步行动才能完成请求，通常涉及到页面跳转或其他位置资源的获取。
- 4XX：客户端错误，指出客户端提交的请求包含错误，如语法错误或请求无法满足。
- 5XX：服务器错误，意味着服务器在处理请求过程中遇到了问题或无法完成请求。
浏览器渲染页面
服务器发送给浏览器的响应内容是一个 HTML 文件。浏览器读取这个文件后，首先将其转换成“DOM 树”，这是一个能够用 JavaScript 操作并用于页面渲染过程的、反映 HTML 文件结构的内部树状模型。紧接着，在获取和解析 CSS 文件之后，会构建另一棵树状结构——“CSSOM 树”，它用来表示所有样式规则。
DOM 树 和 CSSOM 树 组合成 render 树 (渲染树)，渲染树只包含了渲染页面所需的节点。
下图是将 DOM 树 和 CSSOM 树 结合成 render 树 的示意图：
浏览器渲染网页的过程简化为以下步骤：
- 首先，浏览器解析 HTML 文档并构建 DOM 树，其中不参与布局和渲染的如 script、meta、link 等元素会被暂时忽略。
- 然后，处理 CSS 样式信息创建 CSSOM 树。
- DOM 树与 CSSOM 树结合生成 Render 树，这个过程中只包含可见节点，并应用相应的样式规则。
- 接下来，在 Render 树上进行布局（Layout 或 Reflow），计算每个元素的具体尺寸、位置、颜色等视觉表现属性。
- 最后，依据布局结果进行绘制（Paint 或 Repaint），即将各个元素的实际像素内容按照计算出的位置与样式显示在屏幕上，完成网页内容的可视化呈现。
整个流程越高效，网页初次加载时的渲染速度就越快。
网友评论