完整的前端监视平台包括三个部分：数据收集和报告，数据编译和存储以及数据显示。
本文谈论的是-DATA集合和报告的第一个链接。以下图是内容内容的概述。
仅仅看理论知识就很难理解。因此，我编写了一个简单的监视SDK，其中包含我想在本文中讨论的技术要点。您可以使用它来编写一些简单的演示来帮助您加深您的理解。阅读本文，效果更好。
Chrome开发团队提出了一系列指标来检测网页的性能：
这四个性能指标需要通过PerformanceObserver获得（也可以获取，但是当事件触发时未通知）。效果手术器是一个性能监视对象，以监视性能测量事件。
从页面加载到第一个像素绘图到屏幕的FP（第一涂）。实际上，可以将FP理解为白色屏幕时间。
测量代码如下：
您可以通过上述代码获得FP内容：
这是我们想要的抽奖时间。
从页面加载到页面内容的任何部分，以完成屏幕上的渲染时间。对于此指标，“内容”是指文本，图像（包括背景图像），元素或非 -白色元素。
为了提供良好的用户体验，应在1.8秒内控制FCP分数。
测量代码：
您可以通过上述代码获得FCP的内容：
这是我们想要的抽奖时间。
从页面加载到最大的文本块或图像元素，以完成屏幕上的渲染时间，LCP指示器将报告渲染的相对时间，根据时间点的相对时间页面启动了页面的第一次加载。
良好的LCP分数应在2.5秒内控制。
测量代码：
您可以通过上述代码获取LCP的内容：
这是我们想要的抽奖时间。元素指的是LCP绘制的DOM元素。
FCP和LCP之间的差异是：FCP是通过任意内容绘制的，并且在完成最大内容渲染时触发LCP。
LCP检查的元素类型是：
CLS（布局转移），从页面加载和生命周期的状态到隐藏期间发生的所有累积分数。
布局偏移分数的计算方法如下：
它影响得分测量不稳定元素对两个帧之间视觉区域的影响。
距离分数是指一个框架中任何不稳定元件的最大距离（水平或垂直），除了视觉区域中最大尺寸（宽度或高度，较大）外。
CLS是所有布局偏移分数的总和。
当两个渲染帧之间的DOM位移时，将触发CLS（如图所示）。
上图中的矩形从左上角向右移动，甚至是偏移。在同一时间，在CLS中，有一个称为会话窗口的术语：一个或多个快速，连续的单布局偏移，每个词偏移量小于1秒，整个窗口的最大持续时间为5秒，持续5秒
例如，上图中的第二个会话窗口中，其中有四个布局偏移量，每个偏移之间的间隔必须小于1秒，并且第一个偏移和最后一个偏移之间的时间不能被视为会话窗口超过5秒钟。如果这种情况不符合此条件，即使是新的会话窗口。有人可能会问，为什么要提供此条件？大量实验和研究。
CLS中有三个计算：
累积添加是添加从页面开始的所有布局偏移分数。但是，这种计算方法对长期寿命的页面不友好。页面保留时间越长，CLS得分越高。
会话窗口的平均数量不是基于单个布局偏移量的，而是会话窗口。添加所有会话窗口的平均值。但是此计算方法也有缺点。
从上图可以看出，第一个会话窗口会生成较大的CLS分数，并且第二个会话窗口产生较小的CLS分数。如果将其平均值视为CLS分数，则无法看到页面的操作状态完全。原始页面是更早的偏移，在后期的偏移较少。当前的平均值无法反映这一点。
所有会话窗口的最大值是当前的最佳计算方法。每次都只能使用所有会话窗口的最大值来反映页面布局偏移量的最坏情况。有关详细信息，请参阅Evolding cls指标。
以下是第三个计算方法的测量代码：
阅读了上面的文本说明后，只需查看代码并理解它。一次偏移量的测量内容一次如下：
代码中的字段是布局的偏移分数。
当纯HTML满载并解析时，将触发该事件，而无需等待CSS，IMG和IFRAME。
当整个页面和所有因资源（例如样式表和图片）加载时，将触发该事件。
尽管这两个性能指标是旧的，但它们仍然可以反映某些页面。监视它们仍然是必要的。
在大多数情况下，可以通过事件获得第一个屏幕渲染时间。在某些特殊情况下，例如异步图片和DOMS。
在这种情况下，无法通过事件获得第一个屏幕渲染时间。这次，我们需要通过mutationObserver.muntionobserver触发事件时，我们需要获得第一个屏幕呈现时间。
第一个屏幕渲染时间的计算过程：
监视DOM
以上代码是监视DOM更改的代码。同时，需要标签。
确定第一个屏幕上是否可能有很多内容，但用户最多只能看到一个屏幕的内容。因此，当第一个屏幕的渲染时间为统计时，有限的范围需要仅限于当前屏幕。
当使用DOM绘制时间时，当DOM变化触发突变操作器事件时，这意味着可以读取DOM的内容，并且并不意味着DOM被绘制到屏幕上。
从上图可以看出，当触发突变处理器事件时，可以读取已经存在内容，但实际上，左侧的屏幕不会绘制任何内容。因此，有必要调用当前时间随着浏览器后的DOM绘制时间成功绘制。
将时间与第一个屏幕中的所有图片进行比较以进行比较
优化当前代码尚未优化，有两个主要的预防措施：
必须将第一个点报告给DOM不再更改后的渲染时间。通常，触发加载事件后，DOM将不再更改。因此，我们可以在此时间点报告。
可以在触发LCP事件之后报告第二点。无论是同步还是异步DOM，都需要绘制它，因此可以收听LCP事件，在事件触发后允许进行报告。
结合上述两个方案，有以下代码：
每次触发突变操作机事件时，都调用代码，并且处理需要进行防护函数。
接口请求需要监视xmlhttprequest和提取。
监视XMLHTTPREQUEST
如何判断XML请求是否成功？根据他的状态法可以在200到299之间。如果成功，它将失败。
监视获取
对于获取，您可以根据返回数据中的字段确定请求是否成功。如果这是一个成功的请求，它将失败。
请注意，听到监听显示器的接口请求时间可能与Chrome DevTool上检测到的时间不同。这是因为Chrome DevTool上检测到的时间是HTTP请求发送的时间和整个接口过程。是异步请求。接口请求成功后，您需要调用回调函数。触发事件时，回调函数将放置在消息队列中，然后将再次处理浏览器。中间还有一个等待过程。
通过监视和事件，如果不支持浏览器，也可以将其降级。
触发事件时，可以获得相应的资源列表。每个资源对象都包含以下字段：
从这些字段中，我们可以获得一些有用的信息：
确定资源是否会击中缓存
这些资源对象中有一个字段指示资源的大小，包括响应标头和响应数据的大小。如果此值为0，则表示直接从缓存（强制缓存）读取它。IF。该值不是0，但字段为0，这意味着它需要进行协商缓存（表明请求的大小响应数据主体）。
那些不符合上述条件的人表明没有命中缓存。然后，您可以获得缓存命中率。
BFCACHE是一个存储器缓存，将整个页面保存在内存中。当用户返回时，您可以立即看到整个页面而不会再次刷新。在移动浏览器中。但是我尝试过，只有Safari浏览器支持，也许我的Firfox版本是错误的。
但是，BFC也有缺点。当用户返回并从BFC恢复页面时，原始页面的代码将不会再次执行。到达此目的，浏览器提供了一个可以将代码再次执行的事件。
我们还需要从BFC页面收集不同的时间，例如FP，FCP，LCP等。
上述代码已被充分理解。事件触发后，事件触发时间在当前时间减少。这种时间差异是性能指标的绘图时间。注意，从BFC中恢复的这些页面的这些性能指标通常很小，通常约10 ms。添加徽标字段，在执行性能统计时可以忽略它们。
使用我们计算当前页面的FPS。
代码逻辑如下：
当出现三个低于20以下的FPS时，我们可以得出结论，该页面出现。有关详细信息，请查看如何监视网页上的卡住。
我们已经知道如何计算第一个屏幕渲染时间，但是如何计算由SPA应用程序的页面路由切换引起的页面渲染时间？本文以VUE为示例来谈论我的思考。
代码逻辑如下：
同时，请考虑一种情况。当路由不切换时，还会会更改组件。目前，不应在这些组件中执行渲染时间。因此，您需要添加一个字段。切换路线时，将其设置为True，这意味着您可以计算渲染时间。
使用监视错误事件，您可以捕获资源加载的失败。
使用可以监视JS错误。
使用未经治疗的事件，您可以捕获未经处理的承诺错误。
一般生产环境的代码被压缩，生产环境将不会上传Sourcemap文件。因此，很难阅读生产环境中的代码报告错误信息。因此，我们可以使用源图来还原这些压缩代码错误信息。
当代码报告错误时，我们可以获取相应的文件名，行和列数：
然后调用以下代码以进行还原：
每次包装项目时，如果打开了SourceMap，则每个JS文件都会具有相应的地图文件。
目前，JS文件放在静态服务器上供用户访问。地图文件存储在服务器中以供恢复错误信息。该库可以在压缩代码错误信息报告给未共享代码之前报告错误消息。例如，压缩后的错误位置是，实际位置可能是在位置信息之外，您还可以获取原始源代码。
上图是在报告代码错误之后的一个示例。启用该部分不是SDK的范围，我打开了另一个仓库来执行此操作。如果您有兴趣，可以看看。
利用率不是VUE错误，它需要使用VUE提供的API进行监视。
PV（页面视图）是页面视图，紫外线（唯一访问者）用户访问。
对于前端，只要您每次在页面上输入PV，紫外线的统计信息就会放在服务器上，主要是为了分析报告的数据以计算UV。
用户输入页面以记录初始时间。当用户离开页面时，初始时间会减少当前时间，即用户的停留时间。该计算逻辑可以在事件中完成。
记录页面的深度非常有用，例如不同的活动页面A和B。平均访问者的深度仅为50％，而B的平均访问深度为80％，表明B在用户中更受欢迎。基于此，您可以修改针对目标的活动页面。
此外，您还可以使用访问深度并留出时间来识别电子商务订单。例如，在某人进入页面后，将页面拉到底部并等待一段时间购买。有些人慢慢地滚下页面并终于购买了它。尽管他们在页面上的待在一起是相同的，但很明显，第一个人更像是订单。
页面访问深度计算过程略有复杂：
请参阅特定代码：
使用监视和事件，我们可以收集用户点击区域的大小，单击整个页面中坐标的特定位置，然后单击元素的内容。
使用监视和页面跳跃事件。应该注意到呼叫或不触发事件。仅当进行浏览器移动时，将触发事件，例如用户单击浏览器的后面按钮（或在该浏览器中的呼叫或方法或方法JavaScript代码）。相同。
Vue可以使用钩子监视路由更改。
数据报告可以通过以下方式报告：
我写的简单SDK使用第一种和第二种方法来报告它。使用sendbeacon进行报告的优点非常明显。
有机会时，如何使用用户代理会异步发送数据，同时，它不会延迟页面的卸载或影响下一个导航的加载性能。在提交分析数据时，这解决了所有问题：数据是可靠的，传输是异步的，并且不会影响下一页的负载。
我们可以使用xmlhttprequest在不支持sendbeacon.a http请求的浏览器下报告的报告包含两个步骤和接收。成功完成，是否不接受。为此，我进行了一个实验，并在nunload上使用xmlhttprequest传输了30kb的数据（一般报告数据很少很大），并且可以将不同的浏览器发送出去成功。当然，这也与硬件性能和网络状态有关。
报告时间有三种类型：
建议将三种方法结合在一起：
仅仅看理论知识就很难理解。因此，我编写了一个简单的监视SDK，其中包含本文中提到的技术要点。您可以使用它来编写一些简单的演示来帮助您加深您的理解。阅读本文，效果更好。