【输入URL到页面展示】

从输入URL到页面展示发生了什么

本题目是一个综合题目，需要对 HTTP、DNS 查询、TCP 三次握手四次挥手、浏览器渲染等概念有更深入的认识之后才能回答得更加完善深入。

最最优解法：

面试官您好！从输入URL到页面展示是一个涉及网络协议和浏览器渲染的完整流程，我将分阶段为您详细说明：

首先是URL解析与DNS寻址。输入URL后，浏览器先判断是合法网址还是搜索词。若是搜索词，会自动拼接搜索引擎URL；若是合法网址（如https://www.example.com），则拆解协议、域名和路径，并触发beforeunload事件确认跳转。接下来进入核心的DNS解析环节：浏览器先查本地缓存（浏览器/系统/路由器），若命中IP直接使用；未命中则通过递归+迭代查询全球DNS服务器，从根服务器到顶级域名服务器，最终获取权威IP地址。这里可以通过dns-prefetch预解析优化，减少首次加载延迟。

然后是TCP连接建立。拿到IP后，浏览器与服务器进行TCP三次握手：客户端发SYN请求连接，服务器回SYN+ACK确认，客户端再发ACK完成握手。若为HTTPS，会叠加TLS握手，完成证书验证和密钥协商，确保数据加密传输。连接建立后，浏览器构建HTTP请求，包含请求行、头、体（如POST数据），并通过TCP发送到服务器端口（HTTP:80/HTTPS:443）。

服务器接收到请求后，先进行TCP解包提取HTTP请求，解析路径和头信息。若命中静态缓存（如CDN或本地缓存），直接返回304或缓存内容（304状态码表示资源未修改，客户端可使用本地缓存。）；未命中则调用后端处理业务逻辑（如查询数据库），生成包含状态码、响应头（如Cache-Control）和响应体（HTML/CSS/JS）的HTTP响应，返回给浏览器。

浏览器收到响应后，若为HTTPS则先解密响应体，然后进入渲染流程。首先解析HTML生成DOM树，解析CSS生成CSSOM树，合并为渲染树时过滤不可见元素。接着进行布局计算（回流），确定元素位置和尺寸；然后绘制样式（重绘），填充颜色、边框等；最后通过GPU加速合成页面，输出到屏幕并触发load事件。

连接管理方面，若响应头含keep-alive，则复用TCP连接处理后续请求；否则通过四次挥手关闭连接：客户端发FIN，服务器回ACK后发FIN，客户端再回ACK，进入TIME_WAIT状态防止丢包。

性能优化贯穿全程：DNS预解析减少寻址耗时，HTTP/2多路复用提升传输效率，Gzip压缩和CDN加速减少流量延迟，合理利用强缓存（Cache-Control）和协商缓存（ETag）减少重复请求，异步加载JS避免渲染阻塞，利用GPU合成优化渲染性能。

整个流程体现了TCP/IP模型的分层协作：应用层（DNS/HTTP）定义规则，传输层（TCP）保障可靠，网络层（IP）负责路由，网络接口层处理物理传输。

（ 每个环节的细节（如三次握手的可靠性设计、渲染树的构建逻辑）都是面试常考点，需要结合具体场景理解其设计原理。）

掌握程度：

基本要求：

理解浏览器和服务器之间的交互过程，能够清晰地描述从输入 URL 到页面显示的整个流程。

• DNS 解析：描述如何将域名转换为 IP 地址。
• TCP 连接建立：解释 TCP 三次握手的过程。
• HTTP 请求：说明浏览器如何构建 HTTP 请求，并发送到服务器。
• 服务器处理请求：描述服务器接收请求、处理请求并生成响应的过程。
• HTTP 响应：说明服务器如何将响应发送回浏览器。
• TCP 连接关闭：描述 TCP 四次挥手的过程。
• 浏览器渲染页面：描述浏览器如何解析 HTML、CSS 和 JavaScript，以及构建 DOM 树和渲染树。
• 页面显示：解释浏览器如何将渲染树绘制到屏幕上。

进阶要求：

• 对每个步骤的关键点有所了解，如 DNS 解析、TCP/IP 连接、HTTP 请求和响应、浏览器渲染等，引导面试官向具体的问题深入。
• 对页面加载性能优化有所了解，如减少 DNS 查询时间、使用 CDN、压缩资源、利用缓存等。

以下是逻辑更清晰、知识点解析更详细的优化版文本流程图，通过层级缩进和关键标注突出流程细节与知识点关联：

