标准答案
- 先解析 URL，判断协议、域名、端口、路径和查询参数，并检查浏览器缓存、HSTS、Service Worker 等可能影响请求的环节。
- 如果需要网络请求，浏览器会做 DNS 解析，建立 TCP 连接，HTTPS 还要完成 TLS 握手。
- 浏览器发送 HTTP 请求，服务端返回 HTML、状态码、响应头和响应体。
- 浏览器解析 HTML 生成 DOM，解析 CSS 生成 CSSOM，遇到脚本、样式、图片、字体等资源时按规则加载和阻塞。
- DOM 和 CSSOM 生成渲染树后，浏览器进行布局、绘制和合成，最后把页面显示到屏幕上。
题目解析
这道题要按阶段回答，不要只说 DNS、TCP、HTTP 三件事。前端面试还会关注解析和渲染链路。
关键资源会影响首屏。同步脚本可能阻塞 HTML 解析，CSS 会影响渲染，图片和字体会影响 LCP、CLS 和视觉稳定性。
实际排查性能问题时，要结合 Network、Performance、Timing API 和 Web Vitals 看瓶颈在哪一段。
代码示例
可以用 Navigation Timing 粗略查看导航、请求和文档加载阶段的耗时。
JavaScript
const [entry] = performance.getEntriesByType('navigation')
console.log({
dns: entry.domainLookupEnd - entry.domainLookupStart,
tcp: entry.connectEnd - entry.connectStart,
request: entry.responseStart - entry.requestStart,
response: entry.responseEnd - entry.responseStart,
domReady: entry.domContentLoadedEventEnd - entry.startTime,
load: entry.loadEventEnd - entry.startTime
})常见误区
- 只背网络阶段，忽略 HTML 解析、CSSOM、布局、绘制和合成。
- 认为 DOMContentLoaded 等于页面完全可用，忽略图片、字体和异步数据。
- 把所有首屏慢都归因于接口慢，没有区分网络、渲染和资源优先级问题。