1e59007bd5
根因：主包 2MB 全量组件注入导致 DevTools 渲染引擎内存渐增， 叠加离线时固定 3s 抑制期后的请求洪泛。 修复： - app.config.ts 添加 lazyCodeLoading: requiredComponents 主包 2.0MB→766KB，taro.js 526→131KB，vendors.js 230→28KB - request.ts 离线抑制改为指数退避（3s→6s→12s→30s cap） 后端不可达时自动延长抑制，防止请求风暴 - SegmentTabs Tab 接口改为 readonly，修复 TS 编译错误 - AbortController polyfill 补齐小程序运行时缺失 - 健康首页/设备同步/健康档案/报告/设置页 UI 重构 - 文章页公开端点适配游客访问 - 健康首页 Swiper 间隔优化 4s→5s，动画 500→300ms
176 lines
5.6 KiB
Markdown
176 lines
5.6 KiB
Markdown
# Web 前端性能与兼容性测试
|
||
|
||
> 测试工具: chrome-devtools MCP (Lighthouse + Performance Trace + Emulate)
|
||
> 截图: `g:\hms\screenshots/` | 追踪: `g:\hms\trace-*.json`
|
||
|
||
## 1. Lighthouse 审计
|
||
|
||
### 1.1 Desktop (Navigation)
|
||
|
||
| 类别 | 分数 | 状态 |
|
||
|------|------|------|
|
||
| Accessibility | **94** | GOOD |
|
||
| Best Practices | **100** | PERFECT |
|
||
| SEO | **100** | PERFECT |
|
||
| Agentic Browsing | **61** | NEEDS_WORK |
|
||
|
||
**失败审计项 (4):**
|
||
1. CLS 0.127 超过 0.1 阈值（Desktop 有，Mobile 无）
|
||
2. 浅色模式 `#94a3b8` 灰色文字在白底上对比度 2.56:1（需 4.5:1）
|
||
3. h1 后直接跳 h3，缺少 h2 层级
|
||
4. llms.txt 文件缺少 H1 标题和链接
|
||
|
||
### 1.2 Mobile (Navigation)
|
||
|
||
| 类别 | 分数 | 状态 |
|
||
|------|------|------|
|
||
| Accessibility | **94** | GOOD |
|
||
| Best Practices | **100** | PERFECT |
|
||
| SEO | **100** | PERFECT |
|
||
| Agentic Browsing | **67** | NEEDS_WORK |
|
||
|
||
**失败项与 Desktop 相同**（color-contrast + heading-order + llms-txt）。Mobile CLS 为 0 通过。
|
||
|
||
### 1.3 Dark Mode (Snapshot)
|
||
|
||
| 类别 | 分数 | 下降 |
|
||
|------|------|------|
|
||
| Accessibility | **92** | -2 |
|
||
| Best Practices | **100** | — |
|
||
| SEO | **80** | -20 |
|
||
|
||
**Dark Mode 额外问题:**
|
||
- 侧边栏菜单项对比度不足（4.39:1 / 3.95:1 / 4.45:1，均未达 4.5:1）
|
||
- 表单元素缺少 `label` 关联
|
||
- 分页链接不可爬取
|
||
|
||
## 2. Core Web Vitals
|
||
|
||
### 2.1 工作台（Dashboard）
|
||
|
||
| 指标 | 值 | 评级 |
|
||
|------|-----|------|
|
||
| **LCP** | **1381ms** | NEEDS IMPROVEMENT |
|
||
| **CLS** | **0.04** | GOOD |
|
||
| **TTFB** | **6ms** | GOOD |
|
||
| DOM 大小 | 311 elements | GOOD |
|
||
| DOM 深度 | 13 层 | GOOD |
|
||
|
||
**LCP 瓶颈:** TTFB 6ms (0.4%) + Render Delay **1375ms (99.6%)**
|
||
**CLS 根因:** Noto Sans SC 字体从 Google Fonts 加载导致 FOUT，5 个 woff2 文件
|
||
|
||
### 2.2 患者列表
|
||
|
||
| 指标 | 值 | 评级 |
|
||
|------|-----|------|
|
||
| **LCP** | **2643ms** | NEEDS IMPROVEMENT |
|
||
| **CLS** | **0.01** | GOOD |
|
||
| **TTFB** | **4ms** | GOOD |
|
||
| DOM 大小 | 944 elements | MODERATE |
|
||
|
||
**LCP 瓶颈:** TTFB 4ms (0.2%) + Render Delay **2639ms (99.8%)**
|
||
|
||
**强制回流:** 总计 **460ms**
|
||
- `measureScrollbarSize` (antd): 341ms + 43ms
|
||
- `setScaleParam` (antd): 76ms
|
||
- 全部来自 Ant Design 表格组件内部
|
||
|
||
## 3. 多视口兼容性
|
||
|
||
### 3.1 Desktop 1920×1080 — PASS
|
||
- 侧边栏展开，菜单完整
|
||
- 表格完整显示
|
||
- **注意:** 仪表盘出现"网络连接异常"错误提示
|
||
|
||
### 3.2 Laptop 1366×768 — PASS
|
||
- 侧边栏正常展开
|
||
- 患者表格完整，分页器可见
|
||
- 筛选栏全部可见
|
||
|
||
### 3.3 Tablet iPad 768×1024 — **FAIL (HIGH)**
|
||
|
||
- 侧边栏折叠为仅图标模式
|
||
- **面包屑显示"页面"而非实际名称**
|
||
- **表格数据完全未加载** — 主内容区只有头部和筛选栏，表格区域为空
|
||
- 评级: **H-03**
|
||
|
||
### 3.4 Mobile iPhone 375×812 — **FAIL (CRITICAL)**
|
||
|
||
- 侧边栏展开覆盖全屏
|
||
- 8 列数据在 375px 宽度严重挤压
|
||
- 出现 3 条错误消息（"网络连接异常" + 2×"加载数据失败"）
|
||
- 操作按钮（edit/delete）极小，触摸目标不足 44px
|
||
- 评级: **C-03** — 应提供卡片视图替代
|
||
|
||
### 3.5 Mobile Landscape 812×375 — **FAIL (CRITICAL)**
|
||
|
||
- **内容区域完全空白** — main 区域只有 loading/busy 状态
|
||
- 面包屑显示"页面"
|
||
- 评级: **C-04**
|
||
|
||
## 4. Dark Mode 对比度问题
|
||
|
||
### 4.1 侧边栏低对比度
|
||
|
||
| 元素 | 对比度 | 标准 |
|
||
|------|--------|------|
|
||
| 跳转链接 / H logo | 4.07:1 | 需 4.5:1 |
|
||
| 患者中心 | 4.39:1 | 需 4.5:1 |
|
||
| 患者管理 | 3.95:1 | 需 4.5:1 |
|
||
|
||
### 4.2 系统管理卡片浅色背景（Dark Mode 下不协调）
|
||
|
||
| 元素 | 对比度 | 背景 |
|
||
|------|--------|------|
|
||
| 运行中 | 3.15:1 | 浅绿 |
|
||
| 菜单管理 | 3.84:1 | 浅蓝 |
|
||
| 系统配置 | 3.07:1 | 浅黄 |
|
||
|
||
**根因:** 系统管理区块在 Dark Mode 下仍使用浅色背景，未跟随主题切换。
|
||
|
||
## 5. 网络请求分析
|
||
|
||
### 5.1 API 重复调用
|
||
|
||
仪表盘每个端点被调用 **4 次**:
|
||
|
||
| 端点 | 调用次数 |
|
||
|------|---------|
|
||
| `/health/admin/statistics/patients` | ×4 |
|
||
| `/health/admin/statistics/consultations` | ×4 |
|
||
| `/health/admin/statistics/follow-ups` | ×4 |
|
||
| `/health/admin/points/statistics` | ×4 |
|
||
| `/health/admin/statistics/health-data` | ×4 |
|
||
| `/health/admin/statistics/dialysis` | ×4 |
|
||
| `/health/doctors` | ×4 |
|
||
| `/menus/user` | ×4 |
|
||
| `/config/themes` | ×4 |
|
||
| `/health/action-inbox` | ×4 |
|
||
|
||
**根因:** 可能来自 React Strict Mode 双重渲染 + 组件重复挂载
|
||
**评级:** H-05
|
||
|
||
### 5.2 第三方资源
|
||
|
||
| 资源 | 大小 | 影响 |
|
||
|------|------|------|
|
||
| Google Fonts (Noto Sans SC) | 1.3 MB | 最大外部资源，导致 CLS |
|
||
|
||
## 6. 问题汇总
|
||
|
||
| ID | 严重性 | 问题 | 修复建议 | 工时 |
|
||
|----|--------|------|----------|------|
|
||
| C-03 | CRITICAL | Mobile 375px 表格不可用 | 添加 `<768px` 卡片视图 | 2d |
|
||
| C-04 | CRITICAL | Mobile 横屏内容空白 | 修复 812×375 路由加载 | 4h |
|
||
| H-03 | HIGH | Tablet 768px 数据不加载 | 修复断点 + 侧边栏同步 | 4h |
|
||
| H-04 | HIGH | 患者列表 LCP 2643ms | 字体预加载 + 虚拟滚动 | 1d |
|
||
| H-05 | HIGH | 仪表盘 API ×4 重复调用 | 检查 useEffect 依赖 | 4h |
|
||
| M-03 | MEDIUM | 浅色模式 #94a3b8 对比度 | 改为 #64748b | 30min |
|
||
| M-04 | MEDIUM | Dark Mode 系统管理卡片 | 深色背景变体 | 4h |
|
||
| M-05 | MEDIUM | Antd 表格 reflow 460ms | 固定 scroll.x/y | 2h |
|
||
| M-06 | MEDIUM | Noto Sans SC 1.3MB CLS | font-display: optional | 1h |
|
||
| M-07 | MEDIUM | 面包屑显示"页面" | 修复 tablet/mobile 路由名 | 1h |
|
||
| L-01 | LOW | heading-order h1→h3 | 插入 h2 或 aria-level | 30min |
|
||
| L-02 | LOW | 表单元素缺 label | 添加 aria-label | 1h |
|
||
| L-03 | LOW | antd Drawer width 弃用 | 迁移到 size 属性 | 30min |
|