输入URL到页面展示完整流程图（详细解析版）

1. 输入URL与初始处理

输入URL  
└─ URL解析与预处理  ├─ 判断URL类型  │  ├─ **合法网址**（如https://www.example.com）  │  │  ├─ 拆解协议（HTTP/HTTPS）、域名、路径参数  │  │  ├─ **触发浏览器beforeunload事件**（询问是否离开当前页面）  │  │  └─ **DNS解析流程**（核心网络寻址）  │  │     ├─ **本地缓存优先查询**  │  │     │  ├─ 浏览器缓存（Browser Cache）  │  │     │  ├─ 操作系统缓存（Hosts文件/系统DNS缓存）  │  │     │  └─ 路由器缓存（Router DNS Cache）  │  │     │     └─ **命中缓存** → 直接获取IP地址  │  │     └─ **未命中缓存时的递归+迭代查询**  │  │        ├─ 本地DNS服务器向**根DNS服务器**递归请求（.根服务器全球13组）  │  │        ├─ 根服务器返回**顶级域名服务器**地址（如.com服务器）  │  │        └─ 本地DNS向顶级域名服务器**迭代查询**，获取权威DNS服务器地址  │  │           └─ 权威DNS服务器返回目标域名IP地址  │  └─ **搜索词**（如“面试技巧”）  │     └─ 拼接默认搜索引擎URL（如https://www.baidu.com/s?q=面试技巧）  │        └─ 跳转至合法网址流程（同上）  

2. 网络通信层：连接建立与数据交互

└─ **TCP连接建立**（传输层核心）  ├─ **三次握手过程**  │  ├─ 客户端发送SYN包（序列号Seq=X，请求连接）  │  ├─ 服务器返回SYN+ACK包（Seq=Y，Ack=X+1，确认连接）  │  └─ 客户端发送ACK包（Seq=X+1，Ack=Y+1，连接建立完成）  ├─ **协议选择**  │  ├─ **HTTPS场景**  │  │  └─ 叠加**TLS握手**（证书验证、对称密钥协商、加密通信）  │  └─ **HTTP场景**  │     └─ 直接通过TCP明文传输  ├─ **HTTP请求构建与发送**  │  ├─ 请求报文结构  │  │  ├─ 请求行（Method: GET/POST，Path，Version: HTTP/1.1）  │  │  ├─ 请求头（User-Agent, Cookie, Cache-Control等）  │  │  └─ 请求体（POST数据，如JSON/表单）  │  └─ 通过TCP连接发送至服务器指定端口（HTTP:80，HTTPS:443）  ├─ **服务器处理请求**  │  ├─ TCP解包：从数据报中提取HTTP请求  │  ├─ 解析请求头与路径（如Nginx解析URI）  │  ├─ **缓存判断**  │  │  ├─ 命中**静态资源缓存**（如CDN/服务器本地缓存）→ 直接返回304 Not Modified或缓存内容  │  │  └─ 未命中 → 调用后端服务（如Java/Node.js）  │  │     ├─ 业务逻辑处理（查询数据库、生成动态内容）  │  │     └─ 构建HTTP响应  │  │        ├─ 状态码（200/404/301等）  │  │        ├─ 响应头（Content-Type, Cache-Control, Set-Cookie等）  │  │        └─ 响应体（HTML/CSS/JS/JSON）  │  └─ 返回响应数据至浏览器  

3. 浏览器渲染流程（前端核心）

└─ **响应处理与渲染**  ├─ **协议解密（HTTPS场景）**  │  └─ 通过TLS会话密钥解密响应体  ├─ **解析与构建渲染树**  │  ├─ **HTML解析** → 生成DOM树（Document Object Model）  │  │  ├─ 逐行解析HTML，构建节点树  │  │  └─ 遇<script>标签：  │  │     ├─ 无defer/async → 阻塞解析，立即执行JS  │  │     └─ 有defer/async → 异步加载，不阻塞DOM构建  │  ├─ **CSS解析** → 生成CSSOM树（CSS Object Model）  │  │  └─ 解析CSS规则，计算元素样式（如盒模型、定位）  │  └─ **合并为渲染树（Render Tree）**  │     └─ 过滤不可见元素（display: none/head等），仅保留可见节点  ├─ **渲染阶段**  │  ├─ **布局（Layout）**  │  │  └─ 计算元素几何属性（宽高、位置、层级）→ 触发回流（Reflow）  │  ├─ **绘制（Paint）**  │  │  └─ 填充元素视觉样式（颜色、边框、阴影）→ 触发重绘（Repaint）  │  └─ **合成（Compositing）**  │     └─ 将渲染层分块，利用GPU加速合成最终画面  └─ **页面显示**  └─ 输出渲染结果至显示器，触发`load`事件  

