从输入 URL 到页面渲染完成，关键链路有哪些阶段？
1. 关键链路阶段#
-
URL 解析
浏览器解析地址（协议、域名、路径、参数等），确认要访问什么资源。 -
浏览器预检查
先检查是否可直接使用本地结果：缓存、Service Worker、HSTS、已有连接复用。 -
DNS 解析
把域名（如example.com）转换成服务器IP地址。 -
建立连接
根据协议建立网络通道：TCP + TLS（HTTP/1.1、HTTP/2）或QUIC（HTTP/3）。 -
发送 HTTP 请求
浏览器发送请求，请求里包含Headers、Cookie等信息。 -
服务端处理并返回首包
服务器处理请求并开始返回数据，直到收到首字节（TTFB）。 -
流式接收 HTML 并发现子资源
浏览器边收 HTML 边解析，同时继续请求 CSS、JS、图片、字体等资源。 -
构建页面模型并执行脚本
构建DOM和CSSOM，执行JS（某些 JS 会阻塞解析和渲染）。 -
生成可渲染结构并计算布局
合成渲染树（Render Tree），做Layout（计算元素大小和位置）。 -
绘制与合成上屏
先Paint（绘制像素），再Composite（图层合成）显示到屏幕，后续继续补齐剩余内容。
2. 专有名词解释#
| 名词 | 解释 |
|---|---|
| URL | 网页地址，如 https://example.com/a?b=1 |
| Service Worker | 网页的本地代理脚本，可拦截请求、做离线缓存 |
| HSTS | 强制使用 HTTPS 的安全策略，防止降级到不安全 HTTP |
| DNS | 域名解析系统，把域名翻译成 IP |
| IP | 服务器在网络中的数字地址 |
| TCP | 可靠传输协议，保证数据按序到达 |
| TLS | 传输加密层，保证通信安全（HTTPS 基础） |
| QUIC | 基于 UDP 的现代传输协议，HTTP/3 使用它 |
| HTTP/1.1、HTTP/2、HTTP/3 | 浏览器与服务器通信协议的不同版本 |
| Headers | 请求/响应附带的元信息（语言、压缩、缓存策略等） |
| Cookie | 浏览器保存的小数据（登录态、会话、偏好） |
| TTFB | Time To First Byte，收到响应首字节的时间 |
| Layout | 计算每个元素的位置和尺寸（回流） |
| Paint | 把文本、颜色、边框等绘制成像素 |
| Composite | 把多个图层合成为最终画面并显示 |
| FCP | 首次内容绘制，用户第一次看到内容 |
| LCP | 最大内容绘制，主内容出现的关键时刻 |
| load | 页面 load 事件触发，通常表示资源基本加载完成 |