几乎所有技术岗位的面试都绕不开这样一个问题「当你在浏览器地址栏输入一个 URL 并按下回车到最终看到完整页面中间到底发生了什么」这道题串联起操作系统、计算机网络、DNS、TCP/IP、TLS、HTTP、Web 服务器、浏览器内核、渲染引擎、JavaScript 运行时、缓存、安全、性能优化等几乎所有计算机基础方向。九阶段全景图以https://www.example.com/path/page.html为例URL 解析与规范化解析协议、域名、端口、路径、参数DNS 解析把域名转换为 IP 地址建立 TCP 连接三次握手建立 TLS 连接证书校验和密钥协商发送 HTTP 请求请求行、请求头、请求体服务器处理请求负载均衡、Web 服务器、应用服务器、数据库返回 HTTP 响应状态行、响应头、响应体浏览器解析与渲染DOM、CSSOM、渲染树、布局与绘制连接管理与后续请求连接复用、资源预加载、缓存复用一、阶段一URL 解析与规范化1.1 判断输入是 URL 还是搜索词浏览器先判断输入是 URL 还是搜索词。如果是「天气预报」这样的纯文本交给默认搜索引擎只有合法 URL 才进入网络请求流程。判断规则是否包含协议头或是否符合域名、IP、本地主机名的基本格式。以www.example.com为例浏览器会默认补全为http://现代浏览器通过 HSTS 策略自动升级为https://。1.2 URL 结构拆解textscheme://user:passwordhost:port/path?query#fragment部分说明scheme协议如 https、http、ftp、fileuser:password可选基本认证host域名或 IP如 www.example.comport可选HTTP 默认 80HTTPS 默认 443path资源路径如 /path/page.htmlquery查询参数以 ? 开头fragment片段标识符以 # 开头不随 HTTP 请求发送注意#fragment只被浏览器本地使用用于页面内锚点定位。单页应用常用 hash 实现前端路由正是因为 hash 变化不触发整页刷新。1.3 编码与安全校验非 ASCII 字符、空格和保留字符必须百分号编码。中文域名转换为xn--开头的 Punycode。浏览器还会做黑名单检查、危险协议拦截、内容过滤等安全校验。二、阶段二DNS 解析——把域名翻译成 IP 地址2.1 为什么需要 DNSDNSDomain Name System是互联网的「电话簿」负责域名与 IP 地址的映射。它是一套全球分布、分层管理、带缓存的分布式数据库系统。2.2 多级缓存体系DNS 查询依次检查浏览器 DNS 缓存Chrome 可通过chrome://net-internals/#dns查看操作系统 DNS 缓存Windowsipconfig /displaydns本地 hosts 文件/etc/hosts路由器 DNS 缓存运营商/公共 DNS 服务器缓存如 8.8.8.8、114.114.114.114TTLTime To Live决定记录在缓存中的存活时间也是修改 DNS 后需要等待生效的原因。2.3 一次完整的 DNS 查询过程向本地 DNS 服务器递归解析器发起查询——客户端做递归查询递归解析器代替客户端完成所有工作——从根域名服务器开始迭代查询询问根域名服务器返回.com顶级域服务器地址询问顶级域TLD服务器返回example.com权威名称服务器地址询问权威名称服务器返回 A 记录或 AAAA 记录递归解析器缓存结果并返回核心区分客户端做递归查询把活交给递归解析器递归解析器做迭代查询一级一级往下问。2.4 DNS 记录类型记录类型含义A域名到 IPv4 地址AAAA域名到 IPv6 地址CNAME域名别名MX邮件交换记录TXT文本记录用于 SPF、域名验证NS权威名称服务器SOA起始授权记录2.5 DNS 优化减少域名数量平衡解析次数与连接复用DNS 预解析link reldns-prefetch href//example.comCDN 和智能 DNS根据用户 IP 返回最近节点TTL 权衡短 TTL 故障切换快长 TTL 解析快Anycast 技术多地理位置共享同一 IP三、阶段三TCP 连接的建立3.1 TCP 要解决什么问题IP 协议只负责「尽力而为」地传输不保证顺序、到达、不重复。TCP 在 IP 之上构建面向连接、可靠、基于字节流的传输服务可靠性来自序列号与确认应答、超时重传、滑动窗口、拥塞控制、校验和。3.2 三次握手第一次客户端发送 SYNseqx进入SYN_SENT第二次服务器回复 SYNACKseqy, ackx1进入SYN_RCVD第三次客户端发送 ACKseqx1, acky1双方进入ESTABLISHED为什么是三次而不是两次保证「双方都确认对方收发正常」的最小次数第一次让服务器知道客户端能发第二次让客户端知道服务器能收能发第三次让服务器知道客户端能收。防止历史连接中的重复报文导致服务端错误建立连接。如果只有两次滞留的旧 SYN 突然到达服务器无法判断是否过期只能建连浪费资源。3.3 TCP 报文段结构字段作用源端口 / 目的端口标识通信进程序列号数据第一个字节在字节流中的编号确认号期望收到的下一个字节序列号数据偏移指明首部长度标志位SYN、ACK、FIN、RST、PSH、URG窗口大小流量控制校验和检测传输错误3.4 四次挥手第一次客户端发送 FIN进入FIN_WAIT_1第二次服务器回复 ACK客户端进入FIN_WAIT_2服务器进入CLOSE_WAIT第三次服务器发送 FIN进入LAST_ACK第四次客户端发送 ACK进入TIME_WAIT等待 2MSL 后关闭为什么建立三次、释放四次建立时服务器可在回复 SYN 的同时带上自己的 SYNSYNACK释放时服务器收到 FIN 后可能还有数据要发需先单独回 ACK等数据发完再发 FIN多一次往返。为什么要有 TIME_WAIT保证最后一个 ACK 能到达服务器丢失时可重发让本次连接的所有报文在网络中自然消亡避免干扰新连接四、阶段四TLS 连接的建立4.1 为什么 HTTPS 需要 TLSTLS 位于 TCP 和应用层 HTTP 之间提供三个核心能力机密性、完整性、身份认证。它不改变 HTTP 语义只是在 HTTP 报文外面包了一层安全外壳。4.2 对称加密、非对称加密与数字证书对称加密加解密同一把密钥速度快但密钥分发困难非对称加密公钥加密、私钥解密解决密钥分发但速度慢混合加密握手阶段用非对称加密协商会话密钥数据传输用对称加密数字证书由受信任 CA 签发包含服务器公钥、域名、有效期和 CA 签名4.3 TLS 1.2 握手过程ClientHello客户端发送支持的 TLS 版本、加密套件、随机数ServerHello服务器选择加密套件返回随机数Certificate服务器发送数字证书ServerKeyExchange发送密钥交换参数ServerHelloDone本轮消息发送完毕客户端验证证书并生成主密钥ClientKeyExchange 与 ChangeCipherSpecFinished双方发送加密的 Finished 校验握手完整性TLS 1.2 完整握手需要2 个 RTT左右。4.4 TLS 1.3 的关键改进握手缩短为 1-RTTClientHello 中携带尽可能多的密钥交换参数0-RTT 恢复曾连接过的服务器可直接携带加密应用数据只保留前向安全的密钥交换淘汰 RSA 密钥交换和 CBC 模式更多握手消息被加密证书信息等不再完全明文暴露4.5 证书链与 PKI证书链根 CA 证书 → 中间 CA 证书 → 服务器证书。浏览器验证时会逐级检查签名、有效期、域名匹配、吊销状态。常见术语SAN覆盖的域名列表、OCSP 和 CRL吊销查询。五、阶段五发送 HTTP 请求5.1 HTTP 请求报文结构四个部分请求行、请求头、空行、请求体。textGET /path/page.html HTTP/1.1 Host: www.example.com Connection: keep-alive User-Agent: Mozilla/5.0 Accept: text/html,application/xhtmlxml Accept-Encoding: gzip, deflate, br Cookie: session_idabc1235.2 常见请求方法方法语义幂等GET获取资源是POST创建或提交数据否PUT整体更新资源是DELETE删除资源是HEAD只请求响应头是OPTIONS查询支持的方法是5.3 HTTP/1.1、HTTP/2 与 HTTP/3版本关键特性问题HTTP/1.1Keep-Alive 持久连接同域名连接数限制约 6 个队头阻塞HTTP/2二进制分帧、多路复用、HPACK 头压缩、服务端推送运行在 TCP 上TCP 丢包仍可能影响整个连接HTTP/3基于 UDP 的 QUIC应用层可靠传输连接迁移需要新协议栈支持六、阶段六服务器处理请求6.1 负载均衡四层负载均衡基于 IP 和端口转发性能极高七层负载均衡解析 HTTP、URL 路由、Cookie 会话保持常见算法轮询、加权轮询、最少连接、源地址哈希。配合健康检查自动摘除故障节点。6.2 Web 服务器与应用服务器Web 服务器Nginx、Apache、IIS处理静态资源、反向代理应用服务器运行业务代码解析路由、调用业务逻辑典型架构负载均衡器 → Nginx → 应用服务器 → 数据库/缓存。6.3 应用层处理、缓存与数据库处理链Nginx 转发 → 路由匹配 → 中间件处理 → 鉴权 → 参数校验 → Controller → Service → 缓存/数据库。大部分读请求命中缓存只有少量落到数据库。七、阶段七返回 HTTP 响应7.1 状态码类别含义示例1xx信息提示101 Switching Protocols2xx成功200 OK、204 No Content、206 Partial Content3xx重定向301 永久重定向、302 临时重定向、304 Not Modified4xx客户端错误400、401、403、404、4295xx服务端错误500、502、503、5047.2 关键响应头Content-Type响应体的 MIME 类型Content-Length响应体长度Content-Encoding压缩算法gzip、brCache-Control缓存策略max-age、no-cache、no-storeETag / Last-Modified协商缓存的标识Set-Cookie设置 CookieLocation重定向目标地址7.3 浏览器缓存机制强缓存Cache-Control: max-agexxx或Expires命中则不请求服务器。协商缓存强缓存失效后浏览器携带If-None-MatchETag或If-Modified-SinceLast-Modified请求服务器服务器返回 304 则使用本地缓存返回 200 则返回新内容。八、阶段八浏览器解析与渲染8.1 构建 DOM 树浏览器解析 HTML遇到非法标签会做容错处理最终构建出DOM 树。8.2 构建 CSSOM 树解析 CSS构建CSSOM 树。CSS 会阻塞渲染因为渲染树需要 CSSOM 和 DOM 一起构建。8.3 构建渲染树DOM CSSOM →渲染树Render Tree。渲染树只包含可见元素display: none的元素不进入渲染树visibility: hidden的元素会进入。8.4 布局Layout / Reflow计算每个节点的几何信息位置、大小。8.5 绘制Paint把渲染树转换为屏幕上的像素。8.6 合成Composite将多个图层合并最终显示到屏幕上。8.7 JavaScript 执行script默认会阻塞 HTML 解析defer延迟执行等 HTML 解析完成后按顺序执行async异步下载下载完成后立即执行不保证顺序8.8 回流与重绘回流Reflow几何属性变化宽高、位置重新计算布局代价大重绘Repaint外观属性变化颜色、背景不重新计算布局优化原则尽量减少回流能用重绘解决的不用回流能用合成解决的不用重绘。九、阶段九连接管理与后续请求连接复用HTTP/1.1 的 Keep-Alive、HTTP/2 的多路复用资源预加载link relpreload、link relprefetch、link reldns-prefetch缓存复用强缓存、协商缓存CDN静态资源分发到边缘节点十、总结与面试答题思路回答这道题时可以按下面的层次组织先给全景图URL 解析 → DNS → TCP → TLS → HTTP 请求 → 服务器处理 → HTTP 响应 → 浏览器渲染 → 连接管理。重点展开DNS 递归/迭代查询、TCP 三次握手、TLS 握手、HTTP 缓存、浏览器渲染管线。体现深度解释「为什么」而不只是「是什么」例如为什么三次握手、为什么 TIME_WAIT、为什么 TLS 1.3 更快。结合工程CDN、负载均衡、缓存策略、性能优化手段。主动引导如果某个方向你更擅长可以主动展开把面试节奏抓在自己手里。
