前端性能数据采集
主要基于 window.performance 对 firstPaint（FP）、firstContentfulPaint（FCP）、largestContentfulPaint（LCP）、firstInputDelay（FID）、domContentLoaded、resourceLoaded、timeToFirstByte（TTFB）进行数据的计算采集；通过官方工具 tti-polyfill 完成对timeToInteractive（TTI）的采集。
安装
1、npm 安装 npm i perfomance-collect
初始化
在项目的入口文件初始化
import { init } from 'perfomance-collect'
// 两个参数必填，否则会的采集
init({
env: isOnline ? 'online': 'dev', // 环境，线上环境可以使用online，其他环境使用dev
platform_name: 'component-platform-web' // 平台名称
})
采集字段说明
| 字段名称 | 计算方式 | 说明 |
|---|---|---|
| firstPaint（FP） | new PerformanceObserver()中通过getEntries()取type=paint 和 name = first-paint | 首次绘制 |
| firstContentfulPaint（FCP） | new PerformanceObserver()中通过getEntries()取type=paint 和 name = first-contentful-paint | 首次内容绘制 |
| largestContentfulPaint（LCP） | new PerformanceObserver()中通过getEntries()取type=largest-contentful-paint | 最大内容绘制 |
| firstInputDelay（FID） | new PerformanceObserver()中通过getEntries()取type=first-input，processingStart - startTime | 首次输入延迟 |
| timeToInteractive（TTI） | 通过 tti-polyfill 获取 | 首次可交互时间 |
| timeToFirstByte（TTFB） | responseStart - fetchStart | 请求到第一个字节耗时 |
| domContentLoaded | domContentLoadedEventEnd - fetchStart | HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的完成加载 |
| resourceLoaded | loadEventEnd - fetchStart | 页面加载完成的时间 |