计网：输入网址到网页显示

计算机网络从输入网址到网页显示

前言

在浏览器地址栏输入网址并回车，到网页内容完整渲染展示，背后是计算机网络五层协议的协同工作，也是 DNS 解析、TCP 连接、HTTP 通信、页面渲染等核心环节的有序衔接。本文以访问www.baidu.com为例，按时间线拆解全流程核心细节，兼顾原理理解与面试考点，是计算机网络基础学习的核心笔记。

一、浏览器解析网址与本地缓存查询

1. 地址栏输入www.baidu.com并回车，浏览器首先校验网址格式，判定为域名而非直接 IP，需通过DNS 解析获取目标服务器 IP。
2. 浏览器遵循本地优先原则 查询 DNS 缓存，查询顺序为：浏览器缓存 （近期访问记录）→系统本地 DNS 缓存 （操作系统 hosts 文件 / 缓存）→本地 DNS 服务器缓存（路由器 / 运营商分配）。
3. 若本地缓存存在对应域名 - IP 映射，直接跳过远程 DNS 解析，进入 TCP 连接阶段；无缓存则发起正式 DNS 解析请求。

二、DNS 域名解析：将域名转换为 IP 地址

DNS（域名系统）核心作用是实现人类易记域名 到计算机可识别 IP 的映射，采用 C/S 模型，默认使用UDP 协议 53 端口 （解析速度快，失败则降级为 TCP），解析流程为递归查询 + 迭代查询结合。

完整解析流程

1. 浏览器向本地 DNS 服务器 （如 114.114.114.114、8.8.8.8）发起递归查询：请求返回目标域名 IP，本地 DNS 需负责查询至最终结果。
2. 本地 DNS 服务器向根 DNS 服务器 发起迭代查询 ：根服务器不存储具体域名 IP，仅返回.com顶级域 DNS 服务器地址。
3. 本地 DNS 向 .com 顶级域 DNS 服务器发起迭代查询，返回百度域名的**权威 DNS 服务器 ** 地址。
4. 本地 DNS 向百度权威 DNS 服务器 发起迭代查询，获取www.baidu.com对应的公网 IP（如集群 IP 180.101.50.188）。
5. 本地 DNS 将 IP 返回浏览器，并缓存该解析结果（设置过期时间），供后续同域名访问复用。

核心知识点

• 递归查询：客户端仅发 1 次请求，等待最终结果（客户端→本地 DNS）。
• 迭代查询：每一步仅返回下一级服务器地址，发起方逐级查询（本地 DNS→根→顶级域→权威 DNS）。
• hosts 文件：本地静态域名 - IP 映射，配置后优先级高于 DNS 解析，常用于本地开发调试。

三、TCP 三次握手：建立可靠网络连接

浏览器获取目标服务器 IP 后，通过TCP 协议 与服务器建立可靠连接（HTTP 默认 80 端口，HTTPS 默认 443 端口），采用三次握手机制，确保客户端与服务器的收发能力均正常，避免无效连接占用资源。

三次握手完整流程

1. 第一次握手 ：客户端（浏览器）向服务器发送SYN 包（同步报文），包含客户端初始序列号 ISN，进入 SYN_SENT 状态，请求建立连接。
2. 第二次握手 ：服务器接收 SYN 包后，确认客户端收发能力正常，返回SYN+ACK 包（同步 + 确认报文），包含服务器初始序列号和对客户端 SYN 的确认号，进入 SYN_RCVD 状态。
3. 第三次握手 ：客户端接收 SYN+ACK 包后，确认服务器收发能力正常，返回ACK 包 （确认报文），包含对服务器 SYN 的确认号，进入 ESTABLISHED（连接建立）状态；服务器接收 ACK 包后，同样进入 ESTABLISHED 状态，TCP 连接正式建立。

补充：HTTPS 额外 TLS/SSL 握手

若为 HTTPS 访问，TCP 连接建立后会新增 TLS/SSL 握手流程，完成证书验证、密钥协商，建立加密通信通道，防止数据传输被窃听、篡改、伪造。

四、发起 HTTP/HTTPS 请求：封装并传输请求报文

TCP（TLS）连接建立后，浏览器向服务器发起 HTTP/HTTPS 请求，请求报文遵循固定格式，经网络五层协议层层封装后，以二进制数据帧形式传输。

