Load/DOMContentLoaded；FP/FCP；LCP；FID；CLS；lighthouse。

疑问

  • 如何采集交互性能？有什么现成的好的实践么？

    摘要&心得

  • 文中介绍了一个性能守卫系统（基于lightHouse），但是这个性能守卫系统依旧以首屏加载为主，想测具体的交互开销是不行的。

  • 详细的架构设计和代码不做阅读，因为本质上未能解决核心诉求：交互性能测试。只测首屏意义不大（产品特性导致）
  • 性能守卫理论基础
    • Load/DOMContentLoaded 事件
    • FP/FCP 指标
    • LCP（Largest Contentful Paint）
      • 视口内可见的最大内容元素的渲染时间
      • 比如，如果页面渲染前有一个 loading 动画，那么 FCP 可能会以 loading 动画出现的时间为准，而 LCP 定义了 loading 动画加载后，真实渲染出内容的时间。
    • FID（First Input Delay）
      • 用户和页面进行首次交互操作所花费的时间
    • CLS（Cumulative Layout Shift）
      • 越小越好
      • 衡量视觉稳定性
  • 监控素材
    • 真实用户监控（Real User Monitoring，RUM）
      • 可能影响用户访问性能、产生额外网络开销
    • 合成监控（Synthetic Monitoring，SYN）
      • 实验室数据
      • 数据量小、模拟条件配置复杂
  • lighthouse
    • 提供了四种使用方式，分别是：
      • Chrome DevTools
      • Chrome 插件
      • Node cli
      • Node module
    • 性能守卫系统中，采用 Lighthouse 的后两种使用方式（Node.js cli/ Node.js 模块）进行性能跑分