网站内容采集系统(为什么要做前端性能监控可能你也有过这样的经历)

　　网站内容采集系统(为什么要做前端性能监控可能你也有过这样的经历)

　　一、为什么要做前端性能监控

　　或许你也有过这样的经历：

　　一个用户报告你的 网站 很慢，然后你紧张地在浏览器上打开用户报告的 网站。查了一下，可能你的网站是正常的，也可能是你的网站真的很慢，甚至打不开。

　　有一天，你的老板问你：“我们的 网站 性能体验如何？” 你应该怎么回答？“很好，很快，这个月没有失败……”老板又问：“有什么好办法？” “快开” “多快？” “我还没数过……”然后没有，然后……

　　如果我们有前端监控，我们就有能力：

　　二、前端性能监控分类

　　性能监控可以分为两类：综合监控和真实用户监控。

　　1. 综合监控

　　模拟一个用户使用场景，提交需要分析的页面，然后通过一系列的管理分析完成一些指标项的数据采集，最后呈现分析报告。比如谷歌的Lighthouse，最新版的谷歌Chrome自带的页面性能分析工具。

　　调出开发工具（win：F12，mac：fn+f12)

　　Lighthouse 具有三个主要指标：性能、交互性和最佳实践。

　　在性能方面，具体指标为：

　　每个指标也会给出具体的优化建议，比如性能优化建议：

　　灯塔系统架构图：

　　2. 真实用户监控

　　真实用户监控，记录真实用户当时访问页面时的真实数据，在访问结果时将采集收到的数据上报给服务器，然后进行数据清洗、处理等。 ，在监控平台上呈现监控数据。

　　3. 合成监控和真实用户监控的区别

　　综合监测的优缺点：

　　优势

　　缺点

　　易于使用的现有工具

　　模拟用户场景，无法完全还原真实场景

　　采集 丰富的数据，如硬件指标、瀑布图

　　单次运行，数据不够稳定

　　不影响真实用户访问性能

　　数据量小，无法覆盖所有场景

　　真实用户监控的优缺点：

　　优势

　　缺点

　　采集用户真实使用数据

　　无法采集到硬件相关信息

　　大样本量，全覆盖，减少统计误差

　　由于需要报告，无法采集完成资源加载瀑布图

　　性能数据与其他数据的相关性产生更大的价值

　　无法可视化页面加载过程

　　区别：

　　对比

　　综合监控

　　真实用户监控

　　实施难度和成本

　　降低

　　更高

　　采集数据丰富

　　富有的

　　根据

　　采集样本大小

　　小的

　　大的

　　适用场景

　　自有业务，用户数量少，定性分析

　　中端产品，海量用户，量化分析

　　因为真实用户监控也是在运行时进行的，所以这种真实用户监控很难采集得到一些硬件相关的指标，也很难采集这个页面执行的slides （即逐帧截图）。）。当然，从技术上讲，你可以使用 JS 将当前页面保存为 Canvas，做一些逐帧比较，甚至将数据发送回去。但在实践中，我们绝对不会这样做，因为这是对用户流量的巨大浪费。介绍完这两种监控方案后，我们再来看看它们的对比。

　　这篇文章是关于真实用户监控的。

　　三、如何衡量前端性能

　　1. 谷歌网络生命力

　　评价一个网站的用户体验涉及多个指标，其中一些也与网站的内容有关，但还是有一些共同的指标，Core Web Vitals体现了最关键的指标。此类核心 UX 要求包括页面内容的加载体验、交互性和视觉稳定性，它们共同构成了 2020 Core Web Vitals 的基础。

　　除了以上三个主要指标外，还有FCP和TTFB：

　　虽然 LCP 最大内容绘制是最重要的负载指标，但它也高度依赖于首次内容绘制 (FCP) 和首字节响应时间 (TTFB)，这对于监控和改进非常重要。

　　2. API 耗时

　　很多情况下，页面上的数据是通过异步请求后台API，然后渲染得到的。API耗时直接影响LCP数据和用户体验。

　　LCP 以用户为中心，测量页面加载“完成”所需的时间。当页面中最大的内容被渲染时，它被认为是“完整的”。过去，load\DOMContentLoaded 组件是用来反映页面加载速度的。后来使用了更准确的FCP（First Content Rendering），但从用户的角度来看，只有在显示主要内容时才完成加载。

　　最大值指的是实际的Element长宽，Margin/Padding/Border等CSS尺寸效果不计算在内。包括的类型是

　　、url 和收录文本节点的块或内联元素将来可能会添加。因为网页上的Element可能会继续加载，最大的Element也可能会不断变化（比如先加载文本，再加载图片），所以在加载每个当前最大的Element时，浏览器会发出一个 PerformanceEntry Metric，直到它被使用。用户可以进行Keydown/Scrolling/Tapping等操作，Browser会停止发送Entry，所以只要抓到最后一个Entry，就可以判断LCP的时长。

