使用Chrome DevTools Lighthouse评估前端应用性能指标
根据您提供的内容，以下是关于 Core Web Vitals 和相关性能测量工具的总结：
Core Web Vitals
Core Web Vitals 是一组关键用户体验指标，旨在帮助开发人员评估和优化网站的性能。这些指标包括三个方面：加载性能、交互性能和视觉稳定性。
三个指标
INP（Interaction to Next Paint）
- 用于评估页面交互的性能。
- 计量用户与页面进行交互（如点击、触摸等）到页面下一次绘制（Paint）之间的时间。
LCP（Largest Contentful Paint）
- 用于评估页面加载的性能。
- 计量页面加载的最大内容元素（如文本块或图片）出现在屏幕上的时间。
CLS（Cumulative Layout Shift）
- 用于评估页面视觉稳定性。
- 计量页面在加载过程中由于内容布局变化而发生的意外移动。
性能测量工具
web-vitals 库
Google 开源的 web-vitals 库可以用来测量一些性能指标。以下是一些示例代码：
import { onCLS, onINP, onLCP, onFCP, onFID, onTTFB } from 'web-vitals'; onCLS(console.log); onINP(console.log); onLCP(console.log); onFCP(console.log); onFID(console.log); onTTFB(console.log); PageSpeed Insights (PSI)
Google 提供的免费工具 PageSpeed Insights 可以用来测试网站的性能。
Chrome Devtools 的 Lighthouse 选项卡
Chrome DevTools 的 Lighthouse 选项卡可以用来测试性能指标。需要注意的是，不同指标在总分数中的占比是不同的。
通过这些工具和指标，开发人员可以更好地评估和优化网站的性能，从而提高用户体验。
