Performance

Performance

本站的系统前端性能专项已推进到 V3，并合入 master。

本页记录目标、方法、实测数字、移动端规则与复测边界。改性能前先读，别凭直觉下手。

核心结论：瓶颈往往不在「下载慢」，而在「画不出来」。先上探针拿证据，再改代码。

目标与铁律

用户最痛的是「点击跳转要极快」（Swup SPA 跳转 / LCP / TTI）。

铁律（不可违背）：界面样式是站主精心美化的，绝不阉割/删除美化组件换性能。
只优化「加载策略 + 生命周期」——防重复注册、按需加载、离页销毁。任何触碰视觉/交互的改动必须先经站主同意。

实测成果（本地生产 build，5 次中位数）

指标	优化前	优化后	变化
移动 4G LCP	27236 ms	8332 ms	-69%
桌面 LCP	960 ms	712 ms	-26%
堆净增（20 跳）	18.9 MB	9.7 MB	-48%
监听器净增（20 跳）	14096	9989	-29%
节点净增（20 跳）	123642	97240	-21%
首屏字体请求	50	6	收敛
功能回归	—	8 页全 200、0 报错	通过

上表是 2026-08-09 的同环境历史基线。2026-08-13 V3 继续处理移动端信息密度、DOM、forced layout、TagCloud reflow 和组件生命周期：

V3 指标	参考值	当前值	变化与口径
移动端 LCP	3241 ms	2221 ms	-31.5%；线上旧版 vs 本地当前版，趋势值
桌面 LCP	1696 ms	420 ms	-75.2%；环境不可比，仅作方向验证
移动端 DOM 节点	3597	3015	-16.2%
桌面 DOM 节点	3598	≈3200	-11.1%
移动端 forced layout	3734 ms	2590 ms	-30.6%
TagCloud reflow	723 ms	140 ms	-80.6%
CLS	—	0	当前验收值

V3 的关键边界：LCP 跨线上 / localhost 的数据不当作严格 A/B；DOM、reflow、CLS 与功能回归用于判断当前实现是否退化。

移动端不是 PC 等比缩小

小屏使用“删冗余、缩控件、保主链路”的规则：

• RepelText 字符与 TagCloud CDN / 动画在移动端归零；
• Calendar / Recommend 不重复拉 allPostMeta；
• 底部冗余侧栏不渲染；
• 主题切换从 85×40 长条缩为 35×35 icon；
• Footer、CategoryBar、Navbar 和分页按触控尺寸与信息优先级重排。

这些是响应式产品决策，不是把桌面端整体缩放。

移动 LCP 案例：一张图为什么 21s 才画出来

这是本轮最典型的「假根因 → 真凶」教学案例。

现象：移动 4G 下首屏横幅图（m1）LCP 高达 21s+。

证据链（CDP 探针实测）：

m1 网络下载完成:        4.6 s
m1 解码完成(img.complete): 8.6 s
#wallpaper-wrapper 显示:  23.6 s   ← 卡在这
LCP 实际绘制:            ~21 s

真凶：#wallpaper-wrapper 在 SSR 时带了 display: none，要等 initWallpaperMode() 来 display: block。而这个函数挂在 DOMContentLoaded 上——移动弱网 + 4x CPU 下 DCL 要 23s 才触发。图早就下好了，就是一直被藏着。

修复（只动加载策略，不碰视觉）：

1. banner 模式首页 SSR 不再写 display: none（移动端非首页仍由 mobile-hide-banner class 隐藏），首帧 fadeIn={false} 去掉 opacity-0 的 JS reveal 依赖。
2. 侧栏「园径便签」背景视频（518KB .mp4）改 data-src 惰性注入，PerformanceObserver 监听 LCP 落定后再播放，移出 LCP 窗口。

教训：排查时先后被三个假根因带偏——氛围层 11 张图（实为旧部署缓存数据）、opacity-0 reveal（改完只动一点）、CPU 节流（1x CPU 仍 18s）。是探针的逐帧时间线戳破了直觉。

四大类优化手段