4. 连接管理与性能优化

└─ **TCP连接生命周期**  ├─ **连接复用**  │  └─ 若响应头含Connection: keep-alive → 保留连接处理后续请求（HTTP/1.1默认开启）  ├─ **四次挥手关闭连接（非keep-alive场景）**  │  ├─ 客户端发送FIN包（请求关闭）  │  ├─ 服务器返回ACK包（确认接收FIN）  │  ├─ 服务器发送FIN包（数据传输完毕）  │  └─ 客户端返回ACK包（确认关闭，进入TIME_WAIT状态防丢包）  
└─ **性能优化关键点**  ├─ **DNS优化**  │  └─ dns-prefetch预解析（<link rel="dns-prefetch" href="//example.com">）  ├─ **传输层优化**  │  └─ HTTP/2多路复用（单连接并发传输多资源）  ├─ **应用层优化**  │  ├─ 资源压缩（Gzip/Brotli，减少响应体体积）  │  └─ CDN加速（静态资源就近获取，降低延迟）  ├─ **缓存策略**  │  ├─ 强缓存（Cache-Control: max-age=3600）  │  └─ 协商缓存（ETag/If-None-Match，304响应）  └─ **渲染优化**  ├─ JS异步加载（defer/async属性）  └─ 避免频繁回流/重绘（CSS动画使用transform而非top/left）  

核心逻辑总结

1. 分层协作：
   • 应用层（DNS/HTTP）定义业务规则，传输层（TCP/UDP）保障可靠传输，网络层（IP）负责路由，网络接口层（MAC/物理介质）实现物理传输。
2. 性能优化维度：
   • 减少网络请求：缓存、CDN、合并资源；
   • 缩短链路耗时：DNS预解析、HTTP/2多路复用；
   • 优化渲染效率：异步加载JS、CSS优先、GPU合成。

此流程图通过详细的层级拆解和知识点标注，清晰展现了从URL输入到页面展示的技术细节，适合面试中系统性阐述全流程及关键原理。

最优解：

面试官您好！从输入 URL 到页面展示，是网络协议协同与浏览器渲染引擎配合的完整流程，我按关键步骤拆解说明：

一、DNS 解析：域名转 IP 的寻址过程

当输入 https://www.example.com ，浏览器先启动 DNS 解析，把域名映射为服务器 IP 。流程是：

1. 缓存优先：先查浏览器缓存（近期访问过的域名 - IP 记录），再查操作系统缓存（如本地 hosts 文件、系统 DNS 缓存）。若命中，直接用缓存 IP ，跳过后续步骤。
2. 递归 + 迭代查询：若缓存无记录，本地 DNS 服务器（如路由器分配的 DNS）发起查询。它先向根 DNS 服务器递归请求，根服务器返回顶级域名（.com）服务器地址；本地 DNS 再向顶级域名服务器迭代查询，拿到权威 DNS 服务器地址；最后从权威服务器获取 example.com 对应的 IP ，返回给浏览器。
   关键优化点：可通过 dns-prefetch 预解析域名（<link rel="dns-prefetch" href="//example.com"> ），提前建立 DNS 缓存，减少首屏加载延迟。

二、TCP 连接建立：三次握手构建可靠通道

拿到服务器 IP 后，浏览器通过 TCP 三次握手与服务器建立连接（假设访问 HTTP ，默认端口 80；HTTPS 则是 443 ，且后续叠加 TLS 握手）：

1. 第一次握手（SYN）：客户端（浏览器）向服务器发 SYN 包，带初始序列号 seq = x ，请求建立连接。
2. 第二次握手（SYN + ACK）：服务器收到 SYN 后，回 SYN + ACK 包，序列号 seq = y ，确认号 ack = x + 1 ，表示同意连接。
3. 第三次握手（ACK）：客户端发 ACK 包，确认号 ack = y + 1 ，序列号 seq = x + 1 ，连接正式建立。
   核心作用：三次握手确保客户端、服务器收发能力正常，避免无效连接，为 HTTP 可靠传输打基础。若中间网络丢包，会触发超时重传，保障连接建立。

