Lazy loaded image
技术探索
计网丨从在浏览器输入 URL 到页面显示，到底发生了什么？
字数 1833阅读时长≈ 5 分钟
2025-10-12
type
Post
status
Published
date
Oct 12, 2025
slug
network5
summary
tags
技术探索
category
icon
password
本文串联包含多级缓存、HTTPS加解密、微服务与RPC内部调用、浏览器关键渲染路径以及连接池复用等工程细节。

一、 URL 解析与 DNS 寻址：不仅是“域名变 IP”

当你在浏览器地址栏敲下回车的那一刻，旅程就开始了。浏览器首先要对 URL 进行规范化解析，提取出协议（如 https）、域名和请求路径。接着，它需要把人类易读的域名翻译成机器可识别的 IP 地址。
但真实的 DNS 查询远比想象中精妙：
  1. 多级缓存机制： 在真正发起网络请求前，系统会进行多轮拦截：浏览器缓存 -> 操作系统缓存 (hosts文件) -> 路由器缓存 -> ISP（运营商）DNS 缓存。绝大多数高频网站在这一步就已经拿到了 IP。
  1. DNS Prefetch： 现代浏览器会在解析 HTML 时，自动通过 <link rel="dns-prefetch"> 提前预热后续需要的域名。
  1. 安全与加速： 为了防止 DNS 劫持，现代浏览器和系统正逐步普及 DoH (DNS over HTTPS)。同时，最终解析出来的 IP 通常不是服务器源站，而是基于 Anycast（任播）技术的 CDN 边缘节点 IP。

二、 TCP 连接与 TLS 握手：构筑安全的物理通道

拿到目标服务器的 IP 后，网络层正式登场。
  • TCP 三次握手： 确保双向通信能力，同步序列号，建立可靠的传输层连接。
  • TLS 握手（HTTPS 核心）： 在 TCP 握手后，如果采用 HTTPS，必须进行 TLS 协商（如 TLS 1.2 需要 2-RTT，而现代 TLS 1.3 优化到了 1-RTT，甚至支持 0-RTT 恢复会话）。通过非对称加密安全地产出“对称会话密钥”，兼顾了绝对安全与极致性能。
  • (架构思考)：如果底层采用的是基于 UDP 的 HTTP/3 (QUIC 协议)，则会把建连和加密握手合二为一，彻底消灭 TCP 带来的队头阻塞隐患。

三、 发送 HTTP 请求与缓存协商：网络世界的“暗战”

建立好加密通道后，浏览器开始组装 HTTP 请求报文（请求行、Header、Body）并发送。但在把请求打向后端之前，缓存策略会先进行一次拦截：
  • 强缓存： 检查 Cache-Control 或 Expires。如果没过期，直接从本地缓存读取，不走网络，极速返回。
  • 协商缓存： 如果强缓存失效，浏览器会带着 If-None-Match (Etag) 或 If-Modified-Since 发起请求。服务器对比后发现资源未变，直接返回 304 Not Modified，只传输状态码不传 Body，极大节省带宽。

四、 服务端处理与微服务调度：后端的全景透视

请求穿透 CDN 和代理后，正式到达后端集群。这是一个典型的微服务协同作战过程：
在真实的大厂微服务架构中：
  1. 流量首先经过 WAF（防火墙） 过滤恶意攻击。
  1. 到达 Nginx / API 网关，进行 SSL 卸载和反向代理。
  1. 网关将外部 HTTP 请求转换为内部高性能的 RPC 调用（如基于 HTTP/2 多路复用的 Dubbo 协议或 gRPC），分发给底层的各个微服务（用户、商品、库存等）。
  1. 微服务读写 MySQL / Redis，完成复杂的业务逻辑计算，再将结果原路组装，通过网关以标准 HTTP 响应报文的形式吐回给浏览器。

五、 浏览器渲染引擎：前端的性能战场

当响应报文安然送达浏览器后，前端的压轴大戏——浏览器渲染正式上演：
  1. 构建 DOM 树与 CSSOM 树： 浏览器一边解析 HTML 生成 DOM 树，一边解析 CSS 生成 CSSOM 树。
  1. 生成渲染树 (Render Tree)： 将 DOM 树与 CSSOM 树结合，剔除不可见节点（如 display: none），形成最终的渲染树。
  1. Layout (回流/布局) 与 Paint (重绘)： 计算每个节点在设备视口中的确切几何位置并绘制到屏幕上。
⚠️ 【性能阻塞点】
  • JS 阻塞： 渲染过程中一旦遇到 <script> 标签，HTML 解析会立即挂起（因为 JS 随时可能操作 DOM）。因此，优化时通常将脚本置底，或使用 async / defer 属性。
  • 回流优化： 频繁修改 DOM 的几何属性（如宽高等）会导致昂贵的回流（Reflow）。现代前端常使用 transform 动画来触发 GPU 硬件加速，避开重排。

六、 断开连接的误区：为什么往往“不挥手”？

在传统的教科书里，页面加载完后，客户端和服务端会通过 TCP 四次挥手切断连接。但在线上实际环境中，往往不会立刻挥手：
为了复用昂贵的 TCP 和 TLS 建连成本，从 HTTP/1.1 开始默认开启了 Connection: keep-alive（长连接），而在 HTTP/2 和 HTTP/3 中更是借助多路复用机制，让同一个连接长久存活，源源不断地并行加载后续的图片、CSS、JS 等子资源。只有当触发了超时时间（Timeout）或者用户直接关闭整个 Tab 页时，才会真正发起四次挥手，释放连接资源。

结语

“从输入 URL 到页面渲染”这道题，之所以能成为面试界的“终极缝合怪”，是因为它没有标准答案的死角。它完美串联了计算机网络协议、操作系统缓存、后端微服务架构、数据库读写以及浏览器内核渲染的全链路知识。
回到首页
目录