前端性能数据采集

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