前端性能优化——核心性能指标

• 可以使用 web-vitals 对 SPA应用进行核心性能指标值的获取

import { onFCP, onLCP, onFID, onTTFB } from 'web-vitals'

const getWebVitals = (spaceData) => {
  onFID((webvitals) => TrackTool.trackWebVitals(webvitals, spaceData))
  onFCP((webvitals) => TrackTool.trackWebVitals(webvitals, spaceData))
  onLCP((webvitals) => TrackTool.trackWebVitals(webvitals, spaceData))
  onTTFB((webvitals) => TrackTool.trackWebVitals(webvitals, spaceData))
}

• FCP（First Contentful Paint）：首次内容绘制，指浏览器首次绘制像文本、图片等非空白内容的时间
• LCP（Largest Contentful Paint）：最大内容绘制，指页面中最大的内存绘制完成的时间
• FID（First Input Delay）：首次输入延迟，指用户首次与页面交互到页面响应交互的时间
• TTFB（Time to First Byte）：首字节时间，指浏览器发起请求到接收到响应的时间
• FPS（Frames Per Second）：[[前端性能优化——FPS]]