性能监控页面包含PID聚合和性能总览两大模块。配合报警和数据探索，可以辅助您更快发现性能问题，以及作为页面性能优化的数据依据。

前提条件

已接入LongTask。详情请参见Web SDK接入。SDK默认开启LongTask监控，默认采样率为0.01。

PID聚合

默认情况下，pid是自动获取当前页面url的pathname或者hash。但是如果初始化有传pid，以业务传的pid为准。在单页面应用中，除非在初始化时指定写死，否则页面pid不同。

指标达标率

在站点设置页为当前站点设置各个性能指标的达标率。此后可以在性能监控最上方，看到当前达标的PID个数。
达标率趋势图展示了选中时间段内符合基准线要求的PID数/总PID数作为优化参考。

• 页面默认展示FP达标率、FCP达标率、LCP达标率、FMP达标率、TTI达标率和LOAD达标率。如果要查看自定义的性能指标的达标率，请先在性能指标管理页面注册性能指标。详情请参见性能指标管理。
• 默认的性能指标和自定义的性能指标，都支持在项目设置 > 性能基准线设置中进行设置指标线。

性能最差页面

您可以按照哪个性能指标和什么统计方式排序，查看整站点所有页面里性能最差的Top 5页面。性能指标包括默认的性能指标和自定义的性能指标，统计方式包括avg、pct 50、pct 75、pct 90、pct 95。

• 页面列表里展示的是在整站点所有页面里根据筛选条件筛选出来的性能最差的Top 5页面。这5个页面还可以根据自定义指标和默认指标进行排序，例如根据FP升序排序，查看性能最差的Top 5页面中，FP最长的页面。
• 性能最差页面以PID为聚合纬度，展示当前样本量阈值下所选指标性能最差的PID。
  WebPro监控平台各项功能强依赖PID设置，设置与业务相关的合理的页面可以更好发现性能异常相关问题。
• 展开PID信息，会展示该PID的多指标性能趋势图。
  
• 单击PID内容，会进入页面详情页面查看该页面的趋势图、分布和跳出率等信息。
• 单击慢页面次数，可以跳转至数据探索页面查看慢页面详情。

页面耗时区间分布

页面耗时区间分布可以查看所选指标耗时的分布情况。

• 拖动下方的滑动条，可以自定义耗时的显示范围。同时可以在右上角查看所包含的耗时范围内上报量占比情况。
• 悬停在柱体上，可以查看不同区间段的柱体的耗时范围、上报量和占比。
• 单击柱体可以跳转到数据探索页面查看Views页面下各url的详情。

性能优化/劣化

性能优劣化页面以PID为聚合纬度，展示当前所选时间范围内性能优化/劣化最严重的PID信息。

• 趋势图中把当前所选范围一分为二进行对比。如图所示，当前的时间范围是3天，所以数据探索页面的FCP的均值在后1.5天比前1.5天少697ms。
• 单击相应PID，会进入页面详情页展示该页面的性能总览。
• 如果有配置release相关信息，可以在趋势图中展示上线版本，辅助定位是否由于新版本，导致性能优劣化。如何配置release信息，请参见版本管理。

指标总览

指标总览展示了整站点筛选下默认性能指标和自定义性能指标的总览详情，包括趋势图、分布和跳出率，作为性能优化的数据依据。如果想修改各个指标的基准线，可以在项目设置 > 性能基准线设置中调整。

性能指标总览

性能指标总览展示了整站点性能指标，整站点性能指标受多个不同页面因素影响，对实际排查性能问题帮助有限。如果希望更好的观察性能指标，请在具体PID下查看。

在Web监控场景中，除了常见的性能指标，如FP、FCP、LCP等，应用性能监控全链路版还提供了LongTask监控和对应的消费。指标总览中以卡片形式展现了当前筛选条件下的longtask数和longtask耗时。

• longtask数：对应PID下一次PV平均有多少个longtask。
• longtask耗时：对应PID下一次PV平均累计有多长的卡顿。

LongTask是一个实验性API，它可以直观地告诉我们哪些任务执行耗费了50毫秒或更多时间。关于50毫秒这个阈值标准，请参见《RAIL Model》中Response: process events in under 50ms。
那么，LongTask可以用来干什么？
LongTask衡量的是任何连续不间断的且主UI线程繁忙50毫秒及以上的时间区间。
常规场景如下所示：

• 长耗时的事件回调（long running event handlers）
• 代价高昂的回流和其他重绘（expensive reflows and other re-renders）
• 浏览器在超过50毫秒的事件循环的相邻循环之间所做的工作（work the browser does between different turns of the event loop that exceeds 50 ms）

阻塞主线程达50毫秒或以上的任务会导致哪些问题？

• 可交互时间延迟
• 严重不稳定的交互行为(轻击、单击、滚动、滚轮等)延迟（High/variable input latency）
• 严重不稳定的事件回调延迟（High/variable event handling latency）
• 紊乱的动画和滚动（Janky animations and scrolling）

趋势图

趋势图中，左侧展示了该PID筛选条件下默认值指标和自定义指标与基准值的关系，右侧展示了筛选时间范围内的趋势图。

单击左侧相应指标名称，可以跳转数据探索进一步分析性能详情数据，并将性能基准线设置作为过滤条件带入到数据探索的搜索条件中。再单击单条数据可以查看某次View下所有性能指标的汇总情况，以及对应的资源加载和接口耗时的瀑布图，辅助定位是否由于个别资源或请求造成了页面整体的性能指标下降。

分布

耗时分布图中，左侧展示了该PID筛选条件下默认值指标和自定义指标与基准值的关系，右侧展示了筛选时间范围内的耗时分布。

耗时分布根据基准线设置用不同颜色展示不同性能指标。图中蓝色为符合预期，黄色为略低于预期，红色为严重低于预期。

跳出率

指标计算方式如下所示：

最佳实践

发现并定位卡顿的页面

从数据探索进入

1. 在数据探索页面，选择Long Tasks页签。
   
2. 单击具体的LongTask详情。
   
3. 单击会话中具体的View可以查看到单次pageview对应的瀑布流信息，完整还原现场。
   

从性能监控进入

1. 在站点性能总览页面，单击指标总览页签。
   性能指标总览中以卡片形式展现了当前筛选条件下的longtask数和longtask耗时。
2. 单击性能指标总览中具体的数值，跳转数据探索的LongTask页签下查看对应的详情。
3. 单击详情列表中对应页面，然后在层级关系中单击具体的View，查看到单次pageview对应的瀑布流信息，完整还原现场。

配合报警使用

报警类型选择性能指标后，报警指标选择longtask耗时，可以设置关于LongTask的报警。