1. URL 输入与解析
- 输入 URL：用户在浏览器地址栏输入 URL（如
https://www.example.com）。 - URL 解析：浏览器解析 URL，确定协议（如 HTTP 或 HTTPS）、域名（如
www.example.com）和路径（如 /）。
2. DNS 查询
- DNS 缓存检查：浏览器首先检查本地 DNS 缓存，看是否有该域名对应的 IP 地址。
- 操作系统 DNS 缓存：如果浏览器缓存中没有，会检查操作系统的 DNS 缓存。
- 路由器 DNS 缓存：如果仍未找到，会查询路由器的 DNS 缓存。
- ISP DNS 服务器：如果上述缓存中都没有，会向互联网服务提供商（ISP）的 DNS 服务器发送查询请求。
- 递归查询：ISP 的 DNS 服务器进行递归查询，依次查询根 DNS 服务器、顶级域名（TLD）DNS 服务器和权威 DNS 服务器，最终获取域名对应的 IP 地址。
3. TCP/IP 连接建立
- 建立 TCP 连接：浏览器使用获取到的 IP 地址与服务器建立 TCP 连接，通常使用三次握手过程：
- 客户端发送 SYN 包：浏览器向服务器发送一个 SYN（同步）包。
- 服务器响应 SYN-ACK 包：服务器收到 SYN 包后，发送一个 SYN-ACK（同步-确认）包。
- 客户端发送 ACK 包：浏览器收到 SYN-ACK 包后，发送一个 ACK（确认）包，至此 TCP 连接建立。
- IP 寻址与路由：数据包通过路由器和交换机在网络中传输，根据 IP 地址找到目标服务器。
4. 发送 HTTP 请求
- 发送 HTTP 请求：TCP 连接建立后，浏览器通过该连接发送 HTTP 请求，请求方法通常是 GET，请求头中包含浏览器信息、接受的内容类型等。
- HTTPS 协商：如果是 HTTPS 协议，在发送 HTTP 请求之前会进行 TLS/SSL 协商：
- 客户端问候（Client Hello）：浏览器发送支持的加密套件等信息。
- 服务器问候（Server Hello）：服务器选择加密套件，发送数字证书等信息。
- 密钥交换：双方进行密钥交换，建立加密通道。
5. 服务器处理请求
- 服务器接收请求：服务器接收 HTTP 请求，解析请求头和请求体。
- 请求路由与处理：服务器根据请求的 URL 和方法，调用相应的应用程序逻辑进行处理：
- 动态内容生成：如果是动态网页，服务器端代码（如 Node.js、Python、PHP 等）执行，生成动态内容。
- 数据库查询：服务器可能查询数据库，获取所需数据。
- 生成响应：服务器生成 HTTP 响应，包括响应头（如状态码、内容类型等）和响应体（如 HTML 内容）。
6. 接收 HTTP 响应
- 接收响应：浏览器接收服务器返回的 HTTP 响应。
- 处理响应：根据响应状态码（如 200 表示成功，404 表示未找到等），浏览器处理响应内容：
- 解析 HTML：浏览器解析 HTML 内容，构建 DOM 树。
- 加载资源：根据 HTML 中的链接（如 CSS、JavaScript 文件、图片等），浏览器会发起额外的 HTTP 请求加载这些资源：
- CSS 加载：浏览器解析 CSS 文件，构建 CSSOM（CSS Object Model）。
- JavaScript 执行：浏览器解析并执行 JavaScript 代码，可能会动态修改 DOM 或发送额外的网络请求。
- 图片等媒体加载：加载图片、音频、视频等媒体文件。
7. 渲染页面
- 构建渲染树：浏览器结合 DOM 树和 CSSOM，构建渲染树，确定哪些节点需要渲染以及它们的样式。
- 布局（Layout）：计算每个节点的位置和大小，这个过程也称为回流（reflow）。
- 绘制（Paint）：将每个节点绘制到屏幕上，包括文字、颜色、边框等，这个过程也称为重绘（repaint）。
8. 交互与动态更新
- JavaScript 执行：在页面加载过程中和加载完成后，JavaScript 代码可以继续执行：
- 事件处理：为页面元素添加事件监听器，处理用户的交互操作（如点击、滚动等）。
- 动态更新：根据用户操作或定时器等触发的事件，JavaScript 可以动态更新 DOM，浏览器会相应地重新渲染页面部分区域。
- AJAX 请求：通过 JavaScript 发起异步 HTTP 请求（AJAX），获取新数据并更新页面内容，无需重新加载整个页面。
