🌐 从输入 URL 到页面显示：全过程详解

整个过程可划分为 5 大阶段，像一场精密的“数字接力赛”：
用户输入->DNS解析->TCP连接->HTTP请求/响应->浏览器渲染

第一阶段：DNS 解析 —— “把名字翻译成地址”

💡 类比：你想去“老张家火锅”，但只知道店名，得先查地图找到具体门牌号（IP 地址）。
浏览器缓存：先看自己有没有记过这个域名的 IP（比如刚访问过）。
系统缓存：查本地 hosts 文件
路由器缓存：问问家里的路由器是否知道。
ISP DNS 服务器：向你的网络运营商（如电信）的 DNS 服务器查询。
递归查询（若未命中）：
先问 根域名服务器（.）：“.com 的服务器在哪？”
再问 顶级域服务器（.com）：“baidu.com 的权威服务器是谁？”
最后问 权威 DNS 服务器（baidu.com）：“你的 IP 是多少？”
拿到 IP，并缓存一段时间（TTL 控制）。

第二阶段：建立 TCP 连接 —— “打通可靠通道”

💡 类比：打电话前先确认对方在线：“喂？听得见吗？”
三次握手（确保双方收发能力正常以及同步序列号）：
客户端 → 服务器：SYN=1, seq=x（“我想连你！”）
服务器 → 客户端：SYN=1, ACK=1, seq=y, ack=x+1（“我准备好了，你呢？”）
客户端 → 服务器：ACK=1, ack=y+1（“收到，开始吧！”）
✅ 补充：
“三次握手可以防止历史连接突然到达造成资源浪费，两次握手会有上述问题”

第三阶段：发送 HTTP 请求 —— “正式下单”

💡 类比：在餐厅对服务员说：“我要一份毛肚、两碗米饭！”
浏览器构造 HTTP 请求报文（包含 Method、Path、Headers、Cookie 等）
通过已建立的 TCP 连接发送给服务器
请求经过层层封装：
应用层：HTTP
传输层：加 TCP 头（端口、序号）
网络层：加 IP 头（源/目的 IP）
链路层：加 MAC 头（通过 ARP 获取下一跳 MAC 地址）
✅ 加分项：
提 “ARP 协议用于 IP → MAC 地址转换”
说 “数据包经交换机（看 MAC）、路由器（看 IP）逐跳转发”

第四阶段：服务器处理 & 返回响应

服务器收到请求，Web 服务解析
可能：
直接返回静态文件（HTML/CSS/JS）
调用后端逻辑（查数据库、调微服务）
构造 HTTP 响应（状态码 200、响应头、HTML 内容）
通过 TCP 连接原路返回
✅ 加分项：
提 “状态码含义”（200 成功，404 未找到，500 服务器错误）
说 “响应可能分块传输（Chunked Encoding）”

第五阶段：浏览器渲染页面 —— “组装并展示”

💡 类比：拿到食材和菜谱，自己动手做一桌菜！
解析 HTML → 构建 DOM 树
解析 CSS → 构建 CSSOM 树
合并 DOM + CSSOM → 生成 Render Tree
布局（Layout）：计算每个元素位置大小
绘制（Paint）：将像素画到屏幕上
遇到 JS/CSS/图片 → 发起新请求（重复上述流程）
✅ 加分项（前端/全栈岗必提）：
关键渲染路径（Critical Rendering Path）
DOMContentLoaded vs load 事件区别
“页面慢不一定是后端慢，可能是 DNS、网络或前端阻塞”

🔚 最后：断开连接（可选）

数据传完后，通过 TCP 四次挥手 断开连接（优雅关闭）

总结

“当我在浏览器输入 https://www.baidu.com 并回车后，主要经历五个阶段：
第一，DNS 解析：浏览器先查缓存，再向 DNS 服务器递归查询，把域名转成 IP 地址；
第二，建立连接：通过 TCP 三次握手建立可靠通道，如果是 HTTPS 还要 TLS 握手加密；
第三，发送请求：浏览器封装 HTTP 请求，经网络层层转发到服务器；
第四，服务器响应：后端处理请求，返回 HTML 等资源；
第五，浏览器渲染：解析 HTML/CSS 构建 DOM/CSSOM，布局绘制，最终呈现页面。
整个过程中，任何一环出问题（如 DNS 污染、TCP 丢包、JS 阻塞）都可能导致页面打不开或加载慢。这也是我们做性能优化需要关注全链路的原因。”