在地址栏输入 URL 之后：从回车到页面出现发生了什么

你在浏览器里输入或补全一个 URL 并回车后，背后是一连串相对独立、又彼此衔接的步骤：解析 URL → 解析域名 → 建立连接 → 安全握手（HTTPS）→ 发 HTTP 请求 → 收响应 → 解析与渲染页面，中间还可能命中缓存、拉起并行子资源请求。下面按时间顺序串起来，便于建立整体图景（细节深度以「能指导排查」为准，不替代各协议 RFC 全文）。

1. 浏览器先「理解」你要访问谁

• 地址栏里的字符串会被解析成 URL 结构：协议（https:）、主机（域名或 IP）、端口（省略时用默认：HTTP 80、HTTPS 443）、路径、查询串、片段（# 后一般不发往服务器，由前端路由处理）。
• 若只输入 example.com，浏览器通常会自动补全为 https://example.com/（具体行为与浏览器设置、HSTS 等有关）。

2. DNS：把域名变成 IP

• 计算机之间通信需要 IP 地址。浏览器通过操作系统提供的解析器发起 DNS 查询（可能经本地缓存 → 路由器 / ISP → 递归解析器 → 权威 DNS）。
• 得到 IPv4 / IPv6 后，后续连接都针对该地址（CDN 场景下，不同地区可能解析到不同边缘节点）。

3. 建立 TCP 连接（可靠传输通道）

• HTTPS 默认连 443 端口（未显式写端口时）。
• 客户端与服务器进行 TCP 三次握手（SYN → SYN-ACK → ACK），在两端之间建立一条面向字节流的可靠连接。
• 若使用 HTTP/3（QUIC），底层不再是传统「TCP + TLS」这一条老路，而是基于 UDP 的 QUIC，握手与加密模型不同，但「先连通再传应用数据」的直觉仍类似。

4. TLS 握手（HTTPS）：加密与身份校验

在 HTTPS 下，HTTP 报文跑在 TLS 之上，大致会经历（简化）：

1. 客户端发 Client Hello（支持的算法、扩展等）。
2. 服务器返回 Server Hello、证书链，必要时要求客户端证书（一般网站不要求）。
3. 双方协商出会话密钥，之后应用数据对称加密传输。
4. 浏览器会校验证书是否由可信 CA 签发、域名是否匹配、是否在有效期内等；失败则出现证书错误拦截页。

5. 发送 HTTP 请求

• 浏览器构造 HTTP 请求：如 GET /path HTTP/1.1，带上 Host、User-Agent、Accept、Cookie（同站策略下）等头。
• HTTP/2：同一条连接上可多路复用多个请求；HTTP/3：在 QUIC 连接上承载类似语义。
• 若是首次访问或需刷新校验，可能带 条件请求（If-None-Match / If-Modified-Since），服务器可返回 304 以配合缓存。

6. 服务端与链路中间设备

请求路径上常见环节（视部署而定）：

最终浏览器收到一个 HTTP 响应：状态码（200、301、302、404…）、响应头（Content-Type、Cache-Control、Set-Cookie…）、响应体（HTML、重定向指令等）。

7. 重定向与「再请求」

• 若返回 301/302/307/308 且带 Location，浏览器会**再发起一次（或多次）**请求到新 URL（注意循环重定向与 HTTPS 升级）。
• HSTS 等机制可能让浏览器在发请求前就强制使用 HTTPS，减少明文跳转风险。

8. 拿到 HTML 之后：解析与渲染主文档

对典型网页，响应体首先是 HTML 文本：

1. 词法 / 语法解析 → 构建 DOM 树。
2. 遇到 <link rel="stylesheet">、<style> → 拉取并解析 CSS，构建 CSSOM。
3. DOM + CSSOM → 渲染树 → 布局（Layout/Reflow） → 绘制（Paint） → 合成（Composite）。
4. 遇到 <script>（默认阻塞解析）可能暂停 DOM 构建直至下载并执行（除非 async/defer 等）；因此脚本位置与属性会影响首屏时间。

9. 子资源：并行请求与阻塞关系

• HTML 中 <img>、<script>、<link>、字体、XHR/fetch 等会触发更多 HTTP 请求（HTTP/2 多路复用、浏览器对同域并发数仍有限制）。
• 同源策略限制跨域读响应；CORS 在服务端允许时放行跨域读取。
• 图片解码、字体加载失败等会影响是否重绘、是否闪动。

10. 缓存：可能根本「不发完整请求」

• 浏览器 HTTP 缓存：根据 Cache-Control / ETag / Last-Modified，可能直接用磁盘/内存缓存，或发验证请求得 304。
• Service Worker（若注册）：可拦截请求、走离线缓存（与纯「回车打开一页」路径相关但非必然）。

11. 小结：一条时间线心智模型

输入 URL
  → 解析 URL
  → DNS 解析出 IP
  → TCP（或 QUIC）连通
  → TLS（HTTPS）握手
  → 发 HTTP(S) 请求
  → 收响应（可能重定向再请求）
  → 解析 HTML / CSS / 执行 JS
  → 请求子资源
  → 布局与绘制 → 你看到页面

排查「打不开」「慢」「样式错」「接口跨域」时，可以大致对应到：DNS / 网络 / 证书 / 状态码 / 缓存 / 前端资源与执行顺序 中的哪一段，再往下钻工具（开发者工具 Network、Timing、Security 等）。