三、HTTP 请求：浏览器构建并发送请求

连接建立后，浏览器构建 HTTP 请求报文，主要包含：

• 请求行：如 GET /index.html HTTP/1.1 ，指定请求方法（GET/POST 等）、资源路径、HTTP 版本。
• 请求头：携带元信息，如 User-Agent（浏览器标识）、Cookie（用户登录态）、Accept（支持的响应类型）、Cache-Control（缓存策略）等。
• 请求体：POST 请求时携带数据（如表单内容、JSON 数据 ），GET 请求一般无请求体。
  浏览器通过 TCP 连接，将请求报文发送到服务器指定端口（80/443 ）。

四、服务器处理请求：业务逻辑与响应生成

服务器端（如 Nginx + Tomcat 或 Node.js 服务）接收到 TCP 报文后：

1. TCP 解包：从 TCP 段中提取 HTTP 请求，交给应用层处理。
2. 解析请求：Web 服务器（如 Nginx ）解析请求行、请求头，判断资源路径、缓存策略等；若命中静态资源缓存（如 CDN 缓存、服务器本地缓存 ），直接返回响应，跳过业务逻辑。
3. 业务处理：若需动态处理（如 API 接口、页面渲染 ），服务器调用后端服务（如 Java 服务、Python 脚本 ），查询数据库、执行业务逻辑，生成响应内容（如 HTML 、JSON ）。
4. 构建响应：生成 HTTP 响应报文，包含：
   • 状态码：如 200 OK（成功）、304 Not Modified（缓存有效）、404 Not Found（资源不存在）。
   • 响应头：如 Content-Type（指定内容类型，如 text/html ）、Content-Length（内容长度 ）、Set-Cookie（设置新 Cookie ）。
   • 响应体：实际返回的内容（如 HTML 代码、CSS/JS 资源 ）。

五、HTTP 响应：服务器回传数据

服务器通过 TCP 连接，将响应报文回传给浏览器。若启用 HTTPS ，响应数据会先经 TLS 加密（对称加密传输 ），保障数据安全。

缓存相关逻辑：若响应头带 Cache-Control: max-age=3600（强缓存 ），浏览器下次请求时，会先检查缓存是否过期，未过期则直接使用本地缓存，不发起请求；若带 ETag（协商缓存 ），浏览器会在后续请求头中加 If-None-Match ，服务器对比 ETag ，若资源未变，返回 304 ，减少数据传输。

六、TCP 连接关闭：四次挥手释放资源

页面核心资源（HTML ）传输完成后，TCP 连接可通过四次挥手关闭（若启用 Connection: keep-alive ，连接会复用，减少握手开销 ）：

1. 第一次挥手（FIN）：客户端发 FIN 包，序列号 seq = m ，请求关闭连接。
2. 第二次挥手（ACK）：服务器回 ACK 包，确认号 ack = m + 1 ，表示收到关闭请求，此时服务器可能仍在发送剩余数据。
3. 第三次挥手（FIN）：服务器数据发送完毕，发 FIN 包，序列号 seq = n ，通知客户端可关闭连接。
4. 第四次挥手（ACK）：客户端回 ACK 包，确认号 ack = n + 1 ，连接正式关闭。客户端会进入 TIME_WAIT 状态（约 2MSL 时间 ），防止残留报文干扰新连接。

七、浏览器渲染页面：解析与构建渲染树

浏览器拿到 HTTP 响应的 HTML 内容后，启动渲染流程：

1. HTML 解析：逐行解析 HTML 文本，构建 DOM 树（Document Object Model ）。遇到 <link rel="stylesheet">（CSS ）、<script>（JS ）标签时，会触发额外请求：
   • CSS 加载：请求 CSS 文件，解析后生成 CSSOM 树（CSS Object Model ），描述元素样式规则。
   • JS 执行：若 script 标签无 defer/async ，会阻塞 DOM 解析，需等脚本执行完再继续（因 JS 可能修改 DOM 结构 ）。
2. 构建渲染树（Render Tree）：合并 DOM 树和 CSSOM 树，过滤不可见元素（如 display: none ），生成渲染树，每个节点包含内容和样式信息。

八、页面显示：布局、绘制与合成

渲染树构建完成后，浏览器执行：