　　如下图，绿色区域是LCP不断变化的检测对象，也可以看出FCP和LCP的区别。

　　如何衡量网站操作的流畅度，谷歌采用了FID指标，定义为第一个交互事件的开始时间与浏览器在TTI时间内响应事件的时间之间的时间差。交互事件为Clicks / Taps / Key Presses等单个事件，其他连续性事件Scrolling / Zooming不计算在内，如下图：

　　为什么要拿第一次发生在TTI的运营事件，谷歌给出了以下三个理由：

　　1）用户的第一交互体验印象很重要

　　2）当今网页最大的交互问题通常发生在页面刚开始加载时，页面加载后的第二次操作事件延迟。还有其他特殊的改进建议。

　　3）但是FID的计算有其明显的问题。比如用户在主线程空闲的时候操作，FID可能会短，如果不操作，就无法计算FID。开发者很难衡量 网站 的 FID 是否符合一个好的标准，所以 Google 的建议是通过减少 TBT 的时间来降低 FID 的值。TBT 越短，FID 越好。好的。

　　您可能有过这样的经历，当您要点击某个按钮或内容时，它突然移动了，然后您又点击了另一个按钮。

　　比如下图中，当你准备点击“确认提交”按钮时，在按钮上方加载了一个提示框，导致下方按钮下移，而你原本想点击的位置的元素被原来的“确认提交”按钮取代，变成了“放弃申请”按钮。一点击就变成了放弃订单，白白浪费了之前的工作。这是没有人愿意看到的。体验非常糟糕和令人抓狂。

　　这种意外的内容布局移动可能是由资源的异步加载、JS 对 DOM 元素的动态操作、加载未知大小的图像等引起的。这对用户来说是不好的用户体验。CLS 用于测量此类物理指标。

　　什么是好的 CLS 分数？超过 75% 的用户小于 0.1。

　　布局偏移由 Layout Instability API 定义。当可见元素在两帧之间改变其起始位置时，此 API 将随时报告 layout-shift 条目（默认写入模式是指 top 和 left 属性）。这些元素被认为是不稳定元素。

　　请注意，布局偏移仅在现有元素更改其起始位置时发生。如果一个新元素被添加到 dom 中，或者一个现有元素改变了它的大小，除非它改变了其他元素的起始位置，否则它不会算作布局偏移。

　　它的CLS表示每个元素意外位移的累积，每个位移的算法如下：Layout Shift Score = Impact Fraction * Distance Fraction。

　　在上图中，元素在一帧中占据了屏幕的一半。下一帧，元素向下移动了视图高度的 25%。红色虚线框住的部分是两帧不稳定元素的views之和（75%），所以影响分数为0.75。

　　在上图中，不稳定元素垂直移动了 25%，因此距离得分为 0.25。

　　所以布局偏移分数是：

　　CLS: 0.75 * 0.25 = 0.1875

　　除了请求到返回的时间，还有请求排队时间和请求发起时间。

　　如果一个 API 从发起请求到返回数据非常快，但是由于需要在队列中等待或者依赖其他数据而导致请求延迟，那么从用户角色的角度来看，这也是一个非常慢的接口。因此，作为开发者，还需要注意是否能够尽快发起 API 请求。

　　四、前端性能数据采集

　　通过以上内容，我们了解了网站性能监控的一些指标，接下来我们来看看这些指标数据是如何获取的。

　　1. web-vitals 库

　　对于 LCP、FID、CLS 数据，可以直接安装 web-vitals 库：

　　如何安装：

　　npm install web-vitals

　　指示：

　　import {getLCP,getFID,getCLS} from'web-vitals';getCLS(console.log);getFID(console.log);getLCP(console.log);

　　打开页面，可以在浏览器控制台看到类似的数据：

　　实际使用中，将console.log替换成你要处理的方法即可。当然也可以使用getFCP和getTTFB方法来获取对应的数据。

　　2. 性能 API

　　为了帮助开发者更好地衡量和提升前端页面性能，W3C性能团队引入了Navigation Timing API，实现了页面性能自动精准管理。性能可以提供哪些时间节点？在浏览器控制台执行window.performance.timing；您可以获得类似于以下内容的输出：

　　这些属性和值代表什么？在此之前，我们先来看看这张图：

　　上图是实时监控性能模型。您可以看到我们的页面加载被定义为许多阶段。大致可以分为5个阶段：

　　1）开始计时

　　2）重定向

　　3）网络连接

　　4）数据交互

　　5）页面渲染

　　每个属性对应的含义如下：

　　属性

　　阐明

　　导航开始

　　同一浏览器上下文的最后一个文档卸载结束的时间戳。如果没有以前的文档，该值将与 fetchStart 相同。

　　卸载事件开始

　　引发卸载事件的时间戳。如果没有以前的文档，则此值为 0。

　　卸载事件结束

　　卸载事件完成的时间戳。如果没有以前的文档，则此值为 0。

　　重定向开始