188 lines
4.0 KiB
Markdown
188 lines
4.0 KiB
Markdown
# 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优化测试指南完成！** 🎉
|
||
|
||
**测试通过后即可提交代码！**
|