前端监视是一个长期的主题。目前，在提及监视平台时，大多数开发人员都认为吗？是的，为什么我们要自己做这篇文章？
这很简单。团队项目需要钱。数据量越大，成本越高；另一方面，这是您自己的技术改进。
因此，这已经整理了团队浏览器环境中前端监视的实践经验，并整理了写作和分享：
一般而言，可以总结监视系统的前端构造做两件事：为了解决这两个问题，前端监视系统需要注意的要点可以如下分配：
如果将所有内容都放在文章中要解释，它将导致太长并失去水平，因此仅在本文中引入；
我们都听说过性能的重要性。但是当我们谈论性能并使网站“增加”时，我们是什么意思？
这
因此，在谈论性能时，重要的是基于可以定量测量的客观标准的准确性，绩效和性能。这些标准是指标。
W3C标准化官方地址：导航时机2级
为了帮助开发人员更好地测量和提高前端页面的性能，引入了引入以实现自动和准确的页面性能播放点；开发人员可以通过属性获得。
下图是W3C第一版的处理模型。
上面1级的规范，在2012年底进入候选建议阶段，仍在日常使用中；但是，在W3C的议程上，它已退休以使该位置更高，更强大，更清晰。特定资源。
W3C Level2扩大了定义并增加了支持。
您可以在https://developer.mozilla.org/zh-cn/docs/web/api/performancetiming中查看它
Web-Vitals是衡量性能和用户体验的工具。我把它放在这里，是因为以下性能密钥指标获得了，有些将介绍通过此开源插件获得的方法；
与我们自己手动相比，它将涵盖我们的许多兼容性和特殊场景；
由于已经有通过W3C标准化定义的性能，因此获得性能，然后我们自然而然地获取它并使用它来计算我们需要获得我们需要的性能指标的性能指标
对于上面提到的总和；建议首先使用它，时间精度可以达到几个位置的小数点，并且在不支持浏览器时，结果为空数组。因此，我必须使用W3C Level1才能兼容；
什么是用户中心的性能指标？什么是用户中心的性能指标？实际上，它可以直接反映用户体验的指标；当前的定义和其他经验指标已成为该行业的当前标准。对于用户体验，可以简单地将指标总结为几个方面。
对于以上三个方面，我们可以收集以下指标以衡量
白屏（FP），灰屏（FCP）W3C标准化定义了W3C/Paint-Timing.calculated中的第一个非WEB背景像素渲染（FP）（白屏幕时间）。
还定义了第一个内容渲染（FCP）（灰色屏幕时间）。
一些学生可能第一次受到质疑（FMP）（第一个屏幕），为什么需要单独打开单独的列？绘制任何文本，图像，非布兰克画布或svg。这意味着，如果根据此逻辑，客户端会呈现一个单词的时间点，并且被认为是第一个屏幕时间的时间点。
我们可以首次有效绘图，我们可以以最大的元素增加来定义该点，因为当元素增加是最大的元素时，该页面的主要内容通常完成；
目前没有标准化计算定义；但是W3C的第一个屏幕统计信息已经进入了提案阶段，等待W3C再次标准化。您可以在Github上看到最新的进度，请参阅W3C/Take-Timing有关详细信息。
您可以参考Ali Arm的FMP文章，也可以使用代码中的手动计算；
最大内容图（LCP）是该页面首次开始在页面中加载的第一次。对于可见区域中最大的图像或文本块，它是用户中心的性能指标。复速，因为绘制最大内容时，通常可以考虑将页面加载到完成
一般而言，为了提供良好的用户体验，我们应该在2.5秒或内部努力将其制成。
第一个输入延迟（FID）是用户首次与页面进行交互（例如，当他们单击链接时，单击按钮或使用JavaScript驱动的自定义控制器），直到浏览器响应交互并可以实际开始处理事件时间以处理程序。
一般来说，我们可以认为FID时间可以使用户获得良好的体验
累积布局偏移量（CLS）是整个页面生命周期中最大的布局偏移分数之一（页面可见性被隐藏）。每当可见元素从可见位置更改为下一个可见位置时，就会发生布局偏移。
CLS将测量网页整个生命周期中所有意外布局偏移的总和。
简而言之，当您阅读文章时，页面上的某些内容在页面上更改；或者您即将单击链接或按钮，但是在手指掉落的那一刻，按钮即将到达精神位置，使您单击其他内容；您可以看到下图：
一般来说，我们应该控制0.1或以下的分数
技术 - 中心性能指数
什么是技术中心的性能指标？
让我们看看上面的图片。这是模型图。该图中的许多时间点和时间段可能不需要为用户知道。瀑布地图使我们能够定义网站的性能并具有优化的方向；
关键时间点FP白屏幕时间响应-FetchStart从请求开始到浏览器，以启动第一批HTML文档字节的时间。对于第一次，TTI可以与Dominteractive -FetchStart浏览器进行交互，以完成所有HTML解析并完成DOM结构。目前，浏览器开始加载资源。domreadyhtml加载时间是DOM READY TIME.DOMCONTLOADEVENTEND -FECTERTART单页客户端呈现以生成时间来生成模板DOM树的时间；在非单个或单页服务器的渲染下，要生成实际的dom tree'loadeventStart -fetchStartLoad =第一个渲染时间+dom解析时间消耗+同步JS JS Excution+resource load time.firstbyty的第一个渲染时间。包装时间响应 - domainlookupstart从DNS解析到响应浏览器的第一个字节，以返回浏览器。时间段域lookupendart-domainlookupstart如果使用了长连接或本地缓存，则值为0TCPTCP时间消耗-Time -Timultiple计算方法，扣除参数可能是requestStart requestStart或startTimetrans time -time -time -time -time -responseStart no noDomInteractive -Responsendless Resource Loading loadeVentStart -domContentloadeVent。
其他有意义的指标静态资源已加载
我们可以在每个负载下访问静态资源，并将收集的静态资源用于分析图形，例如瀑布，以找出导致静态资源加载太长的问题。
例如，一些具有大量活动以加载静态资源的资源，例如，这些资源将在用户加载后被缓存，然后在输入下一个时代时判断并决定是否使用缓存；
因此，如何判断用户的资源是否已缓存？实际上，这很简单。如果静态资源被缓存，请::
根据上述两个特征，我们可以：
PS：交叉 - 域资源（CDN）。默认情况下，跨域资源的以下属性将受到影响
如果您想获得特定的资源时间，则需要设置响应标头的交叉域资源
从分析指标获得的指标平均值以及通过分析整个应用程序收集的许多数据获得的指标取决于整个应用程序；
前端监视 - 第一个屏幕统计的前世
Web-Vitals
W3C绘画序列
Google文档指导者
灯塔计算源代码
原始：https：//juejin.cn/post/7097157902862909471