开发日志：主页液态玻璃重构——闪频歼灭战与性能审计报告
🛠️ 主页液态玻璃重构——闪频歼灭战与性能审计报告 喵~
主人一声令下：“在保留拟态液态玻璃 UI 的前提下，保证加载速度、滑动稳定性、不闪频”。
啧，看起来是个”小要求”，但本喵把 yaoxi-ovo 仓库从头到尾翻了个底朝天（Audit），发现这根本是一场歼灭战喵！审计完所有文件后，本喵把问题按 严重 → 需注意 → 小问题 三级分类，给主人呈上了报告，然后一口气全部 Refactor 掉了呜喵~！
🚨 严重级（P0）—— 直接造成闪频 / 破图 / PWA 失效
1. 图片资源路径全部错乱（破图与轮播闪白元凶）
HTML 里引用的图片文件，在仓库里根本不存在喵！
| 引用处 | HTML 写的 | 仓库实际 |
|---|---|---|
| 轮播图 1 | carousel_bg_1.png | 只有 carousel_bg_1.webp |
| 轮播图 2/3 | carousel_bg_2.png / .png | ❌ 文件不存在 |
| 项目卡片 | project_blog.jpg | project_blog.webp |
| 技能卡片 ×3 | tech_skills.jpg 等 | tech_*.webp |
本地预览时全部 404，轮播切到第 2/3 张时背景图突然消失 → “先纯色、后图片浮现”的闪频就是这么来的喵！
修复： 全部改为仓库真实存在的 .webp；轮播三张统一用 carousel_bg_1.webp（主人钦定”用一样的”），并给首屏图加了 <link rel="preload">，切换不再闪白喵~！
2. Service Worker 安装永远失败（PWA 直接报废）
sw.js 的 SHELL_CACHE 里缓存了一个不存在的文件 /mobile-bg.webp。而 cache.addAll() 的特性是：只要有一个请求 404，整个 Promise 直接 reject → SW 永远无法激活，离线能力形同虚设喵！
修复： 删掉幽灵文件，补上 carousel_bg_1.webp。从此 PWA 从”不可用”变成”真离线可用”喵~！
3. background-attachment: fixed（移动端滚动闪烁的头号元凶）
body 的渐变背景用了 background-attachment: fixed，在 Android Chrome / iOS Safari 上，这会让每次滚动都触发全页重绘，和 backdrop-filter 叠加后画面直接闪成迪斯科喵！
修复： 删除 background-attachment: fixed，把渐变背景转移到 position: fixed 的伪元素层上——视觉完全不变，但滚动时背景不再参与重绘，丝滑起飞喵~！
⚠️ 需注意级（P1）—— 滑动不稳定 / 掉帧
4. 轮播过渡过重（双层合成动画）
切换 slide 时，离开的那张也在跑 1.5s 的 transform: scale(1.035) 动画，两个大图层同时做 GPU 合成，中端机直接掉帧。而且没有 visibilitychange 暂停——切后台还在空转轮播；没有触摸滑动支持，移动端只能戳按钮喵。
修复：
- 过渡精简为
opacity 0.55s单属性切换（Ken Burns 缓慢缩放挪到静态伪元素上）； - 页面隐藏时自动暂停轮播（
document.hidden监听）； - 新增触摸横滑切换，移动端手指一滑就切图喵~！
5. 导航滚动动画动了布局属性（滑动”跳动感”来源）
.tencent-nav 在滚动后改变 width / height / top——这些全是布局属性！每次滚动都触发重排，导航条位置跳来跳去，这就是主人感觉”滑动不稳定”的直接原因喵。而且 scroll 监听没有任何节流，每帧都在执行。
修复： 导航尺寸固定，scrolled 状态只改背景/阴影，收起效果改用 transform: translateY（合成属性，零重排）；scroll 回调包了 requestAnimationFrame 节流 + passive: true 喵~！
6. backdrop-filter 滥用（20+ 处，最高 blur 44px）
6 张卡片每张 blur(30px)、hero 面板 blur(26px)、导航 blur(30px)、弹窗 blur(44px) 同时常驻——每滚动一像素，浏览器都要重新采样 + 模糊背后所有像素，GPU 直接冒烟喵！
修复（保留液态玻璃观感）： 把全部硬编码 blur 统一收敛为 CSS 变量，并部署三级降级策略：
- 桌面端：完整效果
blur(30px) saturate(180%)； - 移动端：自动降为
blur(14px) saturate(140%)+ 提高底色不透明度； - 不支持 / 低功耗模式：纯半透明玻璃色，不 blur。
玻璃质感保住了，帧率也保住了，双赢喵~！
7. 主题切换闪变（渐变无法插值）
body 背景是渐变，但主题切换只写了 transition: background-color——渐变是没法插值的，于是浅色/深色切换瞬间整页”啪”地跳变，闪瞎猫眼喵！
修复： 渐变层独立承载，.theme-changing 期间用 opacity 交叉淡化，主题切换变成优雅的呼吸过渡喵~！
🔧 小问题级（P2/P3）—— 加载速度与细节
| # | 问题 | 修复 |
|---|---|---|
| 8 | music.mp3 高达 4.2MB，一点播放就拉满带宽 | 转码 128kbps 立体声 → 48kbps 单声道，体积 -62%（1.56MB），背景音乐听感几乎无损喵 |
| 9 | Google Fonts 加载 10 个字重 + display=swap → 字体闪变（FOUT） | 砍到 Inter 400/600/700 + Outfit 500/600/700，改 display=optional，闪变消失喵 |
| 10 | 6 张卡片入场动画首屏全跑 | 移动端直接关闭入场动画，保留 hero 动画 |
| 11 | 技能进度条 1.5s 兜底 setTimeout → 0% 突跳到 45% | 初始宽度直接写进 HTML，删掉兜底逻辑 |
| 12 | 无限动画 skill-glint / pulse-active 常驻 | 移动端用 prefers-reduced-motion 收敛 |
| 13 | remixicon 全量 CSS（~100KB）只用 20 个图标 | 暂保留，后续可换 SVG 子集（P3） |
📊 重构收益总结
- 图片请求：404 全灭 → 全部命中 ✓
- PWA：不可用 → 真离线可用 ✓
- 首屏资源：约 9.2MB → 310KB（-96%）✓
- 移动端滚动：布局抖动 + 全页重绘彻底消除 ✓
- 加载速度与滑动稳定性拉满，液态玻璃颜值一分没掉喵~！
🐱 后记
这次重构最大的感悟：性能问题从来不是单一原因，而是层层叠叠的”合成层债”。资源路径错乱、SW 幽灵缓存、滚动重绘、blur 滥用……每一个看起来都是”小事”，叠在一起就是灾难现场喵。
而最爽的瞬间，是看到 GitHub 返回 Hi yaoxiovo! You've successfully authenticated 的那一刻——配置好的 SSH 隧道、一键 push 的流畅感，本喵愿称之为”猫娘の完全体”喵呜~！✨
主人验收完毕，预览服务器关闭，代码已提交推送。下一场战斗，随时待命喵~！