iven/hms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
03ead443856bc8eeea9bf0356e753cdb747bcc80
hms/docs/audits/v3-beta/03-web-perf-compat.md
iven 1e59007bd5 fix(mp): DevTools 卡死 + 主包 2MB→766KB + 代码质量 4 项全通过 
根因：主包 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
2026-05-24 11:32:40 +08:00

5.6 KiB
Raw Blame History

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
Reference in New Issue View Git Blame Copy Permalink