类别	手段	代表 commit
泄漏治理	page-lifecycle runtime（Swup 换页统一 abort/cleanup）、WalineController 离页销毁、TagCloud keep:false、14+ 组件幂等 guard	44d6a536 a95206bc 46f9dd3b
图片加载	桌宠只预取当前皮、氛围层只物化当前帧、idle 预取改 hover、日历 IntersectionObserver 按需、轮播物化上限 + m1 eager/avif	4f3d733d 63babfe6 a1e86474
覆盖率	三岛 client:idle、Pagefind 懒加载、内联脚本外置（assetsInlineLimit: 0）	5ec897ec 7ded7f5f
渲染门控	banner 首帧去 display:none / fadeIn、装饰视频 LCP 后加载	e60a9606 9d9b149c

page-lifecycle runtime（防 Swup 泄漏的关键）

Swup 多跳会累积匿名监听器 / observer / timer。src/lib/page-lifecycle.ts 提供 per-page epoch，换页时统一清理：

API	用途
bootPageLifecycle()	幂等启动（Symbol.for 全局 guard），挂 astro:before-swap / swup:page:view
onPage(target, type, handler)	带 AbortSignal 的监听，换页自动移除
observePage(observer)	Mutation/ResizeObserver 换页自动 disconnect()
setPageTimeout / requestPageFrame	换页自动 clearTimeout / cancelAnimationFrame
registerPageCleanup(fn)	注册任意清理函数

用法：组件里 bootPageLifecycle() 后用上述 API 替代裸 addEventListener / setInterval。参考 src/components/comment/agent-avatar.ts。

复测工具（探针）

完整探针脚本在 Codex 会话证据目录（见主仓 handoff 文档索引）。核心方法：

• 本地验证：Windows 先确认没有进程锁住 dist，再清理 dist / .astro、执行 pnpm build，用本地静态服务托管 dist/client；探针目标显式设为本地 URL。
• LCP 诊断：CDP Network.requestWillBeSent 抓请求发起方 + PerformanceObserver('largest-contentful-paint') 拿 loadTime/renderTime + longtask/Profiler 定位主线程瓶颈。
• 泄漏：20 跳 Swup 导航后对比 JSEventListeners / Nodes / JSHeapUsedSize 净增。

踩过的坑（别再踩）

坑	现象	正解
本地 server 锁 dist	改了代码复测全假象	验证前停掉 serve dist/client 的进程，再用 PowerShell 清理指定的 dist / .astro
.astro 缓存被清	dev server 文章列表空 / 文章页 404	重启 dev server（内容集合缓存重建）
旧部署探针数据	拿着过期数据当现状	先确认探针打的是不是最新部署/最新 build
只信「报告说快」	优化无数字背书	每项改动必须探针前后对比

V9：文章跳转原子化（2026-08-21 · v1.4.0）

对照 2x.nz 现网调研后重构文章导航关键路径：

• 同帧提交：DOM 替换、URL pushState、布局切换与回顶压进 content:replace 的同一个同步 task，浏览器无法绘制「新 URL + 旧首页」中间态；1.5s 强制慢网复审中三者于 2368ms 同帧出现。
• 意图预取：自建 2 并发队列接管 pointerover / focusin / touchstart，仅空闲预取首两篇；Swup 插件默认预载关闭。
• 失败保页：请求失败保留旧 URL / DOM / 滚动并弹非阻塞重试提示；Back / Forward 恢复原滚动位，无重复历史压栈。
• 动效让渡：导航等待期暂停桌宠逐帧、标签球与氛围动画，rAF 化桌宠播放并引入距离感知漫游。

门禁：导航 18/18、UI 动效 10/10、owner 静态 9 + 动态 12、社区 9/9；astro check 0 errors。详见主仓 docs/outputs/prd/navigation-owner-experience/prd.md。

相关

• 主仓 handoff：docs/outputs/handoff/perf-optimization-2026-08-09.md · docs/outputs/handoff/perf-optimization-2026-08-13-v3.md
• Architecture · Troubleshooting · Deploy-and-CDN