浏览器输入 www.quanxiaoha.com，回车之后发生了什么？

面试考察点

  1. 网络全链路理解：面试官不仅仅是想知道你背了几步流程，更是想看你对从应用层到网络层的整个数据传输过程是否有整体认知，能不能把 DNS、TCP 三次握手、HTTP 请求/响应这些知识点串成一条线。

  2. 细节深度：考察你是否真正理解每个阶段背后的原理，比如 DNS 递归/迭代查询的区别、TCP 为什么是三次握手而不是两次、HTTPS 的 TLS 握手流程等。很多候选人只能说出 "DNS 解析 → TCP 连接 → 发请求" 这种粗粒度流程，一追问细节就露馅。

  3. 工程实践意识：是否有 CDN 加速、浏览器缓存、DNS 缓存这些真实场景下的性能优化意识，而不只是教科书式的八股文。

核心答案

先说结论，整个过程可以概括为 6 大阶段：

阶段 说明
① URL 解析 浏览器解析输入内容，补全协议，拆分 URL 各部分
② DNS 解析 域名 → IP 地址（递归 + 迭代查询）
③ TCP 三次握手 浏览器与服务器建立可靠连接
④ TLS 握手（HTTPS） 若是 HTTPS，还需完成密钥协商
⑤ 发送 HTTP 请求 & 接收响应 请求 → 服务器处理 → 响应回传
⑥ 浏览器渲染 解析 HTML/CSS/JS，构建 DOM 树，渲染页面

下面逐个阶段拆开讲。

深度解析

一、URL 解析

你输入 www.quanxiaoha.com 按下回车后，浏览器第一件事不是去发请求，而是先 "理解" 你到底想访问什么。

  • 浏览器会检查输入内容是一个 URL 还是一个 搜索关键词。如果输入的不是合法的 URL 格式，浏览器会把它当作搜索关键词，跳转到默认搜索引擎。
  • 如果识别为 URL，浏览器会自动补全协议，变成 https://www.quanxiaoha.com/（现在大多数网站都默认 HTTPS 了）。
  • 然后解析 URL 的各个组成部分：协议（https）、域名（www.quanxiaoha.com）、端口（443）、路径（/）。

还有一个很多人忽略的细节——浏览器会先检查缓存。在真正发请求之前，浏览器会依次查找：

  1. 浏览器自身的 DNS 缓存（Chrome 地址栏输入 chrome://net-internals/#dns 可以看到）
  2. 操作系统 DNS 缓存（Windows 下可以用 ipconfig /displaydns 查看）
  3. Hosts 文件（本地硬编码的域名映射）

如果命中缓存，直接拿到 IP，跳过 DNS 解析阶段。

二、DNS 解析

DNS（Domain Name System）就是把域名翻译成 IP 地址的 "电话簿"。计算机之间通信靠的是 IP 地址，域名只是为了方便人类记忆。

上图展示了 DNS 解析的完整流程。整个过程涉及两种查询方式：

  • 递归查询：浏览器 → 本地 DNS 服务器这一段。浏览器只问一次，本地 DNS 服务器负责把最终结果带回来。你可以理解为 "你帮我去查，查到了告诉我"。

  • 迭代查询：本地 DNS 服务器 → 根域名服务器 → 顶级域名服务器 → 权威域名服务器这一段。本地 DNS 服务器每次只拿到 "下一跳" 的地址，需要自己继续去问。你可以理解为 "我不知道，但你可以去问某某某"。

几个关键点提一下：

  • DNS 查询的 默认端口是 53，通常使用 UDP 协议（速度快，报文小），只有响应数据超过 512 字节时才会切换到 TCP。
  • 实际生产环境中，本地 DNS 服务器（比如运营商的 DNS）通常也有缓存，很多时候根本不需要一路查到根域名服务器。
  • DNS 解析结果会被 逐级缓存，缓存时间由 TTL（Time To Live）控制。

三、TCP 三次握手

拿到 IP 地址后，浏览器要跟服务器建立连接。HTTP 是基于 TCP 的，TCP 是可靠的传输协议，建立连接需要 三次握手：

上图展示了 TCP 三次握手的完整过程。三个步骤各自的作用：

  • 第一次握手（SYN）：客户端发送 SYN 报文，seq=x，进入 SYN_SENT 状态。这一步告诉服务器："我想跟你建立连接。"

  • 第二次握手（SYN + ACK）：服务器收到后，返回 SYN + ACK 报文，seq=y, ack=x+1，进入 SYN_RCVD 状态。这一步的含义是："我收到你的请求了，同时我也确认要跟你建立连接。"

  • 第三次握手（ACK）：客户端发送 ACK 报文，seq=x+1, ack=y+1，双方进入 ESTABLISHED 状态。这一步告诉服务器："好的，我确认你的确认。"

为什么是三次，不是两次？

这个追问频率极高。核心原因是 防止历史连接（已失效的连接请求）初始化了连接。

举个场景：客户端发了一个 SYN 请求，但因为网络拥堵滞留了。客户端超时后又发了一个新的 SYN。这时候第一个 SYN 终于到达了服务器。如果只有两次握手，服务器收到后就直接建立连接、分配资源了——但客户端根本不需要这个连接。三次握手的话，客户端收到服务器的 SYN+ACK 后发现不对劲（确认号不匹配），会发 RST 拒绝掉这个历史连接。

