静态资源监控

概述

静态资源（如JS、CSS、图片）加载缓慢或失败会显著影响页面性能和用户体验。在现代Web/H5应用中，这些资源至关重要，确保其有效加载是提升用户交互质量的关键。EMAS的静态资源监控专注于捕获和分析资源的慢加载和加载错误，通过详细日志帮助开发者识别性能瓶颈，找到并解决问题。

在实际使用场景中，静态资源监控提供了以下主要功能：

• 跟踪与问题定位：开发者可以利用该功能，实时跟踪页面资源加载的成功率，并快速定位加载失败的原因。控制台提供详细的错误日志以便于问题排查和修复，确保所有资源正常加载。

• 性能影响分析：允许开发者深入了解资源的慢加载和加载错误如何影响用户体验，进而制定有效的优化策略。

• 设备和浏览器兼容性：运维团队可借助此工具，深入追踪并解决用户在特定设备和浏览器上遇到的资源加载问题，保证跨平台一致的用户体验。

这种全面的监控不仅改善了不同设备和网络条件下的用户体验，还为资源管理和优化提供了重要的数据支持。

准备工作

• 使用静态资源监控功能之前，需要接入EMAS APM SDK，参见SDK接入。

• 已打开静态资源模块上报开关，参见上报配置。

• 配置符合业务特性的静态资源慢加载阈值基线，参见阈值配置。

功能说明

加载耗时

观测筛选条件下所有静态资源加载的整体耗时情况，通过耗时分布和分位图了解整体耗时区间。其中分位图如何观测，参见分位值说明。

加载趋势

静态资源加载趋势展示筛选条件下，加载错误和慢加载两种情况的趋势图，查看问题的波动和影响面。

• 指标定义参见指标定义-静态资源指标。

加载分布

分布分析支持通过多维统计（如浏览器版本、操作系统版本、机型等）来观测静态资源加载错误和慢加载两种情况发生的分布情况以及定位问题。

• 默认以浏览器、系统、设备型号、城市四个维度展示加载问题的分布情况，支持点击“分布维度”按钮下拉勾选维度替换默认维度，最少选择1个，最多选择4个。

• 点击可以切换视图：分布排行、列表排行。

资源列表

展示了筛选条件下资源路径维度的指标大盘，包括路径、加载数、用户数、错误数、错误影响用户数、慢加载率、慢加载影响用户率。

• 排序方式：指标支持排序，默认按照加载数从高到低排序。

• 查看详情：点击资源路径，进入到对应资源路径的详情分析页。

问题详情

静态资源详情分析支持针对某个资源路径做详细下钻分析，提供该路径基本信息概况、加载过程分析、趋势分析、分布分析，并提供每一次客户端上报的详细信息。

基本信息

• 指标定义参见指标定义-静态资源指标。

加载分析

提供开发运维侧关注的资源加载过程中各个阶段的耗时变化趋势。

• 操作：支持切换分位值，包括50分位、75分位、90分位和平均值。

详细信息

展示同一资源路径中的所有客户端上报实例，包括错误加载和慢加载问题。左侧按照问题发生的时间顺序排列，点击后右侧展示此条问题信息的基本信息和详细上报字段。

基础信息

基础信息显示了每条静态资源的基础设备信息，参见基础信息。

详细信息

详细信息展示了每条静态资源的具体信息。

补充信息

如果有成本控制需求，可以在上报配置>静态资源中灵活配置采样规则和采样率。