foreword
Performance can record the performance data of the site during operation. With these performance data, we can replay the execution process of the entire page, which makes it convenient for us to locate and diagnose the operation of the page in each time period, thus effectively helping us Find the performance bottleneck of the page.
Usually, using Performance requires three steps:
- The first step is to configure Performance.
- The second step is to generate the report page.
- The third step is to manually analyze the report page and find out the performance bottleneck of the page.
Next, let's get familiar with Performance according to the above three steps, and understand how to use Performance to analyze page performance data.
Configure Performance
We open any site in Chrome, open the Chrome developer tools, and select the Performance tab. The final effect is as shown in the figure below:
The above picture is the configuration page of Performance, observe area 1 in the picture, we can set "Network" in this area to limit the network loading speed, and set "CPU" to limit the CPU operation speed. Through the settings, we can simulate devices with low performance such as mobile phones on the Chrome browser. Here I reduced the computing power of the CPU to 1/6, and set the loading speed of the network to "fast 3G (Fast 3G)" to simulate the network status of 3G.
In area 2 and area 3 above, we can see that there are two buttons, the upper black button is used to record the performance data of the interaction phase, and the lower black button is used to record the performance data of the loading phase.
Also note that the two recording methods are slightly different:
- When you record performance data in the loading phase, Performance will refresh the page and wait until the page is fully rendered, then Performance will automatically stop recording.
- If you are recording the performance of the interactive phase, you need to manually stop the recording process.
Meet the report page
No matter which recording method is used, the final generated report page is the same, as shown in the following figure:
Observing the report page in the above figure, we can divide it into three main parts, namely overview panel, performance panel and details panel.
Overview panel
有了概览面板，我们就能一览几个关键的历史数据指标，进而能快速定位到可能存在问题的时间节点。那么如何定位可能存在问题的时间节点呢？
- 如果 FPS 图表上出现了红色块，那么就表示红色块附近渲染出一帧所需时间过久，帧的渲染时间过久，就有可能导致页面卡顿。
- 如果 CPU 图形占用面积太大，表示 CPU 使用率就越高，那么就有可能因为某个 JavaScript 占用太多的主线程时间，从而影响其他任务的执行。
- 如果 V8 的内存使用量一直在增加，就有可能是某种原因导致了内存泄漏。
除了以上指标以外，概览面板还展示加载过程中的几个关键时间节点，如 FP、LCP、DOMContentLoaded、Onload 等事件产生的时间点。这些关键时间点体现在了几条不同颜色的竖线上。
性能面板
通常，我们通过概览面板来定位到可能存在问题的时间节点，接下来需要更进一步的数据，来分析导致该问题的原因，那么应该怎么分析呢？
这就需要引入性能面板了，在性能面板中，记录了非常多的性能指标项，比如 Main 指标记录渲染主线程的任务执行过程，Compositor 指标记录了合成线程的任务执行过程，GPU 指标记录了 GPU 进程主线程的任务执行过程。有了这些详细的性能数据，就可以帮助我们轻松地定位到页面的性能问题。
比如概览面板中的 FPS 图表中出现了红色块，那么我们点击该红色块，性能面板就定位到该红色块的时间节点内了，你可以参考下图：
观察上图，我们发现性能面板的最上方也有一段时间线，比如上面这个时间线所展示的是从 360 毫秒到 480 毫秒，这段时间就是我们所定位到的时间节点，下面所展示的 Network、Main 等都是该时间节点内的详细数据。
详情面板
比如主线程上执行了解析 HTML(ParserHTML) 的任务，对应于性能面板就是一个长条和多个竖条组成图形。通过上面的图形我们只能得到一个大致的信息，如果想要查看这些记录的详细信息，就需要引入详情面板了。
你可以通过在性能面板中选中性能指标中的任何历史数据，然后选中记录的细节信息就会展现在详情面板中了。比如我点击了 Main 指标中的 ParserHTML 这个过程，下图就是详情面板展现该过程的详细信息。
由于详情面板所涉及的内容很多，这里就不展开具体讲了。