当前位置：首页 > news >正文

浏览器获取到网页的流程

news 2025/9/29 9:39:56

文章目录

- - 步骤1：输入URL与解析（用户行为与初步处理）
  - 步骤2：DNS域名解析（将域名转为IP地址）
  - 步骤3：建立TCP连接（“三次握手”）
  - 步骤4：建立HTTPS加密连接（若为HTTPS协议）
  - 步骤5：发送HTTP请求（向服务器索要资源）
  - 步骤6：服务器处理请求并返回响应
  - 步骤7：关闭TCP连接（“四次挥手”）
  - 步骤8：浏览器解析响应体（HTML/CSS/JS等）
  - 步骤9：渲染页面（构建渲染树并绘制）
  - 步骤10：加载附加资源与页面交互
  - 核心流程总结
  - 关键补充：HTTP/1.1 vs HTTP/2 vs HTTP/3

从浏览器输入网址到最终显示网页，是一个涉及 网络协议、服务器交互、本地渲染等多个环节的复杂流程。整个过程可拆解为以下10个核心步骤，每一步都依赖不同的技术标准协同工作。

步骤1：输入URL与解析（用户行为与初步处理）

当用户在浏览器地址栏输入URL（如https://www.example.com/index.html）并按下回车时，浏览器首先对URL进行解析，提取关键信息：

协议：https（决定数据传输的安全规则）；
域名：www.example.com（需要转换为服务器IP地址）；
路径：/index.html（指定服务器上的目标资源）；
查询参数/锚点（若有）：如?id=123（传递给服务器的额外信息）、#section1（本地页面定位，不发送给服务器）。

同时，浏览器会检查本地缓存（如DNS缓存、页面资源缓存），若缓存中有可用数据，会直接复用以缩短流程。

步骤2：DNS域名解析（将域名转为IP地址）

浏览器无法直接通过域名找到服务器，必须通过DNS（域名系统） 将域名解析为服务器的IP地址（如192.168.1.1），类似“查通讯录找电话号码”。解析过程遵循“从近到远”的缓存优先原则：

浏览器DNS缓存：浏览器会缓存近期解析过的域名（通常几分钟到几小时），若命中直接返回IP；
操作系统DNS缓存：若浏览器缓存未命中，查询本地操作系统的DNS缓存（如Windows的hosts文件、macOS的缓存）；
本地DNS服务器：若前两级均未命中，请求路由器或ISP（运营商）提供的本地DNS服务器（如114.114.114.114），其通常缓存大量常用域名；
根域名服务器：本地DNS服务器若未缓存，会向根域名服务器（全球共13组）查询，根服务器返回顶级域名服务器（如.com对应的服务器）地址；
顶级域名服务器：返回二级域名（如example.com）对应的权威DNS服务器地址；
权威DNS服务器：最终返回www.example.com对应的IP地址，本地DNS服务器将其缓存并返回给浏览器。

步骤3：建立TCP连接（“三次握手”）

HTTP/HTTPS协议基于TCP（传输控制协议） 传输数据，TCP是“可靠的、面向连接”的协议，需先通过“三次握手”建立连接（以https://www.example.com为例，默认端口为443；HTTP默认端口为80）：

客户端请求（SYN）：浏览器（客户端）向服务器发送SYN包（同步请求），表明“我要连接你，使用序号X”；
服务器响应（SYN+ACK）：服务器收到SYN包后，返回SYN+ACK包（同步+确认），表明“我同意连接，使用序号Y，确认收到你的X”；
客户端确认（ACK）：浏览器发送ACK包，表明“确认收到你的Y，连接可以建立了”。

三次握手完成后，TCP连接正式建立，为后续数据传输提供可靠通道（保证数据不丢失、不重复、按顺序到达）。

步骤4：建立HTTPS加密连接（若为HTTPS协议）

若URL使用https，则需在TCP连接基础上通过TLS/SSL协议建立加密通道（HTTP无此步骤，数据明文传输），核心是“身份认证+数据加密”，流程如下：

客户端发起SSL请求：浏览器向服务器发送“客户端hello”消息，包含支持的TLS版本、加密算法列表、随机数A；
服务器响应SSL配置：服务器返回“服务器hello”消息，确认TLS版本、加密算法，同时发送服务器证书（含服务器公钥、域名等，由权威CA机构签发）和随机数B；
客户端验证服务器身份：浏览器验证服务器证书的有效性（如证书是否过期、域名是否匹配、CA机构是否可信），若验证失败则提示“不安全”；
生成会话密钥：浏览器生成随机数C，用服务器证书中的公钥加密后发送给服务器；
协商会话密钥：服务器用自己的私钥解密得到随机数C，然后用A、B、C生成对称会话密钥（后续数据传输用此密钥加密，对称加密效率远高于非对称加密）；
确认加密通道建立：服务器和浏览器分别用会话密钥加密“finished”消息发送给对方，若能成功解密，则HTTPS加密通道建立完成。

步骤5：发送HTTP请求（向服务器索要资源）

加密通道（HTTPS）或TCP连接（HTTP）建立后，浏览器向服务器发送HTTP请求报文，请求报文由三部分组成：

请求行：包含请求方法（如GET获取资源、POST提交数据）、请求路径（/index.html）、HTTP版本（如HTTP/1.1）；
示例：GET /index.html HTTP/1.1
请求头：传递浏览器、客户端环境等附加信息，如：
- Host: www.example.com（指定服务器域名）；
- User-Agent: Chrome/112.0.0.0（浏览器类型/版本）；
- Cookie: xxx（本地存储的服务器颁发的身份标识）；
- Accept: text/html,image/png（浏览器可接收的资源类型）；
请求体：仅POST等方法有，用于提交表单数据、JSON等（GET方法的参数在URL中，请求体为空）。

