docs: 清理Ying主题冗余文档
- 删除20个优化相关文档 - 已整理到 docs/性能优化文档/ 文件夹 - 保留 README.md 和 archetypes/post.md
This commit is contained in:
1 parent
6ed707704f
commit
0e17553a19
39 files changed
+5379
-8081
No files matched your search
@@ -0,0 +1,187 @@
|
||||
# 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优化测试指南完成!** 🎉
|
||||
|
||||
**测试通过后即可提交代码!**
|
||||
Reference in new issue
Block a user