4.0 KiB
4.0 KiB
11-JS优化测试指南
创建日期： 2026-06-03
版本： v1.0
适用范围： JS按需加载优化测试
🧪 测试步骤
步骤1：构建并启动Hugo
cd E:\GitHub\blog
hugo --cleanDestinationDir
hugo server -D
访问：http://localhost:1313
步骤2：Network面板检查
- 打开DevTools（F12）
- 切换到 Network 面板
- 刷新页面（Ctrl+Shift+R）
预期结果：
- ✅ 看到
core.js文件加载（~200KB） - ✅ 首页不加载
page-only.js - ✅ 文章详情页加载
page-only.js（~180KB） - ✅ 总体JS大小显著减少
步骤3：Lighthouse测试
- 切换到 Lighthouse 面板
- 选择 Performance
- 点击 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：评论区未加载
解决方案：
- 打开Console查看错误
- 检查Network面板，确认page-only.js加载成功
- 等待2-3秒，Artalk可能需要时间初始化
问题2：功能延迟响应
解决方案：
- 这是预期行为，用户可能会感觉到轻微延迟
- 如果延迟明显（>3秒），考虑将该模块移到core.js
问题3：无限滚动失效
解决方案：
- 检查hugo.toml中infiniteScroll.enable是否为true
- 查看Console是否有错误
- 确认infinite-scroll.js加载成功
🔄 回滚方案
如果优化后出现严重问题
# 备份当前文件
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优化测试指南完成！ 🎉
测试通过后即可提交代码！