客户端请求HTTPS接口到页面展示经历了哪些步骤？

### 作用 描述浏览器请求 HTTPS 接口并最终将页面展示给用户的完整链路，涵盖缓存、域名解析、安全连接、HTTP 通信和页面渲染。 ### 原理 1. **检查缓存** - 浏览器先检查本地缓存。 - 如果缓存命中且资源有效，可以直接使用缓存内容，不再发起网络请求。 2. **DNS 域名解析** - 如果缓存未命中，浏览器解析 URL 中的域名。 - 通过 DNS 查询获取服务器对应的 IP 地址。 3. **建立 TCP 连接** - 浏览器根据 IP 地址与服务器建立 TCP 连接。 - 建立连接时需要经过 TCP 三次握手。 4. **进行 TLS 握手** - 如果请求的是 HTTPS，还需要在 TCP 连接基础上进行 TLS 握手。 - TLS 握手用于身份验证、加密算法协商，并建立安全加密通道。 5. **发送 HTTP 请求** - 浏览器通过加密连接向服务器发送 HTTP 请求。 - 请求中可能包含请求方法、请求头、请求体以及 Cookie 等信息。 6. **服务器处理并返回响应** - 服务器处理请求后返回 HTTP 响应。 - 响应中包含状态码、响应头和响应体，页面主文档通常返回 HTML。 7. **解析 HTML 并构建 DOM 树** - 浏览器接收 HTML 后开始解析。 - 根据 HTML 标签构建 DOM 树，表示页面的节点结构。 8. **加载并解析资源** - 浏览器继续加载 CSS、JavaScript、图片等资源。 - CSS 被解析后用于确定元素样式。 - JavaScript 可能会操作 DOM、CSSOM，也可能阻塞或触发页面重新解析和渲染。 9. **合并 DOM 与 CSSOM，生成渲染树** - 浏览器将 DOM 和 CSSOM 合并，生成 Render Tree（渲染树）。 - 渲染树只包含需要显示的节点及其样式信息。 10. **布局 Layout / Reflow** - 浏览器根据渲染树计算每个元素在屏幕上的位置和大小。 - 这一阶段也称为重排。 11. **绘制 Paint** - 浏览器将元素按照可见样式绘制为像素，包括文字、颜色、图片、边框、阴影等。 12. **合成 Composite** - 浏览器将多个绘制层按照正确顺序合并。 - 最终将合成后的内容显示到屏幕上。 13. **动态更新** - 如果 JavaScript 后续修改 DOM 或样式，浏览器可能重新执行样式计算、布局、绘制和合成。 - 页面因此可能发生重排或重绘，直到最终呈现稳定结果。