【前端性能】前端性能指标和测量方法总结

时间：2024-03-28 20:46:43

在这里插入图片描述

文章目录

    • 前端性能指标和测量方法总结
      • 重要指标名词概念
      • 指标测量方法
        • performance API
        • Chrome Performance
        • Chrome Lighthouse
        • web-vitals

前端性能指标和测量方法总结

重要指标名词概念

在这里插入图片描述

图源 https://dev.to/xnimorz/hitchhiker-s-guide-to-frontend-performance-optimization-4607

FP: First Paint 首次绘制，指浏览器从开始请求网站内容到绘制第一个像素点的时间，也可以理解为白屏时间。

FCP: First Contentful Paint 首次内容绘制，从开始加载到绘制出第一个内容的时间，内容为文本、图片或 SVG CANVAS 元素。

(FMP: First Meaning Paint 现已被 LCP 取代)
LCP: Largest Contentful Paint，最大内容绘制，指可视区内容最大的可见元素出现在屏幕上的时间，衡量加载性能的核心指标。最好是在2.5s内。

(TTI: Time to Interactive，可交互时间。简单的讲，TTI 是安静窗口之前最后一个长任务超过 50 毫秒的任务的结束时间，如果没有找到长任务，则与 FCP 值相同。最好是在3.9 秒内。因为用户交互会影响 TTI，页面在实际情况中的交互性，应该测量 FID。)
FID: First Input Delay，首次输入延迟，测量从用户第一次与页面交互直到浏览器对交互作出响应的时间，FID 是衡量交互性的核心指标。最好是在100毫秒内。

CLS: Cumulative Layout Shift，累积布局偏移。页面因为一些动态改变的 DOM 或者一些异步的资源加载，导致页面元素发生了位移，这样就会让用户找不到先前阅读的位置或者点击到不期望点击的地方。是衡量视觉稳定性的核心指标。最好是在0.1内。

指标测量方法

performance API

在这里插入图片描述

可以直接打印 console.log(window.performance);
其中memory关注内存使用情况，navigation关注重定向情况，主要性能指标看timing。
里面时间点很多，在这里简单写两个介绍下，到时候需要测性能再去看具体要测的部分。
DNS解析耗时 : performance.timing.domainLookupEnd - performance.timing.domainLookupStart
TCP连接耗时 : performance.timing.connectEnd - performance.timing.connectStart
SSL连接耗时 : performance.timing.connectEnd - performance.timing.secureConnectionStart
request耗时 : performance.timing.responseEnd - performance.timing.responseStart
解析DOM树耗时 : performance.timing.domComplete - performance.timing.domInteractive

performance.getEntries() ： 以对象数组的方式返回所有资源的数据
在这里插入图片描述

例如：
TTFB 首包时间: 包括 重定向 + DNS + TLS + 请求 直到响应第一个字节到达。

performance.timing.responseStart - performance.timing.navigationStart

const [pageNav] = entryList.getEntriesByType('navigation')
console.log(`TTFB: ${pageNav.responseStart}`)

FCP 首屏内容时间

performance.getEntriesByName("first-contentful-paint")[0].startTime

FP 白屏时间

performance.getEntriesByName("first-paint")[0].startTime
Chrome Performance

Chrome 控制台的 Performance 页签，包括 FP LCP 等，无法测量 CLS FID 等。
在这里插入图片描述

Chrome Lighthouse

可以直接生成报告，包括 FCP LCP TBT CLS 等指标，无法测量 FID。
在这里插入图片描述
在这里插入图片描述

web-vitals

测量性能的第三方库。

import { getLCP, getFID, getCLS } from 'web-vitals'
getCLS((metric) => console.log('cls: ' + metric.value))
getFID((metric) => console.log('fid: ' + metric.value))
getLCP((metric) => console.log('lcp: ' + metric.value))

相关文章