zhangdi

性能监控 ​

学习 ​

性能指标 ​

指标 ​

指标描述衡量标准
FPFirst Paint
首次绘制（❓白屏时间），包括了任何用户自定义的背景绘制，它是首先将像素绘制到屏幕的时刻
FCPFirst Contentful Paint
首次内容绘制（❓白屏时间）
浏览器首次呈现text、image（包括背景图像）、非白色Canvas或SVG的时间。		1.8s，3.0s
FMPFirst Meaning Paint
首屏渲染
LCPLargest Contentful Paint
最大内容渲染耗时
从用户请求网址到在可视窗口中渲染最大可见内容元素所需的时间。最大的元素通常是图片或视频，也可能是大型块级文本元素。		2.5s，4.0s
TTFBTime to First Byte
首字节
1.阿里云：responseStart - requestStart
2.腾讯云：发出页面请求到接收到应答数据第一个字节所花费的毫秒数。		0.8s，1.8s
CLSCumulative Layout Shift
累积布局配置偏移
量化由于动态加载的内容（例如第三方广告）而导致的意外页面移动，其中0表示没有发生变化。		0.1，0.25
FIDFirst Input Delay
首次输入延迟
Chrome要把这个换掉了，改为 INP，但目前阿里云和腾讯云还是这个指标。		100ms，300ms
INPInteraction to Next Paint
通过观察用户在访问网页的整个生命周期内发生的所有点击、点按和键盘互动的延迟时间，评估网页对用户互动的总体响应情况。		200ms，500ms
TTITime to Interactive
可交互时间
从 Lighthouse 10 中移除了 TTI 作为指标。
TBTTotal Block Time
在 FCP 之后主线程被阻塞的时间足以阻止输入响应的总时间
指标公式描述
DNSdomainLookupEnd - domainLookupStart
TCPconnectEnd - connectStart
SSLrequestStart - secureConnectionStart发起请求是HTTPS
请求响应responseStart - requestStart
内容传输responseEnd - responseStart
DOM解析domInteractive - domLoading
资源加载loadEventStart - domContentLoadedEventEnd/domInteractive
页面完全加载从用户请求打开新网页到浏览器完全呈现出相应网页所用的时间

WARNING

The performanceTiming API, a JavaScript API for measuring the loading performance of the requested page, is deprecated but supported in all browsers. It has been replaced with the performanceNavigationTiming API.

window.performance ​

PerformanceObserver ​

js
const observer = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    console.log(entry)
  })
})
observer.observe({
  entryTypes: [
    'element',
    'event',
    'navigation',
    'paint',
    'longtask',
    'largest-contentful-paint',
    'resource',
  ],
})

测试工具 ​

Chrome工具 ​

网站类 ​

Lighthouse ​

Performance ​

Web Vitals ​

错误类型 ​

1.全局错误 ​

window.addEventListener('error')

资源加载错误 ​

window.addEventListener('error') 判断 src || href

2.局部错误 ​

即捕获try...catch、promise.then、promise.catch 等的错误

window.addEventListener('unhandledrejection')

3.接口请求错误 ​

在二次封装请求 API 中进行请求和接收响应时的错误

写在拦截器中

4.组件级错误 ​

使用 Vue/React 组件时发生的错误

监控系统 ​

阿里云ARMS ​

腾讯云RUM ​

INFO

按量付费（后付费）

  • 单个主账号每天共享50万条的免费上报数据量
  • 对超过 50 万条上报次数的部分进行计费：0.34/万条

⌛️ GA ​

⌛️ 其他 ​