53 lines
1.4 KiB
Markdown
53 lines
1.4 KiB
Markdown
|
# Argon 性能报告功能使用指南
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
`ArgonPerformanceMonitor` 提供性能报告功能，支持开发/生产双模式，自动检测性能问题并提供优化建议。
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### 1. 双模式支持
|
|||
|
|
- **开发模式**：详细的性能分析数据
|
|||
|
|
- **生产模式**：仅输出关键指标
|
|||
|
|
|
|||
|
|
### 2. 性能指标
|
|||
|
|
- DNS 查询、TCP 连接、请求/响应时间
|
|||
|
|
- DOM 解析、页面加载时间
|
|||
|
|
- FCP（首次内容绘制）、LCP（最大内容绘制）
|
|||
|
|
|
|||
|
|
### 3. 智能优化建议
|
|||
|
|
根据性能指标自动生成针对性建议。
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const monitor = new ArgonPerformanceMonitor();
|
|||
|
|
monitor.enable();
|
|||
|
|
|
|||
|
|
window.addEventListener('load', function() {
|
|||
|
|
monitor.recordMetrics();
|
|||
|
|
monitor.report();
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 优化建议阈值
|
|||
|
|
|
|||
|
|
- **总加载时间**: > 3秒严重，2-3秒可优化，< 2秒良好
|
|||
|
|
- **FCP**: > 1.8秒较长，1-1.8秒可优化，< 1秒良好
|
|||
|
|
- **LCP**: > 2.5秒较长，1.5-2.5秒可优化，< 1.5秒良好
|
|||
|
|
- **DOM 查询**: > 100次过多，50-100次较多，< 50次正常
|
|||
|
|
- **事件监听器**: > 50个过多，30-50个较多，< 30个正常
|
|||
|
|
|
|||
|
|
## 最佳实践
|
|||
|
|
|
|||
|
|
1. 在页面加载完成后记录指标
|
|||
|
|
2. 开发环境启用详细报告
|
|||
|
|
3. 定期检查性能
|
|||
|
|
4. PJAX 切换后重新记录
|
|||
|
|
|
|||
|
|
## 验证需求
|
|||
|
|
|
|||
|
|
- ✅ 需求 18.3: 开发模式详细数据
|
|||
|
|
- ✅ 需求 18.4: 生产模式精简输出
|
|||
|
|
- ✅ 需求 18.5: 性能异常优化建议
|