本文档介绍了EMAS页面性能监控，重点展示了如何通过用户感知和运行性能两个角度的关键性能指标分析，指导用户优化页面性能，从而提升整体用户体验。
概述
H5页面性能是提高浏览器用户体验不可或缺的一部分，涵盖了页面加载速度、渲染效率和交互流畅性等方面。页面性能监控不仅能够帮助开发者和运维人员完整地观察并快速识别性能瓶颈，还能显著提升用户体验，减少用户流失，并优化整体网站性能。
EMAS性能监控插件模块提供了一套全面的Web/H5页面加载性能分析方案，适用于单页面应用（SPA）和多页面应用（MPA）等多种架构场景。该工具不仅支持从用户感知角度（用户体验侧）监控页面渲染和交互性，也从运行性能角度（开发与运维侧）进行深入分析。
使用场景
用户反馈处理：当用户反馈页面打开或加载缓慢时，开发者可以利用性能监控工具分析页面的渲染速度和加载过程，以定位问题。
持续性能优化：开发运维人员可以使用该工具对页面质量进行持续优化，整体评估和跟踪页面渲染、布局偏移和交互响应等关键性能指标的变化。
准备工作
功能说明
用户感知
展示筛选条件下，C端用户对您应用体验的各类指标，包括页面渲染、布局偏移、交互响应等。
下述指标定义和采集原理查看指标定义手册下的内容介绍。
运行性能
提供开发运维侧关注的页面加载过程中各个阶段的耗时变化趋势，包括：DNS解析耗时、TCP解析耗时、HTML请求响应和传输耗时等，这些阶段耗时均来至于运行性能指标。
操作：支持切换分位值，包括50分位、75分位、90分位和平均值。
分位值，是指将一个随机变量的概率分布范围分为几个等份的数值点，如果将一组数据性能从好到坏排序，并计算相应的累计百分位，则某一百分位所对应数据的值就称为这一百分位的百分位数。
举例，某页面被用户访问了100次，采样率100%，页面性能共上报了100条记录，每条记录中都有DNS解析耗时，EMAS-APM将这100条记录按照从好到坏排序，针对DNS解析耗时即从小到大排序。已排序数据中的第50个，即为这批数据中的50分位值；已排序数据中的第75个，即为这批数据中的75分位值。
在运行性能的各阶段耗时中，分位值均按照从小到大排序，因此50分位<=75分位<=90分位。
一般，75分位可以作为衡量大部分用户体验的合适阈值，如果您的业务有特定需求特性，可以切换其他分位值作为衡量标准。
页面列表
展示应用中的所有Web/H5页面，和页面维度的PV、UV以及用户感知指标信息，便于根据性能指标大盘和浏览量综合评估页面性能问题影响面和优化优先级。
排序方式：指标支持排序，默认按照PV数从高到低排序。
查看详情：点页面URL，进入到对应页面性能详情分析页。
当无相关指标上报时，将展示-，原因可能是采样率过低或某些原因导致无数据上报，建议前期先按照100%采样率上报，观测稳定后根据业务和成本需要，可以前往上报配置>页面性能灵活调整采样率。
页面性能详情
页面性能详情支持针对某个页面做详细下钻分析，提供该页面概况汇总的基本指标信息、用户感知和运行性能指标趋势图，并提供每一次客户端上报的详细信息。
基本信息
趋势图分析
提供页面维度，用户感知和运行性能趋势分析，支持切换分位值观测用户使用的分布情况。
详细信息
展示同一页面中的所有客户端上报性能信息的实例。左侧按照事件发生时间顺序排列，点击后右侧展示该页面的详细上报字段。
基础信息
基础信息显示了每条性能指标的基础设备信息，参见基础信息。
当前选项
当前选项展示了每条性能指标的详细信息。
参数 | 说明 |
国家/地区 | 设备所处的地理位置，根据IP推算 |
省份 | 设备所处的省份 |
城市 | 设备所处的城市 |
机型 | 设备的型号标识 |
用户IP | 设备的公网IP |
分辨率 | 设备的分辨率 |
JS SDK版本 | 所用SDK的版本号 |
优化技巧
1. 识别与优化关键性能指标
在页面性能监控中，各类指标提供了明确的方向，以帮助开发者识别和优化性能瓶颈。以下是如何根据监控数据进行性能优化的一些建议。
分析运行性能：
DNS查找时间：长时间的DNS查找可能预示着需要优化DNS设置。
TCP连接时间：如果TCP连接时间较长，可能存在网络延迟或需要优化服务器配置。
TLS握手时间：长时间的TLS握手表示SSL配置可能需要优化。
请求和响应时间：长时间的请求和响应可能意味着服务器性能问题或需要精简资源大小。
优化用户感知体验：
FCP（首次内容绘制）：长时间的FCP可能意味着首次内容加载过慢，建议优化初始渲染策略和资源加载。
LCP（最大内容绘制）：长时间的LCP可反映主要内容加载缓慢，建议提升服务器响应速度和优化资源加载顺序。
CLS（累积布局偏移）：高CLS值表明页面布局不稳定，通过固定页面元素位置并减少动态内容插入来优化。
INP（交互延迟）：高INP值表明对用户输入响应不佳，建议优化JavaScript执行速度和DOM操作，以减少不必要的重绘。
通过对每个指标的深度分析，确认并优化最低效的部分，从而确保页面整体性能显著提升。这不仅提升了用户体验，还为应用的长远稳定性奠定了基础。
2. 综合性能与错误优化
页面性能不仅仅依赖于关键性能指标，还与JS错误、资源加载和网络请求密切相关。JS错误可能中断页面逻辑，影响性能表现；加载延迟和请求响应慢则导致页面渲染缓慢，直接影响用户体验。以下是基于其它模块监控数据进行综合性优化的三个步骤：
检查错误和加载瓶颈：结合JavaScript错误、资源加载错误和网络请求的响应时间。通过数据识别出导致页面性能问题的主要瓶颈和异常。
分析性能与错误关联：分析性能数据和错误日志之间的关联，找出影响主要性能指标的错误源。明确每个错误对页面加载速度和用户体验的具体影响。
修复和优化关键问题：优先修复关键JavaScript错误，确保页面加载和用户交互顺畅。优化资源加载策略和请求流程，减少延迟和失败。
通过这些步骤，可以更迅速地识别和解决页面性能问题，减少加载时间和错误发生率，提高用户在不同设备和网络条件下的浏览体验。