前言：这是掘金的末端第一次在掘金中共享学习内容。最近，我在课程结束时完成了大三的设计。
前端：next.js + mobx + ts + antd;
背景管理系统：vue3.0 + pinia + ts + elementui
后端：Next.js + TS + Alibaba Cloud OSS Storage + REDIS
在开发过程中，我遇到了很多坑，我将总结一下在开发过程中通过文章启动的坑和一些小体验。
首先要分享的是用于计算应用程序性能的React中的Web值。然后，我对其原理和源代码更感兴趣，因此我花时间学习，发现互联网上的信息相对较少，所以我希望每个人都喜欢它。
Web-Vital是Google启动的网站性能标准
官方文件：https：//github.com/googlechrome/web- value
核心网络生命值
核心Web Vitals是Web Vitals的子集，适合所有网页
主要注意力：加载速度，交互式，视觉稳定性
代表：LCP，FID，CLS
以上三个构成了核心网络生命值的核心指标
2.1，CLS 2.1.1的应用和统计数据，如何处理CLS，让我们通过一个示例来证明它是什么用来做的（图片很丑，我希望每个人都不要击败我）
以上是设计师给我们的UI设计图。作为前端工程师，我们需要恢复高精度。
搜索框架，旋转图，标签开关，瀑布流量产品显示
但是，当我们做一个好的程序并测试测试同学时，他发现：
在开始时，显示此页面，大约需要1秒钟才能慢慢显示旋转图。
作为一名出色的前端工程师，您突然将问题定位了。背景管理系统上传的图片的准确性太大了。整个图片太大了。上传时，他在上传时没有判断和拦截上传。在前端显示器上，因为未设置塔巴尔的高度，它将在加载图片后显示，以及整个Tabbar旋转的位置将显示图片。在此过程中，图片的原始回合最初是由产品列表占据的，但是在加载图片后，塔巴尔突然弹出。用户直视它。
因此，当问题定位时，我们将从一开始就定义Tabbar旋转图的大小，并限制背景管理系统的图片上传的上传大小。展示整个用户体验。
在本期中，我们发现，如果我们没有提前设置塔巴尔旋转图的大小，但是在加载图片后，显示页面的布局很大，眼镜很害怕远离眼镜。
返回我们的CL（累积布局偏移）称为累积布局偏移
官方声明：
在页面的整个生命周期中，每个元素的非指望布局的总和。每当您可以在两个渲染帧中比较用户可见元素的起始位置时，如果不同的话，它将产生它，它将产生它，它将产生它。LS（布局shift）
如果用户输入applet/网站，则页面布局会更改（例如，DOM突然从高度变为0到100，DOP从顶部变为0更改为100），这称为布局偏移偏移量
2.1.2。JS提供的Web API可以测试每个核心网络生命值
使用Web-Vitals，第三方JS库
2.1.3，只要我们讨论CLS的累积布局（累积布局移位），今天的返回结果和返回结果时间就会定时。执行GetCls（）函数时，返回结果是：
以后的UserInfo是我添加的内容（因为我想找到每个用户的相应性能，并且我将添加手机类型，型号等，以稍后获得用户）
此结果的时机：如果它是Web应用程序，则是当我们将网页最小化到计算机的背景时，将浏览器的选项卡切换到隐藏的网页，CLS此时将返回结果，如果是Applet，当手机锁定屏幕或用户返回桌面时，它是触发的（将其切成背景）
为什么将应用程序切成背景时会触发？
因为CLS（累积布局偏移量）是基于用户使用应用程序时的用户（当应用程序悬挂在后台时），所以应用程序布局的偏移量
2.2，CLS原理1.浏览器提供的API
绝对不可能从头开始。我们需要检测浏览器中网页的性能。必须是浏览器提供的一些API来监视网页中的更改。
例如，如果我们要计算CLS，我们可以看到页面布局中的更改，但是浏览器如何监视此网页的布局？
好问题！十字路口
浏览器提供：布局不稳定API布局不稳定性API -WEB API |mdn（mozilla.org）
翻译是：
布局不稳定性API（不稳定布局中的API）：提供模板（接口）来添加和报告布局偏移（布局偏移）
可以这样理解此代码。我们有新的女友，不是吗，是新的PerformanceObserver：这个观察者很强大，您可以观察网页的行为，浏览器中的用户，包括用户单击事件，事件，输入事件以及Web布局的偏移。
我们可以通过这个观察者的观察者方法来说明它，我想观察浏览器的哪种行为，哦，好的，它传递到了选项对象
然后，本观察者，每次观察浏览器的布局时，都将执行以通过新的性能Observer传递时通过调整功能
让我们解释一下缓冲的含义：选项对象中的true
参考：https：//web.dev/debug-layout-shifts/本文非常好
文章中的说明：
它是初始化的一个缓冲区缓冲区，以节省每个布局偏移的信息（例如，哪个元素是偏移量，偏移情况是什么，无论是上下移动的情况，还是左右移动，或大小的变化）。实际上，它用于使用iTlet的计划一个缓冲区来保存我们记录的“埋藏点”（条目）
只需检查一开始是否初始化它。
条目实际上可以翻译为：条目，注册（我认为）
该布局不稳定性API返回的信息是这样，以下是一些报告的内容（条目）
以下对象中每个字段的含义可以看到此教程的布局shift
LayoutShiftAtattribution表示有关每个布局的更详细信息，例如
表达的含义是，一个
在大小和位置信息的开头，您可以看到以前和电流将最高属性的值从76更改为246，因此您可以知道
在浏览器的API支持下，我们可以监视布局的信息并获取布局偏移的相关信息
得分原则
我们可以看到布局偏移返回一个值值，因此该值如何计算？因为该值的值越接近1，则越接近1表示布局越来越多，并且用户体验越来越差。值= 0表示没有布局偏移，这是最佳的用户体验。
LS的评分算法（计算的详细信息可以涉及此大个子翻译的本文。其中有几张演示图片解释了计算得分方法：关于前端：前端性能索引累计累积s-Shift-Shift-Shift-Shift-Fun区域（Lequ77）.com））））
有了上述理解，让我们分析Web-web值的GETCLS方法以获得CLS性能。
源代码链接：https：//github.com/googlechrome/web-vitals/blob/main/src/getcls.ts.ts.ts.ts.ts.ts.ts.ts
2.3，源代码分析布局和会话分区和评分原则
看到此代码可能有些激进。首先查看下面的大个子的文章，这很明显（（34新闻）对前端监视SDK的某些技术要点的一些技术分析
了解会话分区的概念。也就是说，布局偏移的数量分类为同一会话（是否将其分为同一会话会话区域，以通过此布局偏移时间进行判断）
摘录文章中的单词：
一个或多个快速且连续的单布局偏移量，每个偏移量小于1秒，整个窗口的最大持续时间为5秒。
这是一个会话窗口，可以在恢复后具有多个布局变化的输入信息，但是要满足当前的布局移动正时和上一个布局偏移的时间小于一秒钟，每个会话的时间跨度仅为五秒钟。
现在是时候通过以下代码来判断会话会话区域：
因此，第一个问题是为什么定义了此会话，为什么有1s和5s的概念？
（该会话窗口的特征是Chrome团队通过实验和研究获得的特征结果）
然后还有另一个问题。在进入应用程序的生命周期中，用户肯定会在多个会话中存在。每个会话都会有一个分数。如何再次计算？
或这篇大人物的文章清楚地阐明了SDK监视SDK的某些技术点原理的原则（34新闻）
目前，所有会话的最大价值是对用户CLS性能的性能的最佳响应。由于加载应用程序时，大多数CLS布局偏移量都会发生，并且当用户后面使用时，整体布局偏移量也不多。因此，每次我回电时，都会计算会话会话的会话的值。
on吞
然后我们可以看到此代码。
首先看我们在Ondiden中所做的事情？
可见性查步实际上是我们类似于选项卡开关，应用于手机的背景和手机锁定屏幕。我们的文档将以隐藏状态显示。
不同的浏览器是两种类型的监视方法：pagehide和discibilityChange，因此我们都进行监视，因此当用户可以将Web/App剪切到后台时
您可以看到此CB是我们引入的回调函数
通过po.takerecord方法执行回调函数，您可以关注：
我们位于PerformanceObserver中定义的缓冲区，该缓冲区存储了输入记录。TakeRecords将取出所有输入记录，然后执行EntryHandler函数，这仅表示我们的报告（true）含义
您可以看到源代码：
该Bindreporter将返回接收Forcereport参数的函数。如果我们通过forcereport = true，请立即执行该功能并返回到现在
记录的记录给出了用户，即返回getCls的结果
也就是说，当用户将页面切成背景时，CLS返回结果的原因
OnBfCacheStore具有另一个更难理解的源代码：
首先，有必要了解所谓的BFC
BFC（向前缓存）：浏览器圆形 - 行程缓存
也就是说，当用户使用浏览器向前和向后移动时，页面转换速度非常快，因为页面的缓存不仅保存了页面数据，还保存了DOM和JS的状态。实际上，保留整个页面以保存整个页面。在各种内存中。从BFC返回的页面不会触发在线事件，但是将执行“ PagesHow事件”（ONLOAD由页面的第一次加载触发。
这是因为BFC不执行在线方法，并且当页面打开时，我们所有人都会启动Web-Vital的监视功能，但是如果页面由BFC缓存，我们下次输入此页面时，我们将不会执行Onloadpage。然后不会有网络值监视功能，因此您听不到。
因此，为此，我们必须为BFC页面进行额外的操作
让我们看一下OnBfCachereestore函数内部的功能：
我们收听页面。如果您发现此页面由BFC返回，我们将执行CB回调（即我们的Web重要监视功能） - 启动性相关内容，并打开报告监视恢复。
2.3，小型建议 - 还原CLS分数的方法（参考文章：前端性能索引：累积布局偏移-EsgenmentFault
在谈论CLS的计算方法之后，可以有一些方法来提高CLS分数吗？有一个概念简介：预期的LS和非指望的LS
1.一些布局偏移将不会参与计算。例如，当我们启动网络请求时，显示骨架屏幕或加载以占用一个地方，以便用户知道正在加载哪个模块。这是更好的用户体验。
2.我们还通过转换来使元素越来越小，并听到了翻译以使元素逐渐出现。这种梯度和逐渐变化是指导用户体验。用户不会觉得很奇怪，这很奇怪
基于此，我们可以在开发时发展：
2.4，文章参考和建议本文非常强大：https：//jishuin.proginn.com/p/763bfbd68f83
我学到了很多东西：https：//sementfault.com/a/1190000039843064？utm_source = tag-newest
Web-Vitals文档（您可以看到源代码，源代码相对简单，易于理解，只要可以理解理解的原则）：https：//github.com/googlechrome/web-- verals-vitals
浏览器行为性能更多学习方法：https：//developer.mozilla.org/zh-docs/web/api/performance/performance
LayoutShift学习材料：布局不稳定性API（wicg.github.io）和一些中文教程：https：//www.mifengjc.com/api/layoutshift.html
前端监视SDK学习的出色博客文章：（34新闻）分析前端监控SDK的某些技术点原理
一篇有关Google杰出博客的关于布局迁移的高质量文章：https：//web.dev/debug-layout-shifts/
原始：https：//juejin.cn/post/7097115187250528287