eagle-tracker

Appearance

On this page

用户性能指标 ​

对于一个网站，除了了解加载速度之外，更关心的可能是用户的使用体验，可以从下列三个方面去考量用户的使用体验

  • 感知加载速度：页面在屏幕上加载并渲染出所有视觉元素的速度
  • 加载响应度：为了使组件对用户交互作出快速响应，页面加载和执行任何所需 JavaScript 代码的速度
  • 视觉稳定性：页面上的元素是否会出现让用户感到意外的偏移，并对用户交互造成潜在的干扰？

首次非网页背景像素渲染(FP) ​

当浏览器将渲染树转换为屏幕上的像素时，浏览器就执行了绘制或渲染。FP表示浏览器首次渲染页面的时间，这不包括默认背景绘制，但包括非默认背景绘制。更多详情可以查看 paint-timing

首次内容绘制(FCP) ​

FCP报告浏览器首次呈现任何文本、图像（包括背景图像）、非白色画布或 SVG 的时间。这包括带有待定网络字体的文本。这是用户第一次开始使用页面内容。

最大内容绘制(LCP) ​

最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。

更多可查看https://web.dev/lcp/

首次输入延迟(FID) ​

FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。

更多可查看https://web.dev/fid/

累计布局偏移(CLS) ​

CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。

更多可查看https://web.dev/cls/

TIP

一些性能指标可以在页面完成加载后进行计算，而其他指标（如 CLS）则会将页面的整个生命周期纳入考量范围，且只有在页面开始卸载后才会完成计算。

这种不统一性就不得不延迟上报时机至页面隐藏时，这样仍然存在问题，某些数据可能没有被测量到。例如，用户可能没有和界面交互就切换了页面，这时FID没有被测量就上报了。

性能指标会在页面卸载时上报

手动获取指标 ​

可以手动获取上述指标，但由于时机问题并不保证调用API时全部指标都采集到了。

typescript
const eagle = new EagleTracker({
  isTest: true,
  appId: 'XXXXXXXX',
  dsn: 'http://test.com/log'
})
const perf = eagle.performance
console.log(perf.getVitals())

具体数据类型可查看 PerformanceMetric