步骤6：服务器处理请求并返回响应

服务器（如Nginx、Apache、Tomcat）接收HTTP请求后，按以下逻辑处理：

解析请求：提取请求路径、参数、请求头等信息；
处理业务逻辑：若请求静态资源（如HTML、CSS、图片），直接从服务器磁盘读取；若请求动态资源（如/api/user），则调用后端程序（如Java、Python、Node.js）处理数据（如查询数据库、计算结果）；
生成响应报文：服务器构建HTTP响应报文，返回给浏览器，响应报文也包含三部分：
- 状态行：包含HTTP版本、状态码（如200 OK成功、404 Not Found资源不存在、500 Internal Server Error服务器错误）、状态描述；
  示例：HTTP/1.1 200 OK
- 响应头：传递资源属性、服务器信息等，如：
  - Content-Type: text/html; charset=utf-8（资源类型为HTML，编码UTF-8）；
  - Content-Length: 1024（资源大小，单位字节）；
  - Set-Cookie: xxx（服务器向客户端写入Cookie）；
  - Cache-Control: max-age=3600（资源缓存有效期1小时）；
- 响应体：核心资源内容，如HTML代码、CSS代码、图片二进制数据等。

步骤7：关闭TCP连接（“四次挥手”）

服务器返回响应后，若不再需要传输数据，TCP连接会通过“四次挥手”关闭（HTTP/1.1默认“Keep-Alive”可复用连接，减少握手开销）：

客户端发起关闭请求（FIN）：浏览器发送FIN包，表明“我没有数据要发了”；
服务器确认（ACK）：服务器返回ACK包，表明“我收到你的关闭请求，正在处理剩余数据”；
服务器发起关闭请求（FIN）：服务器处理完剩余数据后，发送FIN包，表明“我也没有数据要发了”；
客户端确认（ACK）：浏览器返回ACK包，表明“我收到你的关闭请求，等待你关闭”；服务器收到ACK后关闭连接，浏览器等待片刻（防止数据残留）后也关闭连接。

步骤8：浏览器解析响应体（HTML/CSS/JS等）

浏览器接收服务器返回的响应体后，开始解析核心资源——HTML文件，此过程由浏览器的“渲染引擎”（如Chrome的Blink、Firefox的Gecko）完成，核心是构建两个模型：

DOM树（文档对象模型）：
- 渲染引擎按“从上到下”的顺序解析HTML标签，将每个标签（如<html>、<div>、<p>）转换为DOM节点，最终形成一棵层级结构的“DOM树”（代表页面的结构和内容）。
CSSOM树（CSS对象模型）：
- 解析HTML中嵌入的CSS（<style>标签）、外部CSS文件（<link rel="stylesheet">），将CSS样式规则转换为CSSOM节点，形成“CSSOM树”（代表页面的样式规则）。

注意：解析HTML时若遇到<script>标签（JS代码），渲染引擎会暂停HTML解析（JS可能修改DOM/CSSOM），优先执行JS代码（可通过async/defer属性优化）。

步骤9：渲染页面（构建渲染树并绘制）

DOM树和CSSOM树构建完成后，渲染引擎将两者结合，生成渲染树（Render Tree），然后通过“布局”和“绘制”将页面显示在浏览器窗口：

构建渲染树：
- 筛选DOM树中“可见节点”（如<head>、display: none的节点不加入），然后为每个可见节点匹配CSSOM中的样式规则，形成包含“内容+样式”的渲染树。
布局（Layout/Reflow）：
- 计算渲染树中每个节点的位置和大小（如宽度、高度、左边距、字体大小），根据浏览器窗口尺寸（视口）确定节点在页面中的具体坐标，生成“布局树（Flow Tree）”。
绘制（Paint）：
- 渲染引擎按布局树的顺序，调用操作系统的“图形接口”（如Windows的GDI、Linux的Cairo），将节点的样式（颜色、背景、边框、图片）绘制到屏幕上（先绘制背景，再绘制文字、图片等）。
合成（Composite）：
- 现代浏览器会将页面拆分为多个“图层”（如视频、动画、绝对定位元素），分别绘制后再“合成”为最终页面，此过程可优化动画流畅度（避免整体重绘）。

步骤10：加载附加资源与页面交互

HTML页面显示后，浏览器会继续加载页面中引用的附加资源：

图片（<img>）、音频（<audio>）、视频（<video>）；
外部JS文件（<script>）、外部CSS文件（<link>）；
字体文件（@font-face）、图标库等。

这些资源的加载流程与HTML类似（DNS解析→TCP连接→请求→响应），浏览器会开启多个并发连接（HTTP/1.1默认6个，HTTP/2支持多路复用）加速加载。

最终，页面完全渲染并可交互（如点击按钮、输入文本），整个流程结束。

核心流程总结

graph TDA[输入URL] --> B[DNS解析（域名→IP）]B --> C[TCP三次握手建立连接]C --> D{是否为HTTPS?}D -- 是 --> E[TLS/SSL建立加密通道]D -- 否 --> F[发送HTTP请求]E --> FF --> G[服务器处理请求并返回响应]G --> H[TCP四次挥手关闭连接]H --> I[解析HTML/CSS，构建DOM/CSSOM树]I --> J[构建渲染树→布局→绘制→合成]J --> K[加载附加资源，页面可交互]