前端性能数据监控统计的探索

  背景

前端性能是考验一个前端工程师技术至关重要的一个点，很多前端伙伴都或多或少的掌握或了解了一些前端优化的方法，但是在实际的项目工作中却难以一展拳脚。因此，我们要知道，重要的不仅是了解优化方法，更要了解性能监测，只有知道了哪里有性能问题，才能进行针对性的优化，有效提高性能和用户体验。

分析和方案

说到前端性能，通常指的是用户获取所需要页面数据或执行某个页面动作的一个实时性指标，一般以用户希望获取数据的操作到用户实际获得数据的时间间隔来衡量。那么都有哪些因素会影响到前端性能呢？

可控等待延时和不可控等待延时

首先，我们对页面的加载做一个分析，即用户获取数据的操作是打开某个页面，这个操作的前端性能，就可以用该用户操作开始到屏幕展示页面内容给用户的这段时间间隔来进行评判。

用户的等待延时可以分成两部分：可控等待延时和不可控等待延时。

可控等待延时，可以理解为能通过技术手段和优化来改进的部分，例如：减小图片或其他资源大小、让请求加载更快，减少HTTP请求次数等等。

不可控等待延时，则是不能、或很难通过前后端技术手段来改进优化的，例如：鼠标点击延时、CPU计算时间延时、ISP网络传输延时等。

所以我们要明确，前端中的所有优化都是针对可控等待延时这部分来进行的。

获取性能数据

对前端性能的监控，我们通常会考虑以下几个方面：

1、静态性能

静态性能包括：包体积分析

2、动态性能

（1）首屏： FMP、TTI、FCP、FP、满开比、秒开率、页面渲染数据时长

（2）卡顿：首次交互延迟、交互中最大延迟

（3）资源加载：静态资源加载耗时

（4）白屏 & loading 时长

3、接口性能

（1）关键接口耗费时长监控

（2）所有接口耗费时长

（3）关键接口的成功率监控

（4）所有接口的成功率监控

静态性能，是我们在打包项目时就可以直观看到的，本文不做分析。下面，我们着重了解一下如何获取和评价一个页面的动态性能和接口性能。

获取和衡量一个页面的性能，主要可以通过以下几个方面：network瀑布流waterfall、performance 、console 、Performance Timing API、axios拦截器等。

一、开发、调试中的分析  

1、network 瀑布流 waterfall

开发、调试过程中，我们常常通过network查看网页加载资源、以及请求信息。在waterfall（即瀑布流）的位置，我们可以很直观的看到每个请求的时长，点击每个色块之后，又可以请求时间具体花在了哪部分。当我们了解了每个颜色以及各项指标的含义，就可以分析出网页中的一些网络请求问题。