1. HTTP 请求报文结构

请求报文由请求行、请求头、请求体三部分组成，GET 请求无请求体，访问网页默认使用 GET 方法：

• 请求行 ：请求方法 + 请求路径 + 协议版本，例：GET / HTTP/1.1。
• 请求头 ：键值对形式，携带客户端信息与请求参数，例：Host: www.baidu.com、User-Agent: Chrome/120.0.0.0、Connection: keep-alive（长连接）。
• 请求体：存储请求参数，GET 请求为空，POST 请求用于传递表单、JSON 等数据。

2. 数据层层封装流程

浏览器将 HTTP 请求报文交由对应协议层，逐层添加首部信息，最终转换为物理层可传输的二进制数据：应用层（HTTP） → 传输层（TCP，添加源 / 目的端口、序列号等）→ 网络层（IP，添加源 / 目的 IP、协议类型等）→ 数据链路层（添加 MAC 首部、帧尾）→ 物理层（网线 / WiFi，二进制传输）。

五、服务器处理请求并返回 HTTP 响应

目标服务器（百度集群）接收到二进制数据帧后，从物理层到应用层 进行层层解封装（依次去掉 MAC、IP、TCP 首部），得到 HTTP 请求报文，交由 Web 服务器程序（如 Nginx/Tomcat）处理。

1. 服务器核心处理流程

1. Web 服务器解析请求报文，判断请求为根路径的首页资源。
2. 从本地磁盘 / 缓存中读取首页静态资源（HTML、CSS、JS、图片、图标等）。
3. 将资源封装为HTTP 响应报文，沿原连接反向传输至浏览器。

2. HTTP 响应报文结构

响应报文由状态行、响应头、响应体三部分组成，核心是响应体中的资源内容：

• 状态行 ：协议版本 + 状态码 + 状态描述，例：HTTP/1.1 200 OK（200 为请求成功，常见还有 404 资源不存在、500 服务器内部错误）。
• 响应头 ：键值对形式，携带服务器信息与资源属性，例：Server: nginx、Content-Type: text/html; charset=utf-8、Content-Length（资源大小）。
• 响应体：服务器返回的实际资源，核心为 HTML 文件，同时包含 CSS、JS、图片等资源的引用地址。

3. 响应数据传输

服务器将 HTTP 响应报文按应用层→传输层→网络层→数据链路层再次层层封装，转换为二进制数据帧，通过已建立的 TCP 连接传输至浏览器。

六、浏览器接收响应并渲染网页

浏览器接收到二进制数据帧后，经层层解封装得到 HTTP 响应报文，从响应体中读取资源，由渲染引擎（如 Chrome 的 Blink）执行页面渲染流程，最终将网页展示在浏览器窗口。

页面渲染六步核心流程

1. 解析 HTML ：将 HTML 文件解析为DOM 树（文档对象模型，树状结构表示 HTML 节点的层级关系）。
2. 解析 CSS ：解析内联 / 外联 / 内嵌 CSS，生成CSSOM 树（CSS 对象模型，记录各节点的样式规则）。
3. 合成渲染树 ：合并 DOM 树与 CSSOM 树，仅保留需要显示的节点（display: none等隐藏节点被排除），为每个节点分配样式。
4. 布局（Layout） ：根据渲染树，计算每个节点的位置、大小、间距，生成布局树，确定页面整体布局。
5. 绘制（Paint） ：根据布局树，将节点的颜色、背景、边框、图片等视觉效果绘制到画布，复杂页面会分为多个图层。
6. 合成（Composite） ：将所有图层按正确层级合成为完整页面，通过显卡渲染到浏览器窗口。

渲染关键补充

• JS 会阻塞 HTML 和 CSS 解析（JS 可修改 DOM 和 CSSOM），现代浏览器通过预加载优化该问题。
• 图片、视频等静态资源会被并行请求（TCP 长连接下，浏览器同时发起多个请求），加载完成后更新至页面。

七、TCP 四次挥手：断开网络连接

当页面所有资源加载完成，且浏览器与服务器的TCP 长连接 超时时，双方通过四次挥手机制断开 TCP 连接，释放网络资源。TCP 为全双工通信，需分别关闭客户端→服务器、服务器→客户端的通信通道，因此需要四次挥手。

四次挥手完整流程

