2.6 性能(Performance)面板
2.6.1 性能分析
在Chrome浏览器中，Performance面板是开发者工具中一个强大的工具，用于记录和分析网页的性能数据。以下是如何使用Performance面板进行性能分析的详细步骤：
- 打开开发者工具
在Chrome浏览器中，按下F12键或右键点击页面并选择检查，打开开发者工具面板。 - 切换到Performance面板
在开发者工具中，切换到Performance选项卡。此时，你会看到一个记录性能数据的界面。 - 开始记录性能数据
点击页面顶部的Record（录制）按钮，开始记录性能数据。刷新页面或执行你想要分析的操作。 - 停止录制并查看数据
在你完成操作后，点击Stop（停止）按钮，停止记录性能数据。
此时，会看到一个包含了各种性能数据的时间轴图表。这个时间轴图表将显示页面加载期间的各种事件，如JavaScript执行、网络请求、渲染等。 - 分析性能数据
时间轴图表：时间轴图表将各种性能事件按照时间顺序排列，可以缩放和选择特定时间段来深入分析。
2.6.2 区域划分
区域1:
网页性能总览图：总览图包含FPS（每秒帧数情况）、CPU（CPU占用情况）、NET（网络资源情况）、HEAP（JS占用情况）等四项指标。
FPS：表示每秒传输帧数，是分析动画流畅度的主要指标。绿色竖线越高，FPS越高；红色表示长时间帧，可能出现卡顿。
CPU：展示CPU资源的使用情况，不同颜色代表不同的事件类型（如网络通信、HTML解析、JavaScript执行等）。
NET：表示网络资源的加载情况，横杠越长，检索资源所需的时间越长。
HEAP：表示JavaScript执行的时间分布。
区域2:
各项指标的区块图：提供更详细的性能指标数据，如网络请求的详细时间、JavaScript的执行时间等。
区域3:
数据统计与汇总：提供各指标时间占用的统计报表，以及事件调用顺序列表等。
- 识别性能瓶颈
通过分析时间轴图表和各项指标的区块图，可以识别出性能瓶颈。例如，长时间的JavaScript执行、大量的网络请求或频繁的重绘和回流都可能导致性能问题。
点击图表上的不同事件，可以查看更详细的信息，如事件的时间、持续时间、事件类型等，进一步定位问题。
示例：
假设你在分析一个网页时发现，页面加载时间很长，且JavaScript执行时间占据了大部分时间。通过进一步分析，你发现某个特定的JavaScript函数执行时间特别长，这可能就是性能瓶颈。你可以尝试优化这个函数的执行效率，或者减少它的调用次数，从而提升页面性能。
2.6.3 火焰图解读
火焰图是另一种用于识别性能瓶颈的可视化工具，它以图形的方式展示了函数调用栈的层次和时间分布。以下是如何解读火焰图的步骤：
- 火焰图的基本结构
火焰图是一个垂直的图形，每一列代表一个调用栈，每个格子代表一个函数。
纵向（Y轴）高低不平，表示函数调用栈的深度，顶部是正在执行的函数，下方是它的父函数。
横向（X轴）表示该函数执行消耗的时间，横向越宽，表示该函数执行时间越长，可能是性能瓶颈。 - 识别性能瓶颈
查找火焰图中横向较宽的函数，这些函数可能是性能瓶颈。
注意那些具有平顶的函数，即宽度在某一层次上突然变宽的函数，这些函数也可能存在性能问题。
分析这些函数的调用关系和执行逻辑，找出导致性能问题的原因。 - 优化建议
对于性能瓶颈函数，尝试优化其执行效率，如减少不必要的计算、优化算法等。
如果可能，减少对该函数的调用次数，或者将其分解为更小的函数来并行执行。
通过以上步骤，你可以有效地使用Performance面板和火焰图来分析和优化网页的性能。