您可以在操作过程中记录站点的性能数据。有了这些性能数据，您可以播放整个页面的执行过程。表现瓶颈。
各种配置和说明如图所示：
性能不仅可以记录加载阶段的性能数据，而且还可以记录交互式阶段，还可以记录交互式阶段的记录需要手动停止记录过程。
观察下图中的报告页面，我们可以将其分为三个主要部分，即概述面板，性能索引面板和一个详细面板。
在概述面板中，性能将使用多个关键指标，例如页面帧速度（FPS），CPU资源消耗，网络请求流量，V8内存使用情况（HEAP内存）等。您可以看到上面的图片。
除上述指标外，概述面板还显示了加载过程中的几个关键时间节点，例如FP，LCP，Domcontentloaded，Online和其他事件。
在性能面板中，记录了许多性能指标，例如主指标记录渲染主线程的任务执行过程，Compositor索引记录了合成线程的任务执行过程，GPU索引记录了任务GPU过程主线程的执行过程。在这些详细的性能数据的情况下，我们可以帮助我们轻松地找到页面的性能。
简而言之，我们使用概述面板来定位问题的时间节点，然后使用性能面板在时间节点内分析性能数据。特别是，在概述面板中的FPS图中显示了一个红色块，然后我们我们单击红色块，并且性能面板位于红色块的时间节点中。
由于浏览器的渲染机制太复杂了，因此在渲染过程中，渲染模块将分为许多子阶段。输入HTML数据通过这些子阶段，最后输出屏幕上的像素。列片流式水管。完整的渲染流线包括对HTML文件生成DOM的分析，分析CSS生成CSSOM，执行JavaScript，样式计算，构造，构造，构造，构造，构造，构造构造布局树，准备图形列表，光栅，合成和显示。
渲染流线主要在渲染过程中执行。在执行渲染流线的过程中，渲染过程需要网络流程，浏览器流程，GPU和其他流程的合作来完成此类复杂的任务。此外，在渲染过程中，有许多线程可以彼此合作。可以参考以下图以获取特定的工作方式：
观察上图，水平条表示任务的执行。长度越长，花费的时间越多；垂直方向代表任务的执行记录。我们知道主线程上有很多任务，例如渲染流液线，JavaScript执行，V8垃圾回收，计时器设置等的大多数过程。我们使用perofrarmance，大多数时候正在分析主要指标。
在渲染过程中，保持了消息队列。如果通过鼠标点击的消息事件设置了SettieMout设置的回调函数，则将以任务的形式添加消息队列，并且任务调度程序将根据某些规则从消息队列中获取适当的任务。让它在渲染主线程上执行。
主指标记录了在主线上执行的所有任务以及每个任务的详细执行过程。
观察上面的图片，图上方有许多灰色横杆。每个灰色水平栏对应于任务。灰色条的长度对应于任务的执行时间。从本质上讲，渲染主线程上的任务相对复杂。如果简单地记录任务执行的持续时间，仍然很难找到问题。因此，需要记录任务执行过程中的一些关键细节。这些细节是这些细节。
直观地理解，您可以将任务视为任务功能。在执行任务函数的过程中，它调用一系列子功能。这些子功能是我们提到的过程。为了使您更好地理解，让我们分析以下任务的图形：
观察上面记录的图形，您可以将此图形视为以下任务函数的执行过程：
基于分析页面的加载过程的主要指标。LET首先分析一个简单的页面，代码如下：
可以看出，它仅包含CSS样式和JavaScript嵌入式代码的一部分。其中，DOM操作是在JavaScript中执行的。我们结合此代码以分析页面的加载过程。
首先，生成了报告的页面，然后在报告页面中观察了主要指标。由于实际指标更加艰辛，因此首先手动绘制一些关键任务及其执行过程，如下图所示：
通过上面的图形，我们可以看到加载过程主要分为三个阶段。他们是：
然后，我将按照这三个步骤介绍如何在主要指标上解释数据。
在单击性能上的重新记录按钮时，导航阶段后，浏览器进程将通知网络进程，以请求相应的URL资源；一旦网络进程从服务器接收到URL的响应标头后，它将立即确定响应标头中的内容响应标头，该响应标头到达类型字段属于文本/HTML类型；如果是这样，则浏览器进程将允许当前页面在退出之前执行清洁操作，例如在JavaScript中执行Beforunload事件。分析，布局，合成，显示，显示和其他系列操作。
当您单击“重新加载”按钮时，当前页面将在上图中执行任务：
分析HTML数据阶段的主要任务是通过分析HTML数据，解析CSS数据和执行JavaScript来生成DOM和CSSOM。：
观察上面的图，可以看出，主要过程之一是HTMLPARSER，顾名思义，此过程用于分析HTML文件。分析是上一阶段收到的HTML数据。
生成显示后可以通过DOM和CSSOM生成，第三阶段进入第三阶段：在页面上生成位图。基本上，这需要一系列操作，例如布局，分层，绘图和合成。同样，第三阶段的过程也被扩大，如下图所示：
结合上图，我们可以发现，在生成DOM和CSOM之后，渲染主线程首先执行了一些DOM事件，例如ReadyStateChange，Load，PagesHow.cepersey.ceppece，如果您使用JavaScript进行监视这些事件，那么这些监视功能将会通过依次渲染主线程来调用。
接下来，将显示显示过程，并在下面显示一般过程。
到达复合层后，主线程的任务已完成。指标的下分析，请参阅以下图：
本文回答了个人长期麻烦的问题：在某些情况下，例如较慢的网络速度或页面内容很多，页面几乎不会显示。最初，网络数据有点渲染以渲染一点。实际上，数据是在导航阶段中获得的。之所以慢慢渲染的原因是因为浏览器的显示频率为60Hz，即16.67MS刷新了浏览器，但是在16.67ms之内，渲染流线可能只有一半，但是目前，渲染必须是渲染屏幕的一半，因此您会发现页面逐渐绘制。
原始：https：//juejin.cn/post/7095647383488299044