1. 第一次挥手 ：客户端向服务器发送FIN 包（终止报文），表示无数据要发送，请求关闭连接，进入 FIN_WAIT_1 状态。
2. 第二次挥手 ：服务器接收 FIN 包后，返回ACK 包确认关闭请求，进入 CLOSE_WAIT 状态；客户端接收 ACK 后进入 FIN_WAIT_2 状态。
3. 第三次挥手 ：服务器处理完剩余数据后，向客户端发送FIN 包，表示无数据要发送，请求关闭连接，进入 LAST_ACK 状态。
4. 第四次挥手 ：客户端接收 FIN 包后，返回ACK 包 确认，进入 TIME_WAIT 状态（等待 2MSL，确保服务器收到 ACK）；服务器接收 ACK 后关闭连接，客户端等待超时后也关闭连接，TCP 连接彻底断开。

核心知识点

• TIME_WAIT 状态：防止最后一个 ACK 包丢失，导致服务器重发 FIN 包，确保连接正常关闭。
• 若开启 TCP 长连接（HTTP/1.1 Connection: keep-alive），则不会立即挥手，可复用连接处理后续请求，减少三次握手耗时。

八、从输入网址到页面显示：全流程时间线

1. 浏览器解析域名，依次查询浏览器、系统、本地 DNS 服务器缓存；
2. 本地无缓存时，发起 DNS 递归 + 迭代查询，获取目标服务器 IP；
3. 浏览器与服务器通过 TCP 三次握手建立可靠连接（HTTPS 额外完成 TLS 握手）；
4. 浏览器封装 HTTP/HTTPS 请求报文，经五层协议层层封装后传输至服务器；
5. 服务器解封装请求报文，处理后封装 HTTP 响应报文，反向传输至浏览器；
6. 浏览器解封装响应报文，执行 DOM 解析→CSSOM 解析→渲染树合成→布局→绘制→合成，完成页面渲染；
7. 页面加载完成，TCP 长连接超时后，双方通过四次挥手断开连接。

九、高频优化点与面试核心考点

1. 网络层优化（提升解析与传输速度）

• DNS 优化：开启 DNS 多级缓存、DNS 预解析（浏览器提前解析页面域名）、配置 DNS 负载均衡；
• CDN 加速：将静态资源部署在就近 CDN 节点，用户访问就近节点，减少网络延迟与服务器压力。

2. 传输层与应用层优化

• TCP 长连接：HTTP/1.1 默认开启keep-alive，复用连接避免重复三次握手；
• HTTP/2/HTTP/3：HTTP/2 支持多路复用（一个 TCP 连接同时传输多个请求）、头部压缩；HTTP/3 基于 QUIC 协议（UDP），避免 TCP 队头阻塞，提升弱网性能；
• 资源压缩：对 HTML、CSS、JS 进行 Gzip/Brotli 压缩，减少文件大小。

3. 前端渲染优化

• 懒加载：图片、视频等资源按需加载，降低首屏加载压力；
• 资源预加载：提前加载核心 CSS/JS，避免渲染阻塞；
• 分层渲染：复杂页面分图层渲染，仅重绘 / 重排变化的图层，减少渲染耗时。

4. 面试必考核心问题

1. DNS 解析的完整流程？递归查询与迭代查询的区别？
2. TCP 三次握手的目的与流程？为什么不能两次握手？
3. TCP 四次挥手的原因与流程？TIME_WAIT 状态的作用？
4. HTTP 与 HTTPS 的区别？TLS 握手的核心步骤？
5. 从输入网址到页面显示，哪些步骤可以优化？如何优化？
6. TCP 与 UDP 的核心区别？为何 DNS 用 UDP、HTTP 用 TCP？

十、总结

从输入网址到网页显示，是计算机网络应用层、传输层、网络层、数据链路层、物理层五层协议的完整落地，每个环节都有明确的设计初衷：DNS 解决 "域名找 IP" 的问题，TCP 解决 "可靠传输" 的问题，HTTP 解决 "应用层通信规则" 的问题，浏览器渲染解决 "资源转可视化页面" 的问题。

理解这一全流程，不仅能夯实计算机网络基础，还能为网络优化、前端性能调优、后端服务部署提供思路，也是互联网大厂后端、前端、测试、运维等岗位面试的必考核心知识点，建议结合浏览器 F12 开发者工具（网络面板、域名解析面板）实操验证，加深理解。