前端性能监控

本是古典何须时尚 2022-10-29 03:30 294阅读 0赞

### 目录 ###

*   *   *  1. 性能监控指标
         *   *  （1）感官指标
             *  （2）Performance API
         *  2. 性能数据收集工具
         *   *  （1）chrome dev Tools
             *  （2）Lighthouse
             *  （3）第三方收费方案
             *  （4）自研性能监控系统
         *  3. 利用performance面板做性能分析
         *  4. 利用LightHouse面板做性能分析

### 1. 性能监控指标 ###

#### （1）感官指标 ####

既然是性能监控，那首先需要明确衡量指标。一般来说，业界认可的常用感官上的指标有：

*  **首次绘制（FP）时间**：对于应用页面，用户在视觉上首次出现不同于跳转之前的内容时间点，或者说是页面发生第一次绘制的时间点。
 *  **首次有内容绘制（FCP）时间**：指浏览器完成渲染 DOM 中第一个内容的时间点，可能是文本、图像或者其他任何元素，此时用户应该在视觉上有直观的感受。
 *  **首次有意义绘制（FMP）时间**：指页面关键元素渲染时间。这个概念并没有标准化定义，因为关键元素可以由开发者自行定义——究竟什么是“有意义”的内容，只有开发者或者产品经理自己了解。
 *  **首屏时间**：对于所有网页应用，这是一个非常重要的指标。用大白话来说，就是进入页面之后，应用渲染完整个手机屏幕（未滚动之前）内容的时间。需要注意的是，业界对于这个指标其实同样并没有确切的定论，比如这个时间是否包含手机屏幕内图片的渲染完成时间。
 *  **用户可交互时间**：顾名思义，也就是用户可以与应用进行交互的时间。一般来讲，我们认为是 domready 的时间，因为我们通常会在这时候绑定事件操作。如果页面中涉及交互的脚本没有下载完成，那么当然没有到达所谓的用户可交互时间。

#### （2）Performance API ####

提到性能优化指标就不得不说 Performance API，这个 API 是 HTML5 新增的特性。过去我们要统计脚本的运行时间，可能会使用 Date.getTime() 去获取对应的时间；如果要获取白屏时间是在 head 末尾插入一段获取时间戳的代码，然后用这个时间戳减去开始接收数据的那个时间戳，得出的结果为白屏时间。这样的方法无疑是笨重的，而且获取的时间无法更精确(只能到ms级别)，而且一些后台比较关注的时间根本无法获取。W3C 为了解决这个问题，在 HTML5 推出的时候，新增了这个 API 。

MDN 上对 Performance API 的解释：

> Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。该类型的对象可以通过调用只读属性 Window.performance 来获得。

我们可以在控制台的console面板中通过window.performance来获取网站的各项指标信息，结果如下：  
![在这里插入图片描述][20210208132827286.png]  
如图所示，performance包括了五个属性，其中**timing**是需要重点关注的，timing是一个map数据结构，其中key值是性能优化指标，value值是对应的时间戳。其中这些时间戳与页面整个加载过程中的关键节点是有着一一对应的关系，这里通过谷歌开发者网站的一张图来说明：  
![在这里插入图片描述][20210208132946964.png]

从图中可以看到很多指标都是成对出现，直接作差就可以求出对应页面加载过程中关键节点的时间，这里介绍几个比较常用的，比如：

const timingInfo = window.performance.timing; 
    
    // TCP连接耗时
    timingInfo.connectEnd - timingInfo.connectStart
    
    // DNS查询耗时
    timingInfo.domainLookupEnd - timingInfo.domainLookupStart;
    
    // 获得首字节耗费时间，也叫TTFB
    timingInfo.responseStart - timingInfo.navigationStart
    
    // domReady时间(与前面提到的DomContentLoad事件对应)
    timingInfo.domContentLoadedEventStart - timingInfo.navigationStart
    
    // DOM资源下载
    timingInfo.responseEnd - timingInfo.responseStart

上述几个就是比较常用的指标，这些指标也可以在Chrome浏览器的network面板中的Timing下获取，如图：  
![在这里插入图片描述][20210208133006696.png]

### 2. 性能数据收集工具 ###

有了性能监控指标，我们需要使用一些工具来收集监控到的数据，通常有如下方法。

