🚀 XHBlogs 全站性能优化报告
统一策略：前 N eager · 后 lazy · 滑动窗口预加载 · 并发 3
📷 照片墙
100 相册 × 3 图 = 300 张 · 3列 × 2行 = 一屏 6 个
❌ 改前： 全量预加载——前 6 个 eager 后，slice(6) 把剩余 94 个全丢进队列，282 个 new Image()。
✅ 改后： 滑动窗口——只预加载接下来 12 个（36 张），其余 lazy。
| 相册 | 策略 |
|------|------|
| 1 ~ 6 | eager 直接显示 |
| 7 ~ 18 | 预加载 36 张（后台 new Image） |
| 19 ~ 100 | lazy 不到不下 |
参数： eager=6 · preload=12 · 并发=3 · rootMargin=800px · 仅改 1 文件
✈️ 旅行
垂直时间线 · 单列 · 一屏 ≈ 3 个卡片 · 每卡 1 封面
❌ 改前： 27 张封面全 eager · 所有卡片全 DOM 绘制 · 0.5s。
✅ 改后： content-visibility 跳过离屏绘制 + 图片分层。
| | 13 | 46 | 7~27 |
|------|:--:|:--:|:--:|
| 封面图 | eager | 预加载 | lazy |
| DOM | 绘制 | 跳过 | content-visibility:auto |
⏱ 0.5s → 0.3s
参数： eager=3 · preload=3 · content-visibility:auto · 改 3 文件
🎬 动漫
Grid 网格 + 分页 · 每页 10 张海报 · 5 列布局
❌ 改前： 假翻页——100 个卡片全在 DOM，CSS hidden 隐藏，100 张同时下载。
✅ 改后： 真翻页 slice——只渲染当前页 10 张，effect 预加载下一页。
| 第 1 页 | 其余页 |
|------|------|
| eager 10 张立刻看 | 不渲染 · 点"下一页"秒出 |
参数： 真翻页 slice · 预加载下一页 · 仅改 1 文件
💬 杂谈
grid 网格 3 列 · 100 条 · 每条 1 封面 · 视口仅可见 1 行
❌ 改前： columns 瀑布流 + 100 卡片全量渲染 + PageTransition 卡顿。
✅ 改后： columns → grid + 分批渲染 + 图片预加载。
① 布局： columns 先列后行 → grid 先行后列，新卡片只从底部追加，零闪变。
② 分批渲染：
| 时间 | 卡片 |
|------|------|
| 0s | 1 ~ 3（一行） |
| 600ms | 4 ~ 6 |
| 632ms | 7 ~ 9 |
| ... | 每 32ms +3 张 |
| ~1.3s | 全部 100 到位 |
③ 图片：
| 封面 | 策略 |
|------|------|
| 1 ~ 3 | eager |
| 4 ~ 9 | 预加载 |
| 10 ~ 100 | lazy + Observer |
试错记录： content-visibility（columns 不兼容）→ opacity 隐藏（透明元素穿插列中）→ 全量渲染（动画卡）→ grid + 分批 ✅
参数： INITIAL=3 · BATCH=3 · DELAY=600ms · 双 RAF · 仅改 1 文件
⏳ 创作（时间线）
交替 TimelineNode · 单列 · 一屏 ≈ 3 个卡片
❌ 改前： 100 个 TimelineNode 全量绘制 + 全 eager + whileInView × 100。
✅ 改后： 同旅行页方案。
| | 13 | 46 | 7~100 |
|------|:--:|:--:|:--:|
| 封面图 | eager | 预加载 | lazy |
| DOM | 绘制 | content-visibility 跳过 | content-visibility 跳过 |
参数： eager=3 · preload=3 · content-visibility:auto · rootMargin=800px · 改 2 文件
🧪 灵境
炼金术师档案 + 药瓶书架 · 100 篇文章 ≈ 13 层书架 · 每层 8 药瓶 + SVG 动画
❌ 改前：
-
mounted=false→ 加载中 →useEffect→setMounted(true)→ 内容延迟 0.5s -
13 层书架全量渲染 → PageTransition 期间每帧重绘全部 SVG → 掉帧
✅ 改后：
① 去 mounted： useState(false) → useState(true)，首帧直接渲染，消灭 0.5s 白屏。
② 书架分批：
| 时间 | 书架 |
|------|------|
| 0s | 1 层 |
| 600ms | 3 层 |
| 700ms | 5 层 |
| 800ms | 7 层 |
| ~1.1s | 13 层全部 |
月份切换 → 自动重置为 1 层 → 重新分批
参数： INITIAL=1 · BATCH=2 · DELAY=600ms · 间隔=100ms · 改 2 文件
✅ 同时修复 DijiangModel（帝江号舰船）相同的 mounted 延迟
📊 总结
| 页面 | 核心策略 | 文件 |
|------|---------|:--:|
| 📷 照片墙 | 滑动窗口预加载 | 1 |
| ✈️ 旅行 | content-visibility + eager/lazy | 3 |
| 🎬 动漫 | 真翻页 | 1 |
| 💬 杂谈 | columns→grid + 分批渲染 | 1 |
| ⏳ 创作 | content-visibility + 预加载 | 2 |
| 🧪 灵境 | 删 mounted + 书架分批 | 2 |