模块导航： 总入口 · 总纲与方法 · 后端场景 · AI与算法工程 · 国企与金融 · 网络问答

---

7. 从输入 URL 到页面展示的完整过程（热度 609 · 核心必考）

Q： 浏览器输入 https://www.example.com 回车后，到页面渲染完成，经历了什么？

A：

分层时序（完整链）

1. URL 解析与导航判断： 判断搜索词还是 URL；补全协议与端口。若 HSTS 命中，http 也会强制升 https。
2. DNS 解析： 浏览器缓存 → OS 缓存/hosts → LDNS → 根/顶级/权威（递归+迭代），拿到 A/AAAA（CNAME 可能多跳）。可能 dns-prefetch 并行解析。详见第 8 题。
3. 建立 TCP 连接： 向 IP:443 发 SYN，协商 ISN/MSS/窗口缩放/SACK/时间戳等；路径可能经 NAT、代理、CDN。
4. TLS 握手（HTTPS）： ClientHello（版本、套件、随机数、SNI）→ ServerHello+证书 → 校验 → 密钥协商 → Finished。TLS1.2 约 2-RTT，1.3 为 1-RTT/0-RTT。DNS 在 TCP 之前，TLS 在 TCP 之后、HTTP 之前。详见第 11、12 题。
5. 发送 HTTP 请求： 请求行+头+（可选）body；可能带 Cookie、If-None-Match/If-Modified-Since。HTTP/2 同连接多流；HTTP/3 走 QUIC。
6. 服务器处理并返回响应： 反向代理（Nginx）→ 应用 → 依赖服务；返回状态码+头+体（200/304/301/404/502/504），可能跟踪 Location 重定向。
7. 浏览器渲染： HTML→DOM，CSS→CSSOM，合成渲染树；Layout→Paint→Composite。并发拉取静态资源并执行 JS（可能重排重绘）；注意 CSS 阻塞渲染、JS 默认阻塞解析，可用 async/defer/preload。
8. 连接处置： Connection: keep-alive（HTTP/1.1 默认）则复用，否则四次挥手关闭；HTTP/2/3 长期复用同一条连接。

设计动机

• 为什么 DNS 必须最先： IP 网络按地址转发，不知 IP 无法建 TCP。
• 为什么 TLS 在 TCP 之后： TLS 报文本身需要可靠字节流承载（HTTP/3 例外：QUIC 内置加密）。
• 为什么渲染要分树： 关注点分离——结构（DOM）与样式（CSSOM）分离后才能计算「哪些节点可见、几何位置如何」。

常见追问

追问 1：DNS、TCP、TLS、HTTP 的顺序能调换吗？

• 答题要点： 不能随意调换。DNS → 拿到 IP；TCP → 可靠信道；TLS → 在可靠信道上安全；HTTP → 业务请求。HTTP/3 将 TCP+TLS+HTTP 用 QUIC 融合，但逻辑上仍是「地址 → 安全多路传输 → 应用协议」。

追问 2：页面很慢，你怎么从网络层排查？

• 答题要点： ① curl -w/Chrome DevTools Network 看 DNS/TCP/TLS/TTFB 各段耗时；② dig/nslookup 查 DNS；③ ping/mtr/traceroute 看可达与路径；④ Wireshark 看握手、重传、证书；⑤ 服务器侧 ss、Nginx access log（$request_time、$upstream_response_time）。

追问 3：HTTP/2 多路复用如何优化「并发请求」环节？

• 答题要点： HTTP/1.1 浏览器对同域并发 6～8 条 TCP，仍可能应用层队头阻塞；HTTP/2 单连接多流并发，头部 HPACK 压缩，减少连接数与冗余。但 TCP 层丢包仍阻塞所有流（HTTP/3 用 QUIC 解决）。

易错点

易错说法	纠正
「先 TCP 后 DNS」	必须先 DNS 得到 IP
「TLS 在 DNS 之前」	TLS 在 TCP 握手之后
「HTTPS 请求明文」	证书验证后业务数据走对称加密
「解析 HTML 完再请求 CSS/JS」	预解析可并行发现资源；CSS/JS 可能阻塞渲染
「keep-alive 是 HTTP/2 发明」	HTTP/1.1 已默认持久连接

与选择题对照

• 主库 150： 第 90 题（访问 https 基本流程）、第 94 题（输入 URL 最先=DNS）、第 124 题（协议顺序 DNS→TCP→TLS→HTTP）、第 74/91 题（HTTPS 443）、第 38/39/136/137 题（ping/tracert 排障）。
• 补题 16： 无 1:1 直接题；补-12（建连必要性）支撑「TCP 握手」环节。
• 口述联动： 选择题考「最先是什么/顺序」；面试必须能讲完 8 步并主动提 HTTP/2、渲染树、TTFB。

工程 / 抓包背景

• curl：

  curl -w "dns:%{time_namelookup} tcp:%{time_connect} tls:%{time_appconnect} ttfb:%{time_starttransfer} total:%{time_total}\n" -o /dev/null -s https://www.example.com

• DevTools： Network 面板 Waterfall 看各阶段；Performance 看渲染。
• dig/nslookup/nslookup -type=CNAME；openssl s_client -connect host:443 -servername host 看证书与 TLS 版本。
• mtr/traceroute；服务端 Nginx $request_time vs $upstream_response_time 区分网关与后端耗时。
• ss： 观察 ESTABLISHED/TIME_WAIT 数量，判断连接复用是否生效。

---