当用户从订阅页点击浏览器“返回”按钮回到引导页时，页面会短暂闪现第 3 步（而非默认第 1 步），伴随轻微左移动画，严重影响用户体验。该问题源于浏览器前进/后退缓存（bfcache）复用旧渲染状态，而非重新执行 js 初始化逻辑。
当用户从订阅页点击浏览器“返回”按钮回到引导页时，页面会短暂闪现第 3 步（而非默认第 1 步），伴随轻微左移动画，严重影响用户体验。该问题源于浏览器前进/后退缓存（bfcache）复用旧渲染状态，而非重新执行 js 初始化逻辑。
这是一个典型的 浏览器导航缓存（bfcache）导致的状态不一致问题。现代浏览器（Chrome、Edge、Firefox 等）为提升返回性能，会将上一页面保留在内存中（即 back_forward 导航类型），直接恢复 DOM 和样式状态，但不会自动重执行 <script> 中的初始化逻辑</script>。因此，当用户从 subscriptionplans.html 返回 onboarding.html 时：
- HTML 和 CSS 被完整恢复（包括 .steps 的 transform: translateX(-600px) —— 对应第 3 步的偏移）；
- JavaScript 未重新运行，currentStep、stepPosition 等变量仍保持离开前的终态（currentStep = 2, stepPosition = 600）；
- 页面视觉上“卡在第 3 步”，随后因后续脚本（如 onboardingContainer.classList.add("active")）触发重排或样式计算，才短暂抖动并跳转回第 1 步。
✅ 根本解决方案：检测 back_forward 导航并强制刷新
在 onboarding.js 文件最顶部（必须在任何 DOM 操作或状态初始化之前）插入以下代码：
// 检测是否通过浏览器前进/后退按钮返回当前页
if (performance.getEntriesByType) {
const navEntries = performance.getEntriesByType('navigation');
if (navEntries.length > 0 && navEntries[0].type === 'back_forward') {
// 强制刷新以确保状态重置（避免 bfcache 状态残留）
location.reload();
}
}
? 原理说明：performance.getEntriesByType('navigation') 可获取当前页面导航元数据；type === 'back_forward' 明确标识此次加载由用户点击「后退」或「前进」按钮触发。此时主动调用 location.reload() 会绕过 bfcache，以全新上下文重新加载页面，确保所有 JS 初始化逻辑（包括 currentStep = 0、stepsContainer.style.transform = 'translateX(0)'）正确执行。
⚠️ 注意事项与增强建议
- 执行时机至关重要：该检测代码必须置于 JS 文件首行，在 document.querySelector 或任何状态操作之前。若放在初始化之后，页面已渲染错误状态，再刷新则失去意义。
- 兼容性保障：performance.getEntriesByType 在所有现代浏览器中均受支持（Chrome 52+、Firefox 45+、Safari 11.1+）。如需支持极旧版本，可降级为 window.history.state 或 document.hidden + pageshow 事件监听，但本场景中 performance 方案更精准可靠。
- 不要依赖 pageshow 事件：虽然 window.addEventListener('pageshow', e => { if (e.persisted) location.reload(); }) 也能捕获 bfcache 恢复，但存在竞态风险（DOM 可能已部分渲染错误状态），且 persisted 并非 100% 精确匹配 back_forward 场景。
-
CSS 层面辅助（可选）：为防止极端情况下的视觉残留，可在 .steps 上添加初始隐藏样式，待 JS 初始化完成后再显示：
.onboarding-container .steps { opacity: 0; transition: opacity 0.1s; } .onboarding-container.active .steps { opacity: 1; }并在 JS 初始化末尾添加：stepsContainer.style.opacity = '1'; —— 这能进一步消除瞬时闪烁。
✅ 验证效果
部署更新后的 onboarding.js 后，执行以下验证流程：
- 访问 onboarding.html → 手动点击 “Next” 直至第 3 步 → 点击 “Finish” 跳转至 subscriptionplans.html；
- 点击浏览器「后退」按钮；
- 观察：页面应无任何闪动或位移，直接稳定显示第 1 步（含正确激活的 .dot.active 和初始 translateX(0)）。
该方案简洁、可靠、零侵入，无需重构现有 DOM 结构或 CSS 动画逻辑，是解决此类 bfcache 导致 UI 毛刺的业界推荐实践。
