按下 F5 后浏览器前端究竟发生了什么当你按下 F5或点击刷新按钮、输入回车时浏览器会启动一次完整的页面重新加载流程。这个过程涉及浏览器、网络、服务器、缓存策略、JavaScript 执行引擎等多个层面。下面按真实时间线和执行顺序完整拆解一次典型的 F5 刷新在浏览器前端到底发生了什么以现代 Chromium 内核浏览器为例2025–2026 主流行为。1. 用户按下 F5 → 浏览器的第一反应~0–10ms浏览器接收到刷新意图检查当前页面是否处于**“可恢复状态”**比如正在播放视频、表单有未提交内容如果有beforeunload事件监听 → 弹出“确定要离开此页面吗”确认框用户点击“离开”或没有监听 → 继续浏览器决定本次刷新的导航类型Navigation Typereload普通 F5reload-bypass-cacheCtrl F5 / Cmd Shift Rhistory navigation前进/后退2. 决定是否使用缓存Cache-Control / ETag / Last-Modified 判断这是 F5 和 CtrlF5 行为差异最大的地方操作方式浏览器行为是否强制重新请求主文档是否检查子资源缓存普通 F5正常重新加载revalidate通常 yes取决于 Cache-Control优先检查缓存304 可复用Ctrl F5强制绕过缓存force reload强制重新请求no-cache强制重新请求所有子资源地址栏回车类似普通 F5但部分浏览器更倾向复用缓存同普通 F5同普通 F5主文档HTML的缓存决策流程最关键检查Cache-Control响应头no-cache/no-store→ 必须重新请求max-age0/ 已过期 → 发起条件请求带 If-Modified-Since / If-None-Match还在有效期内 → 直接使用缓存200 from disk/memory cache如果需要验证 → 发送带条件头的请求If-None-Match: etag值If-Modified-Since: 上次修改时间服务器返回304 Not Modified → 使用本地缓存200 OK 新内容 → 使用新内容3. 浏览器开始真正的加载流程Navigation Start按时间线顺序beforeunload事件如果有→ 页面可以弹窗阻止离开最常见是表单未保存提醒unload事件老旧不推荐依赖→ 现代浏览器几乎不保证执行页面被清空~10–50ms销毁当前页面所有 DOM终止所有运行中的 JavaScript 执行上下文除非是 SharedWorker/ServiceWorker清空绝大多数内存中的 JS 对象但部分缓存可能保留创建新的浏览上下文Browsing Context新建一个“空白画布”触发navigation start发起主资源请求HTMLDNS 解析若无缓存TCP 三次握手若无连接复用TLS 握手HTTPS发送 HTTP 请求带 Cookie、Referer、User-Agent 等接收到 HTML 响应浏览器开始流式解析不是等全部下载完再解析构建DOM TreeHTML Parser遇到script、link、img等 → 发起子资源请求4. 关键的解析与执行阶段最容易被忽视的部分阶段发生什么是否阻塞渲染典型耗时占比HTML Parsing构建 DOM Tree—中等CSSOM 构建解析 CSS → 构建 CSSOM阻塞渲染Render-Blocking中等Preload / Early Hints103 Early Hints / link relpreload提前发起关键资源请求优化关键JavaScript 执行执行同步script、async/defer 策略同步阻塞、async 不阻塞波动最大Pre-parser / Speculative浏览器猜测下一个资源提前下载—现代优化Style Recalculation计算 CSS 规则 → 生成 Computed Style—中等Layout (Reflow)计算每个元素的位置、大小Layout Tree耗时最长阶段之一高Paint生成图层、栅格化 → 绘制到屏幕—中等Composite图层合成 → GPU 加速最终画面通常很快低5. F5 刷新时 JavaScript 的几种命运脚本类型F5 普通刷新时行为CtrlF5 时行为是否保留状态同步script重新下载 重新执行强制重新下载 执行丢失script async可能从缓存执行取决于 Cache-Control强制重新下载 执行丢失script defer同 async同 async丢失内联script直接重新执行不发请求直接重新执行丢失Service Worker可能继续拦截除非 unregister可能被更新可能保留localStorage / IndexedDB保留不随刷新清空保留保留sessionStorage刷新保留关闭标签页清空刷新保留保留6. 现代浏览器对 F5 的若干优化2025–2026bfcacheBack/Forward Cache部分浏览器在后退/前进时使用内存快照而非重新请求103 Early Hints服务器提前返回子资源链接浏览器提前预加载HTTP/2 HTTP/3连接复用、多路复用、0-RTT 复用Cache Partitioning防止跨站点追踪Top-level site frame 的组合 keySpeculation Rules预渲染 / 预取Chrome 等总结按下 F5 后真正发生了什么一句话版浏览器清空当前页面 → 发起主文档请求可能带条件头→ 流式解析 HTML → 并行加载 CSS/JS/图片 → 构建 DOM CSSOM → 执行 JS → 计算样式 → 布局 → 绘制 → 合成 → 显示新页面。普通 F5≈ “有条件重新验证 复用大部分子资源缓存”Ctrl F5≈ “强制重新获取所有资源相当于第一次访问”想深入哪个环节A. 浏览器缓存策略全解Cache-Control、ETag、Vary 等B. F5 时 JavaScript 重新执行的详细生命周期C. bfcache 与普通刷新的区别后退/前进 vs F5D. HTTP/3 Early Hints 如何让 F5 更快E. Chrome DevTools Network 面板如何看清整个过程告诉我字母我们继续深挖