zhangdizhangdi

性能监控

学习

性能指标

Navigation timing
图：Navigation timing

Navigation timing ALI
图：Navigation timing ALI

指标

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

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

window.performance
图：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',
  ],
})

PerformanceObserver
图：PerformanceObserver

测试工具

Chrome工具

Lighthouse

Performance

网站类

Web Vitals

web-vitals
图：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

⌛️ GA

⌛️ 其他