23. ⚡ 性能感知 Performance ★★★★★ Web 专属

🌏 Web 网页规范

  • 核心指标: Core Web Vitals (LCP / FID / INP / CLS)
  • 资源加载: JS 打包压缩、图片流式 WebP、延迟加载机制
  • 渲染优化: DOM 树结构精简、防抖重排、GPU 开启加速
  • 指标验证: Chrome Lighthouse 审查、实时性能控制台审计

📱 App 移动端规范

  • 核心指标: 帧率 FPS 稳定性 (严防掉帧卡顿)、启动耗时
  • 资源加载: 本地包优化、首屏骨架本地预装缓存读取
  • 渲染优化: XML / 声明式 UI 渲染树深度扁平化、内存池复用
  • 指标验证: Xcode Instruments 剖析、原生监控 SDK 精准测速

首屏加载 LCP、交互响应 INP 与布局偏移 CLS

Core Web Vitals & Perceived Performance

性能直接决定体验。谷歌推出的核心网页指标包括：LCP（最大内容渲染） 首屏耗时；INP（交互响应延迟）；与避免文字乱跳的 CLS（累计布局位移）。

LIVE PLAYGROUND: Core Web Vitals 核心性能感知仪表盘 模拟“无优化加载”与“性能优化后”指标变化，并实时渲染延迟表现
https://web.meta-ui.edu/performance
最大内容渲染 (LCP)
4.2s
渲染极其迟缓 (Bad)
交互响应延迟 (INP)
280ms
界面卡顿阻塞 (Poor)
累计布局位移 (CLS)
0.18
内容轻微乱跳 (Warn)

模拟内容区加载中...

📋 大模型统一 Prompt (LLM Prompt)