1. 说说地址栏输入 URL 敲下回车后发生了什么?

目录一、 第一层完整流程总览先给面试官一个框架感二、 第二层逐阶段深度解析阶段一URL 解析阶段二DNS 解析把域名变成 IP阶段三建立 TCP 连接三次握手阶段四TLS 握手HTTPS 独有阶段五发送 HTTP 请求阶段六服务器处理并返回响应阶段七浏览器解析与渲染关键大头1. 解析 HTML构建 DOM 树2. 解析 CSS构建 CSSOM 树3. 合并生成渲染树Render Tree4. 布局Layout / Reflow5. 绘制Paint6. 合成Composite7. JavaScript 执行阶段八连接关闭四次挥手三、 精华加分点汇总展现高阶认知四、 面试简答模板建议直接背诵这道题是面试中的王炸综合题它几乎能把你对网络、浏览器、操作系统的所有知识串联起来。回答得好能让面试官感受到你的系统思维和技术广度。以下是完整的深度解析和面试答题模板一、 第一层完整流程总览先给面试官一个框架感这道题我习惯把它分为五个阶段URL 解析 → 网络通信 → 服务端处理 → 浏览器渲染 → 交互阶段。这样开场会让面试官感受到你有结构化思维而不是零散地背知识点。二、 第二层逐阶段深度解析阶段一URL 解析URL 合法性检查浏览器判断输入的是合法 URL 还是搜索关键词如果不是合法 URL会使用默认搜索引擎发起搜索协议补全没有指定协议时浏览器默认补全https://HSTS 检查如果网站在浏览器的 HSTS 预加载列表中强制使用 HTTPS阶段二DNS 解析把域名变成 IP查询顺序从快到慢依次是浏览器 DNS 缓存 ↓ 未命中 操作系统缓存hosts 文件 ↓ 未命中 路由器缓存 ↓ 未命中 本地 ISP 的 DNS 服务器递归查询 ↓ 未命中 根域名服务器 → 顶级域名服务器 → 权威域名服务器 ↓ 返回目标 IP 地址加分点DNS 查询结果有TTL缓存时效如果是 CDN 加速的网站DNS 返回的 IP 可能是 CDN 节点的 IPDNS 本身基于UDP协议端口号 53阶段三建立 TCP 连接三次握手拿到 IP 后浏览器和服务器进行 TCP 三次握手客户端 → SYN → 服务端 客户端 ← SYN ACK ← 服务端 客户端 → ACK → 服务端作用确认双方收发能力正常同步初始序列号ISN加分点如果是HTTPSTCP 连接建立后还要进行TLS 握手见下方如果之前有缓存的连接keep-alive可以直接复用阶段四TLS 握手HTTPS 独有① 客户端发送支持的 TLS 版本、加密套件列表、随机数 A ② 服务端返回选定的加密套件、证书含公钥、随机数 B ③ 客户端验证证书合法性CA 链验证 ④ 客户端生成随机数 C用服务端公钥加密后发送 ⑤ 双方根据随机数 A B C 生成对称会话密钥 ⑥ 后续通信使用对称加密握手完成加分点TLS 1.3 将握手缩短到1-RTT甚至支持 0-RTT 恢复证书验证需要检查有效期、域名匹配、CA 签名、吊销状态OCSP阶段五发送 HTTP 请求TCP 连接建立后浏览器构建并发送 HTTP 请求GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Chrome/xxx Accept: text/html Cookie: sessionIdxxx加分点发送前会检查强缓存Cache-Control、Expires如果命中强缓存直接返回本地资源不会发出请求如果协商缓存有效会携带If-None-Match/If-Modified-Since阶段六服务器处理并返回响应请求可能先经过负载均衡器如 Nginx转发到后端应用服务器处理业务逻辑可能查询数据库、调用微服务返回 HTTP 响应HTTP/1.1 200 OK Content-Type: text/html; charsetUTF-8 Cache-Control: no-cache ETag: abc123 !DOCTYPE html...阶段七浏览器解析与渲染关键大头这一阶段能展现你对浏览器工作原理的掌握程度。1. 解析 HTML构建 DOM 树遇到script非 defer/async会阻塞解析遇到 CSS 会阻塞渲染但不阻塞解析2. 解析 CSS构建 CSSOM 树3. 合并生成渲染树Render Tree不包含display: none的节点4. 布局Layout / Reflow计算每个元素的几何位置和大小5. 绘制Paint将渲染树转换为屏幕像素6. 合成Composite对含有transform、opacity等属性的图层进行 GPU 合成这是性能优化的关键层7. JavaScript 执行可能触发 DOM 变更可能引发重排Reflow或重绘Repaint阶段八连接关闭四次挥手数据传输完成后TCP 四次挥手关闭连接客户端 → FIN → 服务端 客户端不再发送 客户端 ← ACK ← 服务端 客户端 ← FIN ← 服务端 服务端不再发送 客户端 → ACK → 服务端加分点HTTP/1.1 默认keep-alive可以复用连接不立即关闭HTTP/2 多路复用让多个请求共享一个 TCP 连接三、 精华加分点汇总展现高阶认知方向加分内容缓存层面强缓存命中时甚至不会发起 TCP 连接性能层面预连接preconnect、预加载preload可提前完成 DNS/TCPCDN 层面DNS 解析可能返回 CDN 节点 IP而非源站安全层面HSTS、证书链、OCSP 验证渲染层面关键渲染路径CRP优化、避免渲染阻塞HTTP 版本HTTP/2 多路复用大幅减少连接数四、 面试简答模板建议直接背诵面试官说说地址栏输入 URL 敲下回车后发生了什么回答模板我把这个过程分为五个大阶段来解释。第一阶段是 URL 解析。浏览器首先判断输入是合法 URL 还是搜索词同时检查 HSTS 预加载列表决定是否强制 HTTPS。第二阶段是网络寻址也就是 DNS 解析。浏览器依次检查自身缓存、系统缓存、hosts 文件如果都没有命中再通过递归查询向 DNS 服务器一层层查到权威域名服务器最终拿到目标 IP。如果网站接入了 CDN这里返回的通常是 CDN 节点 IP。第三阶段是建立连接。浏览器和服务器进行 TCP 三次握手建立可靠连接。如果是 HTTPS还要在此基础上进行 TLS 握手完成证书验证和对称密钥协商。值得一提的是如果之前已有可复用的 keep-alive 连接会直接跳过握手阶段。第四阶段是请求与响应。浏览器构建 HTTP 请求发送给服务端。发出请求前还会检查强缓存如果命中则直接返回本地资源不走网络。服务端收到请求后经过业务处理返回 HTTP 响应响应中包含状态码、响应头和响应体。第五阶段是浏览器渲染。拿到 HTML 后浏览器开始解析 DOM 树和 CSSOM 树合并成渲染树经过布局、绘制和合成阶段最终展示到屏幕上。期间如果遇到同步脚本会阻塞解析CSS 会阻塞渲染。JS 执行过程中如果修改了 DOM 或样式还可能触发重排和重绘。整个过程的优化方向主要集中在 DNS 预解析、连接复用、缓存策略、关键渲染路径优化以及减少阻塞资源这几个层面。这个回答能覆盖网络、安全、缓存、渲染四个维度展现系统思维的同时也给面试官留下了可以继续深挖的空间非常利于后续展开讨论。