# 11-JS优化测试指南

**创建日期：** 2026-06-03  
**版本：** v1.0  
**适用范围：** JS按需加载优化测试

---

## 🧪 测试步骤

### 步骤1：构建并启动Hugo

```bash
cd E:\GitHub\blog
hugo --cleanDestinationDir
hugo server -D
```

访问：`http://localhost:1313`

---

### 步骤2：Network面板检查

1. 打开DevTools（F12）
2. 切换到 **Network** 面板
3. 刷新页面（Ctrl+Shift+R）

**预期结果：**
- ✅ 看到 `core.js` 文件加载（~200KB）
- ✅ 首页不加载 `page-only.js`
- ✅ 文章详情页加载 `page-only.js`（~180KB）
- ✅ 总体JS大小显著减少

---

### 步骤3：Lighthouse测试

1. 切换到 **Lighthouse** 面板
2. 选择 **Performance**
3. 点击 **Analyze page load**

**预期指标：**
- [ ] Performance得分：75-85（提升15-25分）
- [ ] TTI：改善20-30%
- [ ] TBT：改善40-50%
- [ ] Speed Index：改善20-30%

---

## 🔍 功能测试清单

### 首页功能

**核心功能（必须正常）：**
- [ ] 导航菜单点击正常
- [ ] 搜索框打开/关闭正常
- [ ] 搜索结果显示正常
- [ ] 主题切换（深色/浅色）正常
- [ ] 文章列表显示正常
- [ ] 分页功能正常
- [ ] 浮动工具栏正常

**条件加载功能：**
- [ ] 无限滚动正常（如果启用）

---

### 文章详情页功能

**核心功能（必须正常）：**
- [ ] 文章内容正常显示
- [ ] 图片灯箱正常（点击查看大图）
- [ ] 返回顶部按钮正常

**按需加载功能（必须正常）：**
- [ ] Artalk评论区正常加载（等待1-2秒）
- [ ] 评论功能正常（发布、回复）
- [ ] 打赏按钮功能正常
- [ ] 段落评论正常（如果启用）

---

### 其他页面功能

- [ ] 友链页面（/links）正常
- [ ] circles页面（/circles）正常
- [ ] 归档页面（/archives）正常
- [ ] 搜索结果页正常

---

### 跨页面功能

- [ ] PJAX导航正常（页面无刷新切换）
- [ ] 浏览器前进/后退正常
- [ ] 书签/分享链接正常

---

## 📊 性能指标对比表

### Network面板数据

| 资源 | 优化前大小 | 优化后大小 | 减少 |
|------|-----------|-----------|------|
| **首页JS** | 800KB | ____KB | ____% |
| **文章页JS** | 800KB | ____KB | ____% |
| **总体资源** | ~3MB | ____KB | ____% |

### Lighthouse指标

| 指标 | 优化前 | 优化后 | 提升 |
|------|--------|--------|------|
| **Performance得分** | 60 | ____ | +____ |
| **FCP** | 2.5s | ____s | ____% |
| **LCP** | 3.5s | ____s | ____% |
| **TTI** | 4.0s | ____s | ____% |
| **TBT** | 350ms | ____ms | ____% |
| **Speed Index** | 3.0s | ____s | ____% |

---

## 🐛 故障排除

### 问题1：评论区未加载

**解决方案：**
1. 打开Console查看错误
2. 检查Network面板，确认page-only.js加载成功
3. 等待2-3秒，Artalk可能需要时间初始化

---

### 问题2：功能延迟响应

**解决方案：**
- 这是预期行为，用户可能会感觉到轻微延迟
- 如果延迟明显（>3秒），考虑将该模块移到core.js

---

### 问题3：无限滚动失效

**解决方案：**
1. 检查hugo.toml中infiniteScroll.enable是否为true
2. 查看Console是否有错误
3. 确认infinite-scroll.js加载成功

---

## 🔄 回滚方案

### 如果优化后出现严重问题

```bash
# 备份当前文件
cp themes/Ying/layouts/partials/footer.html themes/Ying/layouts/partials/footer.html.optimized

# 恢复原始代码（参考TEST_JS_OPTIMIZATION.md中的回滚方案）
```

---

## ✅ 测试通过标准

### 功能标准（必须全部通过）

- ✅ 所有页面正常显示
- ✅ 核心功能正常（导航、搜索、主题切换）
- ✅ 文章详情页功能正常（评论、打赏、灯箱）
- ✅ 无限滚动正常（如果启用）
- ✅ PJAX导航正常
- ✅ 无Console错误（或只有非关键警告）

### 性能标准（至少达到一项）

- ✅ Lighthouse Performance得分提升10+分
- ✅ TTI改善15%+
- ✅ TBT改善30%+
- ✅ 总体JS大小减少40%+

---

**JS优化测试指南完成！** 🎉

**测试通过后即可提交代码！**