电脑输入网站 到显示，中间步骤

实际案例：访问 https://www.google.com

1. 输入：google.com → 自动补全为 https://www.google.com/

2. HSTS：Google 在预加载列表中，强制 HTTPS

3. DNS：查询 www.google.com → 返回 CDN IP（如 142.250.74.196）

4. TCP：与服务器建立连接

5. TLS：快速 TLS 1.3 握手（可能 0-RTT）

6. HTTP/2：使用 HTTP/2 连接

7. 请求：发送 GET 请求

8. 响应：Google 返回简化的 HTML

9. 渲染：浏览器快速渲染搜索页面

10. 异步加载：JS 加载其他组件和广告

⚡ 性能优化相关步骤

关键性能指标
DNS 查询时间：50-200ms

TCP 连接时间：100-200ms（RTT 影响）

TLS 握手时间：200-400ms

TTFB（首字节时间）：200-500ms

内容下载时间：依赖文件大小和带宽

渲染时间：100-1000ms

现代优化技术
HTTP/2：多路复用、头部压缩、服务器推送

HTTP/3：基于 QUIC，0-RTT 连接

CDN：边缘缓存，减少延迟

预加载/预连接

html
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="preload" href="style.css" as="style">
Service Worker：离线缓存

资源提示：prefetch、prerender

🔍 详细时间线示例

javascript
// 使用 Performance API 查看
performance.timing
{
navigationStart: 0,
unloadEventStart: 0,
unloadEventEnd: 0,
redirectStart: 0,
redirectEnd: 0,
fetchStart: 0,
domainLookupStart: 5, // DNS开始
domainLookupEnd: 45, // DNS结束（40ms）
connectStart: 45, // TCP开始
connectEnd: 145, // TCP结束（100ms）
secureConnectionStart: 85, // TLS开始
requestStart: 200, // 发送请求
responseStart: 350, // 收到首字节（150ms）
responseEnd: 400, // 响应结束
domLoading: 420, // 开始解析DOM
domInteractive: 800, // DOM解析完成
domContentLoadedEventStart: 810,
domContentLoadedEventEnd: 820,
domComplete: 1200, // DOM处理完成
loadEventStart: 1200, // load事件开始
loadEventEnd: 1250 // 页面完全加载
}