1. 用户输入 URL

• 地址栏输入： 用户在浏览器的地址栏中输入一个 URL（如https://www.example.com）并按下回车键。
• 自动补全： 浏览器可能会根据历史记录、书签等信息自动补全 URL。

2. URL 解析

• 协议解析： 浏览器解析 URL 中的协议部分（如 https），确定使用的协议。
• 域名解析： 浏览器解析 URL 中的域名部分（如www.example.com）。
• 路径解析： 浏览器解析 URL 中的路径部分（如/path/to/resource）。
• 查询参数解析： 浏览器解析 URL 中的查询参数部分（如?query=param）。
• 片段标识符解析： 浏览器解析 URL 中的片段标识符部分（如#section）。

3. DNS 解析

• 缓存检查： 浏览器首先检查本地 DNS 缓存中是否有该域名的 IP 地址。
• 操作系统缓存检查： 如果本地缓存中没有，浏览器会向操作系统请求。
• DNS 服务器查询： 操作系统会检查自己的缓存，如果没有，则会向配置的 DNS 服务器发送请求。
• 递归查询： DNS 服务器可能会进行递归查询，最终返回域名对应的 IP 地址。
• 返回 IP 地址： DNS 解析完成后，返回域名对应的 IP 地址（如 93.184.216.34）。

4. 建立 TCP 连接

• 三次握手： 浏览器使用传输控制协议（TCP）与服务器建立连接。这个过程称为三次握手：
  • SYN： 浏览器发送一个 SYN（同步）包到服务器，表示请求建立连接。
  • SYN-ACK： 服务器回应一个 SYN-ACK（同步-确认）包，表示同意建立连接。
  • ACK： 浏览器发送一个 ACK（确认）包，连接建立。

5. TLS 握手（如果使用 HTTPS）

• 客户端问候： 浏览器发送一个 ClientHello 消息，包含支持的加密算法、TLS 版本等信息。
• 服务器问候： 服务器回应一个 ServerHello 消息，选择加密算法和 TLS 版本，并发送服务器证书。
• 证书验证： 浏览器验证服务器证书的有效性和可信度。
• 密钥交换： 浏览器和服务器交换密钥，生成会话密钥。
• 完成握手： 双方使用会话密钥加密通信，完成 TLS 握手。

6. 发送 HTTP 请求

• 请求构建： 浏览器构建一个 HTTP 请求，包含请求方法（如 GET、POST）、请求头（如 User-Agent、Accept）等信息。
• 发送请求： 浏览器通过建立的 TCP 连接将 HTTP 请求发送到服务器。

7. 服务器处理请求

• 请求接收： 服务器接收到 HTTP 请求后，解析请求头和请求体。
• 路由处理： 服务器根据请求的 URL 路径和方法，将请求路由到相应的处理程序。
• 生成响应： 处理程序生成响应内容，通常包括 HTML、CSS、JavaScript 等资源。
• 发送响应： 服务器将生成的 HTTP 响应发送回浏览器。

8. 浏览器接收响应

• 响应解析： 浏览器接收到 HTTP 响应后，解析响应头和响应体。
• 状态码检查： 浏览器检查 HTTP 状态码（如 200、404、500）以确定请求是否成功。
• 重定向处理： 如果状态码是 3xx，浏览器会根据响应头中的 Location 字段发起新的请求。

9. 渲染页面

• HTML 解析： 浏览器开始解析 HTML 文档，构建 DOM（文档对象模型）树。

  • Tokenization： 将 HTML 内容分解成一系列的 Token。
  • Tree Construction： 将 Token 转换成 DOM 节点，并构建 DOM 树。

• CSS 解析： 浏览器解析 CSS 文件，构建 CSSOM（CSS 对象模型）树。

  • CSS Tokenization： 将 CSS 内容分解成一系列的 Token。
  • CSS Parsing： 将 Token 转换成 CSS 规则，并构建 CSSOM 树。

• JavaScript 执行： 浏览器执行 JavaScript 代码，可能会修改 DOM 和 CSSOM。

  • 下载和解析： 下载并解析 JavaScript 文件。
  • 执行： 执行 JavaScript 代码，可能会操作 DOM 和 CSSOM。

• 渲染树构建： 浏览器将 DOM 和 CSSOM 合并成渲染树。

  • Render Tree Construction： 将 DOM 和 CSSOM 合并，生成渲染树。

• 布局计算： 浏览器计算每个元素的布局信息（位置和大小）。

  • Layout： 计算每个节点的几何信息（位置和大小）。

• 绘制： 浏览器将渲染树的内容绘制到屏幕上。

  • Paint： 将每个节点绘制到屏幕上。

10. 资源加载

• 并行加载： 浏览器会并行加载 HTML 中引用的资源（如 CSS、JavaScript、图片）。

  • Preload： 解析并应用 CSS 文件。
  • Preload： 下载并执行 JavaScript 文件。
  • 图片： 下载并显示图片。

• 阻塞与非阻塞： CSS 和 JavaScript 可能会阻塞渲染，浏览器会根据资源的优先级进行加载和执行。

11. 交互处理

• 事件绑定： 浏览器为页面元素绑定事件处理程序。

  • Event Listeners： 为 DOM 元素绑定事件监听器。

• 用户交互： 用户可以与页面进行交互，浏览器会响应用户的操作（如点击、输入）。

  • HTML 解析： 处理用户事件（如点击、输入）。
  • DOM Updates： 根据用户操作更新 DOM。

12. 持续优化

• 缓存： 浏览器会缓存静态资源，以便下次请求时加快加载速度。
  • HTTP Cache： 缓存 HTTP 响应，以减少重复请求。
• 预加载与预取： 浏览器可能会预加载或预取资源，以优化用户体验。
  • Preload： 提前加载关键资源。
  • Prefetch： 提前加载可能需要的资源。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24