1. 布局（Layout）：遍历渲染树，计算每个节点的几何位置（宽高、坐标 ），生成布局树（Layout Tree ）。这一步称为回流（Reflow），若修改元素 width、position 等属性，会触发回流，性能开销大。
2. 绘制（Paint）：根据布局树，为每个节点填充视觉样式（颜色、边框、阴影等 ），生成绘制记录。这一步称为重绘（Repaint），修改 color、background 等不影响布局的属性，会触发重绘。
3. 合成（Compositing）：将页面分层（如视频层、文字层 ），利用 GPU 加速合成，最终输出到屏幕，完成页面显示。

九、性能优化关键策略（进阶延伸）

1. DNS 优化：用 dns-prefetch 预解析域名，或采用 HTTP/3（基于 QUIC 协议 ），减少 DNS 解析耗时。
2. 连接复用：通过 keep-alive 复用 TCP 连接，或使用 HTTP/2 多路复用（一个连接并发传输多个资源 ）。
3. 资源压缩：服务器开启 Gzip/Brotli 压缩，减少响应体体积；图片用 WebP 格式，降低大小。
4. 缓存利用：合理设置 Cache-Control（强缓存 ）、ETag（协商缓存 ），减少重复请求。
5. CDN 加速：静态资源（CSS、JS、图片 ）部署到 CDN 节点，就近读取，降低网络延迟。

整个流程覆盖 TCP/IP 四层模型（应用层的 HTTP/DNS 、传输层的 TCP 、网络层的 IP 路由、网络接口层的帧传输 ），以及浏览器渲染的核心机制。每个环节的优化点（如缓存、CDN ），都是实际项目中提升页面性能的关键。不知面试官对哪个细节想深入探讨？比如 TCP 三次握手的异常处理，或浏览器渲染的阻塞问题 。

——————————————————

解法一：

面试官，当在浏览器输入 URL 到页面展示，这背后是一套复杂且精妙的网络与浏览器协同流程，我把它拆解成几个核心阶段来讲：

首先是URL 解析与决策 。输入 URL 后，浏览器先判断是合法网址还是搜索词 。若是搜索词，会用默认搜索引擎拼接成新 URL ；若是标准网址，就拆解协议（如 HTTP/HTTPS ）、域名（如 baidu.com ）、路径等部分，同时触发当前页面的 beforeunload 事件，确认是否允许跳转，这一步是浏览器对用户行为的初步 “理解” 和交互兜底。

接着进入网络通信前置环节 ，也就是 DNS 解析找 IP 。浏览器不会直接认识域名，得通过 DNS 把域名转成服务器的 IP 地址 。这个过程会优先查缓存，浏览器自己存了些近期解析过的域名 - IP 映射，接着查系统缓存、路由器缓存 ；如果都没命中，就会发起递归 + 迭代查询，本地 DNS 服务器先递归问根服务器，根服务器返回顶级域名服务器地址，再迭代往下查，直到拿到目标 IP ，这一步就像给域名找 “门牌号”，是网络通信的基础寻址。

有了 IP ，就该建立 TCP 连接 。浏览器会用这个 IP （加上默认端口，比如 HTTP 是 80 、HTTPS 是 443 ）和服务器进行 TCP 三次握手 。第一次客户端发 SYN 包请求连接，服务器收到后回 SYN + ACK 确认，客户端再发 ACK 完成握手，这三步确保双方收发能力正常，为可靠传输打基础 ；如果是 HTTPS ，还得在 TCP 之上建立 TLS 连接，通过证书校验、密钥交换等过程加密通信，保障数据安全。

然后是HTTP 请求与响应 。连接建立后，浏览器构建 HTTP 请求报文，包含请求行（方法如 GET/POST 、URL 路径、协议版本 ）、请求头（带 Cookie 、User - Agent 等信息 ）、请求体（POST 等方法时传数据 ），发送给服务器 。服务器接收到后，解析请求，查数据库、调后端服务等处理业务逻辑，再构建响应报文，用状态码（200 成功、404 找不到等 ）、响应头（Content - Type 、缓存策略等 ）、响应体（HTML/CSS/JS 等内容 ）返回给浏览器 。这里要注意，若响应是 301/302 重定向，浏览器会拿 Location 字段里的新 URL 重新走一遍流程。