#### （1）chrome dev Tools ####

我们经常使用 Chrome Dev Tools 来开发调试，还可以利用它来分析页面性能。后面第三部分详细介绍其使用方法。

#### （2）Lighthouse ####

Lighthouse是一个开源的自动化工具，用于改进网络应用的质量。可以安装为 Chrome 的扩展插件，也可以命令行直接运行。只要为 Lighthouse 提供一个需要审 查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。  
**优点：**

*  评分报告全面且具有一定的权威性
 *  提供解决方案
 *  发现大的性能问题

**缺点：**

*  测试环境较单一，用户群体的环境各有不同，不可以一概之
 *  存在波动，不同时刻的访客群体存在差异，数据只能反应当前时刻的效果\*\*

#### （3）第三方收费方案 ####

*  NewRelic
 *  阿里云ARMS

#### （4）自研性能监控系统 ####

在目标页面注入脚本，在约定的时机收集性能指标数据，统一上报数据中心， 数据中心集中整合生成报表，再根据报表分析性能。  
**优点：**

*  数据全面，可采集到所有用户各个环境下的性能，生成直观的分布图
 *  数据真实，来源于真实用户 3.反馈及时，优化后效果可及时地在报表上反馈出来

**缺点：**

*  依赖较多，数据中心和脚本都需要自主开发，相对成本较高

所谓监控，实际上就是性能真实跟踪，虽然依赖较多，但对性能指标的反馈最为真实有效。

### 3. 利用performance面板做性能分析 ###

Chrome 开发者工具（简称 DevTools）是一组网页制作和调试的工具，内嵌于 Google Chrome 浏览器中。可以在浏览器窗口的右上方选择 Chrome 菜单，然后选择“更多工具–> 开发者工具”来打开 Chrome 开发者工具。这里对Chrome开发者工具做过多介绍，详细介绍见文章：[《**Chrome DevTools开发者工具调试指南**》][Chrome DevTools]。这里主要用到的是开发者工具中的performance面板。这个面板就是性能面板，主要作用就是**查看网页的细节，细粒度对网页载入进行性能优化。**

首先，打开Chrome开发者工具，切换到performance面板，如下图所示：  
![在这里插入图片描述][20210208133033748.png]  
可以看到上图中performance面板内正中间告诉我们如何开始使用这个面板了，点击最左侧的黑色圆就可以开始一个新的监测记录，也可以点击刷新按钮记录整个刷新过程中的监测记录。右侧如果勾选了Screenshots，就可以记录整个监测过程中每一帧的截图。如果勾选了Memory，就可以看到内存的详细使用情况以及垃圾回收的周期，也可以观察到内存有无泄漏的情况。

点击最右侧的小齿轮，可以看到一些配置项，打开CPU的节流开关，可以模拟移动端项目。打开Network的节流开关，我们可以模拟弱网(2g/3g)条件下网站的一些表现情况，然后根据弱网的具体表现进行相关优化。

接下来，打开performance面板之后，然后点击刷新按钮，就可以看到网站首页加载过程中的性能表现：  
![在这里插入图片描述][20210208133046529.png]  
首先是最上面的总览区域，这上面可以直观地看到页面的整个加载过程，有4个关键的指标：

*  FPS：这个指标是衡量动画是否流畅的一个重要指标。可以看到图中的绿色柱状图很高，这就代表FPS帧率很高，体验也就越流畅，如果FPS帧率较低，那么图中则会是红色的横条，表明帧率较低，影响用户体验，这里图中并没有出现红色，说明网页的整个体验还是非常流畅的。这里特别说明一下不管是游戏还是网页，都是帧率越高，体验越好。
 *  CPU：CPU自然就是展示CPU的使用情况。这个指标和下面的Sumarry指标是一一对应，而且这里它们的颜色所代表含义也是相同的，每个颜色代表各个过程所耗费的时间。从图中可以看到，整个加载过程中，白色部分(ldle)占比是最大的，这里代表的是空闲性能，第二大占比的橙色对应的是脚本加载时间，所以要想更快可以试着从加快脚本加载速度方面去优化。
 *  NET：这个是展示各个请求所花费的具体时间，这里看不太清，可以直接去 Network 面板当中去具体观察各个请求所花费的时间，然后针对具体的请求具体分析。
 *  HEAP：这里展示的是请求过程中内存的使用情况，这个指标对性能优化帮助不大。

