實際案例：訪問 https://www.google.com

1. 輸入：google.com → 自動補(bǔ)全為 https://www.google.com/

2. HSTS：Google 在預(yù)加載列表中，強(qiáng)制 HTTPS

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

4. TCP：與服務(wù)器建立連接

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

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

7. 請求：發(fā)送 GET 請求

8. 響應(yīng)：Google 返回簡化的 HTML

9. 渲染：瀏覽器快速渲染搜索頁面

10. 異步加載：JS 加載其他組件和廣告

? 性能優(yōu)化相關(guān)步驟

關(guān)鍵性能指標(biāo)
DNS 查詢時間：50-200ms

TCP 連接時間：100-200ms（RTT 影響）

TLS 握手時間：200-400ms

TTFB（首字節(jié)時間）：200-500ms

內(nèi)容下載時間：依賴文件大小和帶寬

渲染時間：100-1000ms

現(xiàn)代優(yōu)化技術(shù)
HTTP/2：多路復(fù)用、頭部壓縮、服務(wù)器推送

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

CDN：邊緣緩存，減少延遲

預(yù)加載/預(yù)連接

html
<link rel="preconnect" >
<link rel="dns-prefetch" >
<link rel="preload" href="style.css" as="style">
Service Worker：離線緩存

資源提示：prefetch、prerender

?? 詳細(xì)時間線示例

javascript
// 使用 Performance API 查看
performance.timing
{
navigationStart: 0,
unloadEventStart: 0,
unloadEventEnd: 0,
redirectStart: 0,
redirectEnd: 0,
fetchStart: 0,
domainLookupStart: 5, // DNS開始
domainLookupEnd: 45, // DNS結(jié)束（40ms）
connectStart: 45, // TCP開始
connectEnd: 145, // TCP結(jié)束（100ms）
secureConnectionStart: 85, // TLS開始
requestStart: 200, // 發(fā)送請求
responseStart: 350, // 收到首字節(jié)（150ms）
responseEnd: 400, // 響應(yīng)結(jié)束
domLoading: 420, // 開始解析DOM
domInteractive: 800, // DOM解析完成
domContentLoadedEventStart: 810,
domContentLoadedEventEnd: 820,
domComplete: 1200, // DOM處理完成
loadEventStart: 1200, // load事件開始
loadEventEnd: 1250 // 頁面完全加載
}