Perfomance-collect NPM

前端性能数据采集

主要基于 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	页面加载完成的时间