作者：Peng Li，火山引擎APM研发工程师。在2020年添加了BYTES，负责在前端开发和维护SDK，以及平台数据消费的勘探和实施。
您知道在页面的第一个屏幕出现之前留下了多少用户吗？性能差会对业务目标产生负面影响。例如，英国广播公司（BBC。高性能站点可以吸引和保留用户比低性能站点更多，而保留用户对于提高用户转换率至关重要。
本文以此为背景来介绍内部InterTex如何衡量网站的性能以及如何监视在线网站性能上的在线站点的性能。
网站性能的性能是多样的。它不仅是通过加载速度和通过页面渲染速度来衡量的。相反，有必要注意用户对从页面到封闭过程的整个加载过程中对性能的看法。用户心脏中的这个网站仍然很差。
站点性能通常可以分为两类，一个是第一个屏幕性能，另一个是运行时的性能。前者衡量页面的性能从加载到稳定的交互，后者测量页面的性能到关闭页面。
早在2012年，Web Performance Work Group [1]就为页面加载方案制定了一个加载过程模型，以衡量每个阶段的页面加载时间消耗以衡量页面加载的性能。显示了特定的加载过程模型在图中：
该模型定义页面加载到页面加载的时间点以完成整个过程。除了正常的初始化和绘制主文档时间点外，它还还包括一个理解渲染的详细时间点。例如：
尽管开发人员可以根据这些要点加载页面时测量性能，但在线用户无法感知这些要点之间的区别。对于用户，我们只能在页面开始渲染，何时呈现主要内容时才能感知，何时可以互动，以及是否存在交互延迟。
因此，是否可以使用任何指标来测量可以使用的这四个阶段？
这两个指标均来自油漆时机[2]标准。该标准主要记录在页面加载期间的一些关键时间点中。通过这两个指标，您可以在页面开始呈现内容时测量。
有了这三个指标，您可以在渲染页面时进行测量。但是，行业中有一些测试LCP非常接近FMP的时间点。同时，FMP的性能很大，由于一些小变化，该值的价值波动巨大。因此，建议使用LCP。由于SI很复杂，并且很难解释指标，因此通常仅在实验室环境中使用。
尽管TTI可以测量页面可以交互的时间点，但在此期间，它无法感知浏览器的繁忙状态。BOINGINGTBT可以帮助您了解页面在加载期间无法响应用户输入时间的时间。
MPFID可能是虚拟的延迟时间，** fid **是用户首次交互的第一个延迟时间。因此，通常建议使用FID，这是用户页面交互和响应的第一印象。良好的第一印象可以帮助用户确立整个应用程序的良好印象。在同一时间，在页面的加载阶段，资源的处理任务是最重的，并且输入延迟最有可能产生输入。
在这一点上，通过上面每个阶段的指标，基本上可以完全测量第一个屏幕的性能。那么如何测量运行时的性能？
运行时的性能通常可以通过长任务和输入延迟来感知。长任务主要衡量主线程的繁忙情况，输入延迟主要是为了衡量用户交互的延迟。
如果任务在主线程上运行超过50毫秒，那么这是长任务。如果您可以在运行时收集所有长任务，则可以知道运行时的性能。在特定的练习中，您可以注意长时间长期任务并将其与用户行为联系起来，这可以有效地帮助定位在线口吃的原因。
它起源于事件时机[3]标准。该标准是为了帮助深度理解用户触发的某些事件的延迟。通过计算输入后用户输入和处理页面之间的差异，执行延迟时间。这些延迟通常是由开发人员代码的不当写作引起的，这会导致JS执行时间太长。
有与页面性能有关的指标，那么如何收集这些数据？
页面加载过程中的时间点主要依赖于导航时间[4]标准。此标准后来升级为2.0版，对应于导航时机2 [5]标准。尽管两者不同，但计算出的指标基本上是相同的。在浏览器中，您可以通过以下方式获取它：
基于这些数据，不仅是DNS / TCP /请求的时间 - 耗尽时间，还包括时间 - 耗时的时间消费Domream / domparse / load。
FP和FCP可以通过浏览器提供的API直接获得，因此收集原理并不复杂。如果已为第一个绘图和第一个内容绘图绘制了页面，则可以使用以下方法直接获取它。
但是，如果该页面尚未首次开始绘制，则需要通过监视获得。
LCP主要依赖性能者。特定的听力方法如下：
浏览器将多次报告LCP，并且一般LCP是用户交互之前报告的最新LCP。由于交互通常会改变用户可见的内容，因此在用户交互后，新报告的LCP不再满足LCP的定义。
与FP / FCP / LCP相比，FMP的收集相对复杂。它需要通过算法来计算，并且该行业没有统一的算法。当前页面。“在页面渲染过程中，“ DOM结构更改”类似于与之相对应的“渲染时间点”。
与FMP相似，浏览器不提供直接获得TTI的API，但是有一个详细的描述，即如何计算TTI以获得相应的描述以获取TTI时间点。具体说明是：首先找到FCP的时间点，然后找到一个安静的窗口。安静的窗口需要满足三个条件：1）不长任务。2）窗口中不超过两个获取请求。3）窗口时间窗口窗口读数至少应为5s。
窗户前面的最后一项长任务的末尾是TTI。
通过计算FCP和TTI之间的长任务总和，可以获得TBT。
阻止时间是时间 - 令人费解，即任务在长期任务中超过50ms。
FID还依靠PerformanceObserver。特定的听力方法如下：
MPFID是FCP之后最长的任务。在FCP之后聆听长任务后，您可以获得最长的长任务。
尽管浏览器提供了足够的API来帮助收集各种性能指标，但计算JS中的特定指标更为复杂。有两个原因：一个原因是，API报告本身的内容和定义是部分不同的，因此应处理这些差异计算时；第二个是浏览器不会在某些情况下报告相应的内容。在这些情况下，需要模拟模拟测量。
尽管有许多性能指标，但每个性能指数都会在一个方面评估。如何查看整个网站的性能？对于每个单个指标，是否有标准可以定义指标的值在特定范围内非常出色？我们应该专注于在线站点性能？每个性能指标的重量是重量吗？
Google提供了各种性能指标的参考线，该指标具有某些参考意义。为什么只说它具有一定的参考意义？首先，基准线本身正在改变。随着索引计算的逐步更新和软件硬件的更新，还将调整基准线路。第二，用户的使用方案还将对性能指标产生重大影响。例如，iOS用户报告的性能指标通常比Android用户报告的性能指标更好。
以下是字节内使用的某些性能索引的参考线。基本上对Google推荐的基准线路对齐。通过这些数据，可以分析站点的性能。
除了考虑常规的性能指标外，站点满意度的测量还必须考虑体验类别的指标，例如专门测量视觉稳定性的指标CL。
测量在线站点满意度，通常会根据参考灯塔的满意度计算规则来消除实验室环境中建议的指标的重量。
以下是字节使用的在线站点的性能满意度的重量计算公式，删除了不建议在线环境测量的两个指标。
然后，凭借网站满意度，我们最终可以知道站点的性能是好是坏。因此，我们应该如何优化假设性能不好？
通常，我们可以从性能指标进行有针对性的优化。尽管指标是不同的，但优化的想法是相似的。了解指标的依赖性后，**可以通过**优化索引的相关依赖项快速优化性能指标。，从而提高了网站的性能。例如，摘要：例如：当我们要优化TTI时，根据刚刚提到的TTI的计算方法，我们可以绘制TTI的依赖项主要包括FCP，请求和长期任务，因此尽快渲染，尽快渲染，尽快请求尽快结束，避免长期任务是优化的关键，有更具体的指标优化措施，并将在随后的文章中引入。了解全面的优化措施很重要，但是采取每种措施可能无法有效地解决该措施网站面临的关键性能问题。如何优化直接和有针对性的优化？这是一个想法，是通过恢复用户时恢复情况来帮助定位性能的想法。**
在正常情况下，除了监视性能指标外，前端监视还将监视数据，例如请求和资源以及长期任务等数据。这些数据可以帮助恢复用户的加载场景并帮助查找线索。例如，以下示例，多个性能指标很差。通过监视平台，原始资源加载了瀑布地图，我们可以看到大部分时间都是消耗的。在提取资源时。然后，您可以最初获得性能优化计划，重点介绍有关资源优化的优化措施，例如缩小JS文件的量，延迟未使用的JS代码等等。
在线监控有许多示例，可以帮助定位性能问题。屏幕截图使用字节内的前端监视平台。目前，该解决方案已在火山发动机上同步。可以连接真正的时间监视，警报归因，集群分析和网络侧的详细信息，以求解解决方案屏幕，性能瓶颈，慢速查询和其他关键问题，欢迎经验丰富。
扫描下面的QR码，立即免费使用??
[1]网络性能工作组：https：//www.w3.org/webperf/
[2]油漆时间：https：//w3c.github.io/paint-timing/
[3]事件计时：https：//w3c.github.io/event-timing/
[4]导航时间：https：//www.w3.org/tr/navigation-timing/
[5]导航时机2：https：//www.w3.org/tr/navigation-timing- 2/2/