前端性能总结

最新推荐文章于 2024-04-16 10:26:09 发布

原创最新推荐文章于 2024-04-16 10:26:09 发布 · 672 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

文章介绍了前端性能度量的重要性和常用方法，包括PerformanceAPI的使用，如LCP、FID、CLS等CoreWebVitals指标，以及首屏时间、流畅性(FPS)的衡量。此外，还讨论了TTFB、DNS查询和TCP连接时间等网络性能指标在分析中的作用。

前端度量的方法

不度量性能，就无法优化性能，一般情况下我们都会根据浏览器network中的Load、DOMContentLoaded的时长来评估
普通的测量方法
在不同的网络环境下，无法评估一个产品的真实性能

几个常用的度量工具

PerformanceAPI
performance.now() 我们测试一段代码的执行，一般都可以想起Date.now(),通过差值来衡量过程中的消耗时间。
这种方式存在两个问题
1. 在部分场景下精度不够，只能精确到毫秒(ms)
2. 使用Date().now() 依赖于用户本地时间，如果存在问题就会出现异常

为了提高更高精度，更可靠的性能计时，Performance API提供了performance.now()，该API具有以下特征

精度精确到微妙(μs)
获取的是把网页打开时间点作为基点的相对时间，不依赖系统时间

常用的衡量指标为：
均值：就是对于所有加载时间的平均值，有时候也会去掉一些最高值的影响
分位数：就是根据统计中的中位数，计算居中的数值，这样不会被一些极值影响整体的数据正确性，中位数是一种特殊分位值，即50分位值，衡量性能通常把这些值成为Top Percent（TP）,如TP90代表90分位值， Core web Vitals 推荐使用75分位数
秒开率：实际上关注的可能不一定是1s内打开的用户占比，也可能是n秒内打开的用户占比，这个指标更侧重于提升极限条件的体验，让条件较好的用户享受更好得性能

度量首屏

FP : First Paint 第一次在页面上绘制的时间，这个时间仅仅是指开始绘制的时间，但未必真的绘制什么有效的内容

FCP: First Contentful Paint 第一次有内容的绘制，代表浏览器第一次绘制DOM 元素的时间
FMP: First Meaningful Paint 第一次有意义的绘制这是一个主观指标，可以认为是页面核心内容展示的时间
LCP: Largest Contentful Paint 最长内容的绘制时间，对于大部分的页面推荐使用LCP来衡量首屏

度量流畅性

度量流畅性一般会使用FPS（Frames Per Second 每秒帧数）又叫帧率，一般浏览器是保持在60fps 渲染一次的时间间隔为16.7ms

Core Web Vitals

Google 给出了核心的Web指标 LCP(Largest Contentful Paint)、 FID(First Input Delay) 和 CLS(Cumulative Layout Shift ) 这三个指标对用户体验具有代表性、比较容易度量
LCP 一般是有图片，SVG，视频
FID 首次交互延迟度量是从用户首次和网站进行交互到响应事件的时间延迟的时间，页面加载阶段往往容易产生卡顿，大部分页面的主线程在此时都很繁忙
CLS: 度量页面产生的连续累计布局偏移分数。在采用懒加载，经常会引起布局的连续变化。

性能的分析

确定目标：通过上面的度量，选择合适的度量指标，确定一个最终的目标，找出影响LCP的最大因素，找出FCP的突出原因，以及某个API需要长时间的原因
收集数据：通过Performance API 收集相关的分析数据
清洗数据：排除一些无效值、极值的情况
统计分析：通过均值、分位数统计目前的情况
时序分析：根据不同的时间情况，进行数据的聚合分析
纬度分析：地域、浏览器、操作系统
相关性分析：根据根据不同的情况，测试浏览器的表现性能，做出相关性的一些结论，例如API返回结果的大小与时长的比值情况

常用的过程指标

TTFB（Time TO First Byte）：是指客户端从发起请求到接受到服务器相依的第一个字节的时间，是反映网站性能的重要指标
在这里插入图片描述
DOMReady 其实就是DOMContentLoaded 就是HTML在无JS和CSS解析完成的时间
Load 页面资源完全加载完成的时间

Performance API

在这里插入图片描述

performance.getEntries() 可以获取网站请求的所有链接的详细请求时间
performance.getEntriesByType() 获取特定类型的请求时间
主要类型包括：
* navigation
* resource
* mark
* measure
* paint
* frame
performance.getEntriesByName() 根据名称获取

常用的指标

	// First Paint 和 First Contentful Paint
	const FP = performance.getEntriesByName('first-paint')[0].startTime;
	const FCP = performance.getEntriesByName('first-contentful-paint')[0].startTime;
	
	// DOMContentLoaded 和 onload
	const DOMContentLoaded = performance.getEntriesByType('navigation')[0].domContentLoadedEventStart; 
	const onload = performance.getEntriesByType('navigation')[0].loadEventStart;

	// TTFB 其实就是 responseStart - fetchStart 的时间
	 const navigationTiming = performance.getEntriesByType('navigation')[0];
	 const TTFB = navigationTiming.responseStart - navigationTiming.fetchStart;

	// DNS 查询耗时
	const dnsTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;

	// TCP 链接耗时 + SSL 握手耗时
	const connectionTime = navigationTime.connectEnd - navigationTiming.connectStart