总览区域的下面是Frame，这个展示的是整个加载时间段的帧率展示。将鼠标移动上去可以看到各个时间段的帧率，在加载过程中也可以使用快捷键command + shift + p打开可以实时展示帧率的面板。接着把面板往上拉，可以看到非常重要的一个指标**Main**，它代表主线程，如下图：  
![在这里插入图片描述][20210208133102188.png]  
图中各种颜色的矩形代表加载过程中做的所有工作。横轴代表时间，纵轴代表具体的调用堆栈。调用堆栈就像是浏览器当中的解释器，可以利用它追踪函数的执行流。当浏览器中调用了多个函数，通过这种机制可以追踪到哪个函数正在执行，具体函数体中又调用了哪个函数。这里随便点击一个矩形，如下图：  
![在这里插入图片描述][20210208133117707.png]  
点击之后看到这个事件下对应的一些具体信息，这里还可以点击Range右侧链接，点击之后会直接跳到sources面板对应的代码位置，这个功能可以说大大方便了定位具体的代码，如下图：  
![在这里插入图片描述][20210208133133153.png]  
最下面的区域分为4个tab，Summary与统计总览区域面板CPU相对应，Bottom-Up则是代表调用堆栈的前后调用关系，Call Tree是调用树，最后的Event Log则是事件日志。这个区域用到的情况不多，更多的是辅助作用。

### 4. 利用LightHouse面板做性能分析 ###

在新版的Chrome浏览器中，将LightHouse集成在了开发者工具中，我们可以直接打开控制台，切换到LightHouse面板，如图所示：  
![在这里插入图片描述][20210208133150462.png]  
点击中间的Generate report按钮就可以开始自动分析，LightHouse就会自动帮我们生成性能优化报告，如下图：  
![在这里插入图片描述][2021020813320192.png]

可以看到报告详细给出了各种情况下的分数情况，从左到右分别是Performance(页面性能)、Accessibility(可访性)、Best Practise(最佳实践)、SEO(搜索引擎优化)、Progressive Web App(渐进式应用)。点击其中的每一项都可以看到给出的具体优化建议，这里以Performance为例，如下图：  
![在这里插入图片描述][20210208133212498.png]  
从上图可以看出，图片是可以优化的主要项，这也充分说明了图片是性能优化当中的重头戏，这里以第一项为例，点击展开可看到，如下图：  
![在这里插入图片描述][20210208133223918.png]  
这里推荐我们使用下一代图片格式化的技术，原因是JPEG 2000、JPEG XR和WebP等图像格式通常比PNG或JPEG提供更好的压缩，这意味着更快的下载速度和更少的数据消耗。下面还非常贴心为我们列举出了需要更换的图片，大大解放了劳动力。

[20210208132827286.png]: /images/20221024/0af74be56df0490b81efc713ac495ad4.png?
[20210208132946964.png]: /images/20221024/e50f1381f4cd4b27b3a3602b6602bc6e.png?
[20210208133006696.png]: /images/20221024/587f07839f1d47de911ed953a887ea6a.png?
[Chrome DevTools]: https://www.yuque.com/cuggz/feplus/wh3ipr
[20210208133033748.png]: /images/20221024/4c1daf5e9abc43548848eff9b8d326b3.png?
[20210208133046529.png]: /images/20221024/2009e08fe6e1425e9b46ef6d23e88d97.png?
[20210208133102188.png]: /images/20221024/89ce59b9f8cc4754af5b9689452fc640.png
[20210208133117707.png]: /images/20221024/2f93c516592c4357b2720d61604b96c6.png?
[20210208133133153.png]: /images/20221024/037cc5b24b114088b63f6664cdce5582.png?
[20210208133150462.png]: /images/20221024/7045e2283d7c4829a2b8fa835b3f3228.png?
[2021020813320192.png]: /images/20221024/66c54e956d694fe9b557d2b346a0aa51.png?
[20210208133212498.png]: /images/20221024/ba2e9b31bbf2423297cee140b3b90032.png?
[20210208133223918.png]: /images/20221024/ca8b50fa1e304fa197ac74737d3c249a.png?