拿到响应后，就进入浏览器渲染环节 。首先解析 HTML 生成 DOM 树，把标签、文本等转成结构化节点 ；同时解析 CSS 生成 CSSOM 树，计算每个节点的样式 。接着把 DOM 树和 CSSOM 树合并成渲染树，过滤掉不需要显示的节点（比如 display: none 的 ）。之后进行布局，计算每个元素在页面的位置、尺寸，生成布局树 ；再根据布局做绘制，确定每个区域画什么内容 ；最后合成，把分层的绘制结果整合，利用 GPU 加速输出到屏幕 。这过程中，若遇到 JS 脚本，会暂停渲染先执行脚本，因为 JS 可能修改 DOM/CSS ，影响渲染结果 ；像图片、字体等其他资源，浏览器会继续发起新的 HTTP 请求去获取，边加载边渲染，优化体验。

最后，连接管理与收尾 。页面加载完成后，TCP 连接可能会通过四次挥手断开 。客户端发 FIN ，服务器回 ACK ，服务器再发 FIN ，客户端回 ACK ，确保双方数据都传完了 ；不过为了复用连接，现代浏览器也会用连接复用机制，减少重复握手的开销 。同时，浏览器触发 load 事件，标记页面加载完成，整个流程落幕。

整个过程涉及网络分层模型（应用层的 HTTP/DNS 、传输层的 TCP/UDP 、网络层的 IP 路由等 ）、浏览器渲染原理（从解析到合成的多环节协同 ），每个步骤里还有像缓存策略（DNS 缓存、HTTP 强缓存/协商缓存 ）、性能优化点（DNS 预解析、CDN 加速、资源压缩 ）等细节，充分体现了网络通信和浏览器渲染的复杂性与协同性，也能从中找到很多优化页面加载体验的思路 。

解法二：

面试官，从输入URL到页面展示的核心流程可以概括为“寻址→连接→请求→渲染→收尾”五个关键步骤，每个环节都对应计算机网络的核心原理：

1. DNS解析：从域名找到服务器IP（应用层）

输入URL后，浏览器首先通过DNS协议将域名（如baidu.com）解析为服务器的IP地址。

• 原理：先查本地缓存（浏览器/系统/路由器），若未命中则递归+迭代查询DNS服务器（根→顶级→权威服务器）。
• 重点：DNS是应用层协议，依赖UDP 53端口，解析结果影响后续通信效率。

2. TCP连接建立：三次握手创建可靠通道（传输层）

获取IP后，浏览器与服务器通过TCP三次握手建立连接：

• 过程：
  ① 客户端发SYN包请求连接；
  ② 服务器返回SYN+ACK确认；
  ③ 客户端发ACK完成握手。
• 作用：确保双方收发能力正常，为HTTP传输奠定基础（HTTPS在此基础上叠加TLS加密）。

3. HTTP请求与响应：应用层数据交互

连接建立后，浏览器发送HTTP请求，服务器返回响应：

• 请求：包含方法（GET/POST）、URL路径、请求头（如Cookie），可能带请求体。
• 响应：包含状态码（200/404等）、响应头（如Content-Type）、响应体（HTML/CSS/JS）。
• 关键：HTTP是无状态协议，HTTPS通过TLS加密数据，响应若含重定向（301/302）需重新请求。

4. 浏览器渲染：从代码到页面（前端核心）

浏览器解析响应内容并渲染页面：

• 解析阶段：HTML→DOM树，CSS→CSSOM树，合并为渲染树（排除不可见元素）。
• 渲染阶段：
  • 布局：计算元素位置和尺寸（回流/重排）；
  • 绘制：填充元素样式（颜色、边框等）；
  • 合成：分层处理并输出到屏幕（重绘）。
• 阻塞点：JS执行会暂停渲染，需合理优化脚本加载顺序。

5. 连接关闭与优化：四次挥手与性能策略

页面加载完成后，TCP连接可能通过四次挥手断开：

• 过程：客户端发FIN→服务器ACK→服务器FIN→客户端ACK。
• 优化：
  • 连接复用：通过Connection: keep-alive减少握手开销；
  • 缓存利用：强缓存（Cache-Control）和协商缓存（ETag/Last-Modified）减少重复请求。

总结：核心协议与分层协作

整个流程贯穿TCP/IP模型四层：

• 应用层：DNS、HTTP/HTTPS协议；
• 传输层：TCP（可靠连接）、UDP（DNS查询）；
• 网络层：IP路由选择，数据包转发；
• 网络接口层：MAC寻址，帧传输（如以太网协议）。
  核心逻辑是“应用层定义规则，传输层保障可靠，网络层负责寻址，底层实现物理传输”，最终通过浏览器渲染将网络数据转化为用户可见的页面。