说白了，三次握手是为了确保双方都确认了对方的收发能力正常。

四、TLS 握手（HTTPS）

如果目标网站是 HTTPS（现在基本是标配），TCP 连接建立后还需要进行 TLS 握手，协商加密密钥，确保后续通信安全。

TLS 1.2 握手需要 4 次往返，TLS 1.3 优化到 1-2 次往返，性能提升明显。这块可以展开很多，但不在本题核心范围内，知道有这么一步就行。

五、发送 HTTP 请求 & 接收响应

连接建好了，终于可以发 HTTP 请求了。

上面是 HTTP 请求和响应的基本交互过程。几个要点：

  • 请求方法：打开网页通常是 GET 请求。
  • 请求头：会带上 Host（目标域名）、User-Agent（浏览器标识）、Cookie（登录态等）、Accept（能接受的响应格式）等信息。
  • 服务器处理：服务器收到请求后，可能需要查询数据库、调用其他微服务、渲染模板等，最终拼装出 HTML 响应。
  • 响应状态码：200 表示成功，301/302 表示重定向（浏览器会自动跳转到新地址），404 表示页面不存在，500 表示服务器内部错误。

这里还有一个容易被忽略的环节——如果服务器返回 301/302 重定向，浏览器会重新走一遍上述流程（重新解析 DNS、建立连接、发请求），只不过这次是请求重定向后的新地址。比如你输入 quanxiaoha.com，服务器可能 301 到 https://www.quanxiaoha.com。

六、浏览器渲染

拿到 HTML 响应后，浏览器的工作才刚刚开始。渲染过程大致如下：

上图展示了浏览器渲染的核心流程，几个关键概念：

  • DOM 树：浏览器把 HTML 解析成一棵由节点组成的树形结构。
  • CSSOM 树：CSS 样式也被解析成一棵树。
  • 渲染树（Render Tree）：DOM 树和 CSSOM 树合并，得到每个可见节点及其样式信息。注意，display: none 的元素不会出现在渲染树中。
  • 布局（Layout/Reflow）：计算渲染树中每个节点的确切位置和大小。
  • 绘制（Paint）：把布局好的节点像素绘制到屏幕上。

JS 的特殊性：遇到 <script> 标签时，浏览器会暂停 HTML 解析，先下载并执行 JS（因为 JS 可能修改 DOM）。这也是为什么我们常说 "把 JS 放在 </body> 前面" 或 "加 defer/async 属性"，避免阻塞页面渲染。

渲染过程中如果遇到图片、CSS、JS 等静态资源的引用，浏览器会 并发发起多个 HTTP 请求 去加载它们（通常同一域名下并发数限制在 6 个左右）。

如果页面用到了 CDN，这些静态资源的请求会指向 CDN 节点，而不是源站，从而加速加载。

面试高频追问

  1. DNS 解析用的是什么协议？为什么？

    默认用 UDP（端口 53），因为 DNS 查询报文通常很小（不超过 512 字节），UDP 不需要建立连接，速度快。当响应数据超过 512 字节时（比如区域传送），会切换到 TCP。

  2. 为什么 TCP 需要四次挥手来断开连接？

    因为 TCP 是全双工的，每个方向都需要单独关闭。一方发送 FIN 表示 "我没数据要发了"，另一方回复 ACK 确认。但另一方可能还有数据要继续发，所以 FIN 和 ACK 不一定同时发。

  3. HTTP/1.1、HTTP/2、HTTP/3 有什么区别？

    • HTTP/1.1：文本协议，每个请求独占一个 TCP 连接（持久连接可以复用，但必须排队）。
    • HTTP/2：二进制协议，支持多路复用（同一个连接上并行多个请求）、头部压缩、服务器推送。
    • HTTP/3：基于 QUIC（UDP），彻底解决了 TCP 层面的队头阻塞问题，连接建立更快。

  4. 什么是 CDN？它在这个流程中起到什么作用？

    CDN（Content Delivery Network）把静态资源缓存到全球各地的边缘节点。浏览器请求静态资源时，DNS 会把域名解析到离用户最近的 CDN 节点，而不是源站。这样用户拿资源的延迟更低，源站压力也更小。

  5. 如果网站用了 HTTPS，TLS 握手是在哪一步发生的？

    在 TCP 三次握手之后、发送 HTTP 请求之前。TLS 是应用层协议，运行在 TCP 之上。

常见面试变体

  • "从输入 URL 到页面展示，中间经历了哪些步骤？"
  • "请描述一次完整的 HTTP 请求过程。"
  • "浏览器打开一个网页，背后的网络交互过程是怎样的？"
  • "DNS 解析的递归查询和迭代查询有什么区别？"
  • "TCP 三次握手和四次挥手的流程是什么？"

记忆口诀

六大阶段：一解（URL 解析）二查（DNS 查询）三握（TCP 三次握手）四密（TLS 握手）五请求（HTTP 请求响应）六渲染（浏览器渲染页面）。

总结

这道题本质上考的是你对 计算机网络全链路 的理解深度。从 DNS 解析到 TCP 连接，从 HTTP 请求到浏览器渲染，每个环节都能展开聊。面试时建议先快速给出 6 大阶段的概览，让面试官知道你有全局视野，再挑 1-2 个你擅长的环节深入展开。别上来就死磕细节，面试官可能只是想听个流程，追问了再深入不迟。