从输入 URL 到页面显示，中间经历了什么？

简化版

主线是这几步：① DNS 解析把域名转成 IP → ② 与服务器建立 TCP 连接（三次握手，HTTPS 还要 TLS 握手）→ ③ 发送 HTTP 请求 → ④ 服务器处理并返回响应 → ⑤ 浏览器解析渲染页面（构建 DOM/CSSOM → 渲染树 → 布局 → 绘制）→ ⑥ 断开连接（四次挥手）。这是一道串联 DNS、TCP、HTTP、渲染的综合题。

详细版

完整流程：

URL 解析：浏览器解析 URL，拿到协议、域名、端口、路径。先查浏览器缓存/本地 hosts。
DNS 解析：把域名解析成 IP。依次查：浏览器缓存 → 操作系统缓存 → hosts 文件 → 本地 DNS 服务器 → 递归查询根域名/顶级域/权威域名服务器。
建立 TCP 连接：与目标 IP:端口进行 三次握手建立 TCP 连接。
TLS 握手（如果是 HTTPS）：协商加密套件、验证证书、交换密钥，建立加密通道。
发送 HTTP 请求：浏览器构造请求行、请求头、请求体发给服务器。
服务器处理：服务器（可能经过负载均衡、反向代理 Nginx、后端应用、数据库）处理请求，返回 HTTP 响应（状态码 + 响应头 + HTML 等内容）。
浏览器渲染：解析 HTML 建 DOM 树、解析 CSS 建 CSSOM 树，合成渲染树，经过**布局（Layout）**算位置、**绘制（Paint）**上色，最终合成显示。期间遇到 JS/CSS/图片再发起新请求。
断开连接：数据传输完成后，按需 四次挥手关闭 TCP 连接（HTTP/1.1 默认 Keep-Alive 会复用连接，不立即关）。

完整版教学

一、这道题在考什么

「输入 URL 到页面显示」是综合题之王——它把 DNS、TCP、TLS、HTTP、浏览器渲染全串起来，考察你对整个网络栈的整体理解。回答的关键是主线清晰、每步能展开：面试官会顺着任意一步深挖（比如「DNS 怎么递归查」「三次握手为什么三次」「渲染树怎么构建」）。所以要先把骨架讲顺，再准备好每步的细节。

二、DNS 解析：域名怎么变成 IP

计算机通信要 IP，但人记的是域名，DNS 就是「域名 → IP」的电话簿。查询顺序是逐级缓存 + 递归：

浏览器缓存 → 操作系统缓存 → hosts 文件（本地先查）；
都没有就问本地 DNS 服务器（通常是运营商的）；
本地 DNS 再递归查询：根域名服务器 → 顶级域（.com）服务器 → 权威域名服务器，最终拿到 IP。

查到的结果会逐级缓存（有 TTL），下次更快。这一步也常涉及 CDN——DNS 可能返回离你最近的 CDN 节点 IP。

三、建连：三次握手 +（HTTPS）TLS 握手

拿到 IP 后，和服务器建 TCP 连接（三次握手），确认双方收发能力并同步序列号（详见「TCP 三次握手」那道题）。

如果是 HTTPS，TCP 建好后还要 TLS 握手：验证服务器证书（确认身份、防中间人）、协商对称密钥，之后的 HTTP 数据全程加密。所以 HTTPS 比 HTTP 多一次握手开销（TLS 1.3 优化到 1-RTT，甚至 0-RTT）。

四、请求与响应：中间还隔着一堆基础设施

浏览器发出的 HTTP 请求，到后端可能经过：负载均衡 → 反向代理（Nginx）→ 应用服务器 → 缓存（Redis）/数据库。服务器处理后返回响应，包含：

状态码：200 成功、301/302 重定向、304 缓存命中、404 找不到、500 服务器错误；
响应头：内容类型、缓存策略、Set-Cookie 等；
响应体：HTML 文档（或 JSON、图片等）。

浏览器可能先命中缓存（强缓存/协商缓存）直接用本地副本，不发或只发条件请求。

五、渲染：从 HTML 到看得见的页面

拿到 HTML 后，浏览器渲染引擎的关键步骤：

解析 HTML → DOM 树（文档对象模型）；
解析 CSS → CSSOM 树（样式对象模型）；
合成渲染树（Render Tree）：DOM + CSSOM，只含可见元素；
布局（Layout/Reflow）：计算每个元素的位置和大小；
绘制（Paint）：填充像素、上色；
合成（Composite）：分层合成，显示到屏幕。

过程中遇到 <script> 可能阻塞解析（同步 JS 会暂停 DOM 构建，所以 JS 常放底部或用 async/defer）；遇到 <img>、外部 CSS/JS 会发起新的请求（可能复用连接）。

六、常见误区

❌ 漏掉 DNS 或 TLS 步骤——完整链路是 DNS → TCP → (TLS) → HTTP → 渲染 → 挥手。
❌ 以为每次请求都立刻四次挥手断开——HTTP/1.1 默认 Keep-Alive 复用连接，不会每次都断。
❌ 把渲染说成「直接显示 HTML」——要经过 DOM/CSSOM → 渲染树 → 布局 → 绘制。
❌ 忽略缓存——浏览器缓存、DNS 缓存、HTTP 缓存（强/协商）都可能让某些步骤被跳过。

六、常见误区与追问

考点	正确口径
解析	URL 解析、DNS 查询得到 IP
建连	TCP 三次握手，HTTPS 还要 TLS 握手
传输	发送 HTTP 请求并接收响应
渲染	解析 HTML/CSS/JS，构建页面并绘制

URL
-> DNS
-> TCP/TLS
-> HTTP request/response
-> HTML parse
-> render tree
-> paint

这道题不是流水账，面试重点是你能否把 DNS、TCP/TLS、HTTP 和浏览器渲染串成一条链。

误区：输入 URL 后直接发送 HTTP 请求。 请求前通常要解析 URL、查 DNS、建立 TCP 连接，HTTPS 还要 TLS 握手。
误区：DNS 只查一次根服务器。 实际有浏览器、系统、递归解析器和权威 DNS 多级缓存与递归/迭代查询。
误区：HTTPS 只是 HTTP 后面加密。 HTTPS 在 HTTP 传输前要先通过 TLS 完成身份认证和密钥协商。
追问：如果命中浏览器强缓存会怎样？ 可能不发网络请求，直接从本地缓存读取资源。
追问：页面显示为什么不等所有资源下载完？ 浏览器可边解析边加载资源，CSS/JS 会按规则阻塞或影响渲染。
追问：CDN 在哪里参与？ DNS 可能把域名解析到就近 CDN 节点，后续请求先到 CDN，再按缓存命中情况回源。

七、加强记忆

输入 URL 到页面：DNS 解析（逐级缓存 + 递归查 IP）→ TCP 三次握手（HTTPS 再加 TLS 握手）→ 发 HTTP 请求 → 服务器（经负载均衡/Nginx/应用/DB）返回响应 → 浏览器渲染（DOM + CSSOM → 渲染树 → 布局 → 绘制）→ 四次挥手断开（或 Keep-Alive 复用）。这是串联全网络栈的综合题，主线要顺、每步能深挖。

简化版

详细版