我们每天都会在浏览器地址栏输入网址、点击链接完成一次又一次的页面访问。看似简单的 “输入 - 回车 - 页面加载” 动作背后是一条横跨网络协议、操作系统、浏览器内核、渲染引擎的完整技术链路每一步环环相扣共同决定了页面的加载速度、安全性与最终呈现效果。接下来我们顺着时间线完整拆解一次浏览器请求从发起到页面完全渲染的全过程。一、导航启动从输入框到请求前置检查URL 校验与处理浏览器首先会判断输入内容是合法 URL 还是搜索关键词。如果是 URL会自动补全协议头默认补全http://并解析出协议类型、域名、端口、资源路径、查询参数、哈希值等结构如果是普通文本则调用默认搜索引擎将内容拼接为搜索 URL。多进程调度现代浏览器采用多进程架构一次导航首先由浏览器主进程接收用户输入随后通知网络进程准备发起网络请求同时根据域名判断渲染进程分配同站点复用已有渲染进程跨站点新建独立渲染进程即站点隔离机制保障页面安全。强缓存前置校验在真正发起网络请求前浏览器会优先检查本地强缓存内存缓存 Memory Cache 磁盘缓存 Disk Cache根据请求 URL 和响应头的Cache-Control、Expires字段判断缓存是否过期。如果命中有效强缓存直接返回本地资源无需发起网络请求整个流程在此提前结束。二、DNS 解析把域名翻译成网络可识别的 IP 地址网络通信的基础是 IP 地址而人类易记的域名需要通过 DNS域名系统解析为对应的 IP 地址这是网络请求的 “地址查找” 环节。分层缓存查询机制DNS 解析遵循 “由近及远” 的缓存优先级尽可能减少跨网查询浏览器 DNS 缓存浏览器自身维护的域名 - IP 映射表缓存周期通常为几分钟到几小时系统级缓存操作系统本地缓存与 Hosts 文件配置的静态映射本地 DNS 服务器运营商或企业自建的 Local DNS具备区域级缓存能力根域名服务器全球 13 组根节点指引顶级域名的查询路径顶级域名服务器TLD管理.com、.cn等后缀的域名解析入口权威域名服务器域名最终解析记录的存放节点返回最终 IP 结果两种查询模式DNS 查询分为递归查询与迭代查询客户端到本地 DNS 为递归查询本地 DNS 必须返回最终解析结果本地 DNS 向上到根、顶级域、权威域为迭代查询逐级向下获取指引直到拿到最终 IP。三、连接建立TCP 三次握手与 TLS 安全协商拿到目标 IP 后浏览器需要与服务器建立可靠的传输通道根据协议不同分为 TCP 连接建立以及 HTTPS 场景下的 TLS 加密握手。3.1 TCP 三次握手建立可靠传输通道HTTP 协议底层基于 TCP 传输控制协议三次握手的核心是双向确认双方的发送能力与接收能力均正常客户端向服务器发送 SYN 同步报文进入 SYN_SENT 状态服务器收到 SYN 后回复 SYNACK 确认同步报文进入 SYN_RCVD 状态客户端收到 SYNACK 后回复 ACK 确认报文双方进入 ESTABLISHED 状态连接正式建立采用三次握手而非两次是为了避免历史失效的连接请求到达服务器造成服务器资源空耗同时双向确认收发能力三次是理论上的最少交互次数。3.2 TLS 握手HTTPS 的加密身份验证如果是 HTTPS 请求TCP 连接建立后还会进行 TLS 握手完成加密套件协商、密钥交换与服务器身份验证TLS 1.2 版本需要 2 次往返4 次报文交互完成证书校验、非对称加密交换对称密钥TLS 1.3 优化了握手流程支持 1-RTT 甚至 0-RTT 握手大幅降低加密建立延迟握手完成后后续所有 HTTP 数据都会通过协商好的对称密钥加密传输保障数据的机密性、完整性与防篡改能力。四、请求发送HTTP 报文的传输与流量控制连接建立后浏览器网络进程会构建并发送标准 HTTP 请求报文同时由传输层控制实际数据传输。HTTP 请求报文结构完整的请求报文由三部分组成请求行包含请求方法GET/POST/PUT 等、请求资源路径、HTTP 协议版本请求头键值对形式的元信息包括 Host、User-Agent、Cookie、Accept、Content-Type、缓存标识等请求体POST/PUT 等请求携带的业务数据如表单参数、JSON 报文、文件二进制等不同 HTTP 版本的传输差异HTTP/1.1默认开启长连接Keep-Alive复用 TCP 连接但存在应用层队头阻塞同一域名并发请求数受限制HTTP/2引入二进制分帧与多路复用同一 TCP 连接可并行传输多个请求与响应解决应用层队头阻塞同时支持头部压缩、服务器推送HTTP/3底层基于 UDP 的 QUIC 协议彻底解决 TCP 层队头阻塞连接建立更快弱网环境下传输稳定性更优五、服务器处理与响应返回请求到达服务器后会经过多层业务处理逻辑最终生成响应报文返回浏览器。典型服务端处理链路互联网服务的常规请求链路为CDN 边缘节点静态资源优先命中 CDN 缓存直接返回响应无需回源反向代理层Nginx 等负责负载均衡、请求转发、限流、跨域处理应用服务层后端业务逻辑处理、权限校验、接口计算数据存储层数据库、分布式缓存、对象存储等底层资源HTTP 响应报文结构响应报文与请求对应同样分为三部分响应行协议版本、状态码、状态描述如 200 OK、404 Not Found、500 Internal Server Error响应头包含 Content-Type、Content-Length、Set-Cookie、缓存策略Cache-Control、ETag、Last-Modified、跨域头字段等元信息响应体实际返回的资源内容如 HTML 文本、JSON 数据、图片二进制流等协商缓存判断如果未命中强缓存浏览器会携带If-None-Match对应 ETag 标识、If-Modified-Since对应 Last-Modified 时间发起请求。服务器判断资源未更新时返回 304 状态码浏览器继续使用本地缓存无需传输响应体大幅节省带宽。六、渲染阶段从 HTML 文本到可视化页面浏览器拿到 HTML 响应后导航阶段结束渲染进程接管工作将代码解析为用户可见的页面这一过程也被称为关键渲染路径CRP。6.1 构建 DOM 树与 CSSOM 树DOM 树构建渲染引擎的 HTML 解析器逐行解析 HTML 文本将标签转换为 DOM 节点生成文档对象模型DOM Tree描述页面的结构与内容。解析过程中如果遇到同步script标签会暂停 DOM 解析优先下载并执行 JS 代码因为 JS 可能修改 DOM 结构。CSSOM 树构建同步解析内联、外链的 CSS 样式规则生成 CSS 对象模型CSSOM Tree描述每个节点的样式属性。CSS 解析不会阻塞 DOM 构建但会阻塞 JS 执行与后续渲染步骤。6.2 生成渲染树Render TreeDOM 树与 CSSOM 树结合计算生成渲染树。渲染树只包含可见节点display: none的节点不会出现在渲染树中而visibility: hidden的节点会保留因为其仍占据布局空间。6.3 布局Layout / 重排根据渲染树的节点信息计算每个节点在视口中的精确位置与尺寸这一步称为布局也叫重排。页面首次加载必然触发一次完整重排后续修改元素尺寸、位置、内容时会触发局部或全局重排。6.4 绘制Paint / 重绘布局完成后渲染引擎将每个节点的视觉内容颜色、边框、阴影、文字等绘制到屏幕对应的像素点上这一步称为绘制也叫重绘。重排一定会触发重绘而单纯修改颜色等不影响布局的操作只会触发重绘性能开销远低于重排。6.5 合成Composite浏览器将绘制完成的多个图层按正确层级叠加、合成最终生成屏幕上显示的画面。CSS 的transform、opacity等属性会触发独立合成层跳过重排重绘直接由 GPU 加速合成是前端性能优化的常用手段。6.6 JS 阻塞与优化方案JavaScript 的下载与执行默认会阻塞 DOM 解析因此衍生出多种加载优化方案将 JS 脚本放在页面底部避免阻塞首屏 DOM 构建async异步下载脚本下载完成后立即执行执行时仍会阻塞 DOM多个 async 脚本执行顺序不固定defer异步下载脚本等待 DOM 解析完成后、DOMContentLoaded 事件前执行多个 defer 脚本按加载顺序执行七、收尾阶段连接关闭与缓存持久化页面加载完成后流程并未完全结束还有连接管理与资源缓存的收尾工作。TCP 四次挥手断开连接当所有资源传输完成且连接没有长连接复用需求时会通过四次挥手断开 TCP 连接客户端发送 FIN、服务器回复 ACK、服务器发送 FIN、客户端回复 ACK双方确认后正式关闭连接。长连接复用HTTP/1.1 与 HTTP/2 默认开启 Keep-Alive 长连接一次 TCP 连接可以服务多个 HTTP 请求避免重复握手的性能开销。缓存持久化浏览器将本次请求的可缓存资源写入磁盘缓存更新缓存索引供后续访问直接使用减少重复网络请求。写在最后一次看似简单的浏览器请求实际上串联了应用层、传输层、网络层的网络协议覆盖了浏览器多进程协作、渲染引擎工作原理、分层缓存体系等大量技术细节。前端性能优化的核心思路本质上就是针对这条链路的每个环节做减法减少 DNS 解析耗时、缩短连接建立延迟、降低请求体积、优化渲染路径最终让用户更快、更稳定地看到页面内容。