应用性能监控全链路版
应用性能监控全链路版
文档指南
请输入
- 文档首页
应用性能监控全链路版用户指南客户端监控WebPro 端监控SDK 接入SPA 场景接入
复制全文
下载 pdfSPA 场景接入
文档反馈
问问助手SPA（single-page application）应用通过动态更新页面来实现更快速、更流畅的用户体验。与传统的多页面应用程序不同，SPA应用程序不需要在每次用户导航时重新加载整个页面，而是动态加载和更新页面内容。这意味着用户可以更快地交互和导航，而无需在每个页面之间等待加载时间。SPA通常使用前端框架来管理应用程序状态和页面路由。例如Angular、React或Vue。
接入指导
在监控SPA应用程序时，您需要额外关注以下方面：
- 页面路由监控：SPA应用程序的核心是通过路由管理不同的页面和状态，需要监控页面路由的变化以便了解用户导航和使用模式。
- 性能监控：SPA应用程序的核心是动态加载和更新页面内容，因此需要监控路由切换下的性能，以便识别性能问题并进行优化。
页面路由监控
配置pageview plugin的routeMode即可实现SPA路由的监听和上报。
配置示例：
import client from '@apmplus/web'
client('init', {
...
plugins: {
pageview: {
routeMode: 'hash', // hash or history
}
},
...
})
性能监控
页面性能分为首屏性能和非首屏性能。
- 首屏性能：页面首次加载的时候的性能，跟普通应用一样，可以通过timing、FP、FCP、FMP、TTI、LCP等指标来衡量。
- 非首屏性能：路由切换的性能。SPA性能插件可以自动计算并上报SPA_LOAD指标来衡量路由切换性能。
接入
版本依赖
@apmplus/web >= 2.0.1 && @apmplus/integrations >= 2.1.0
自动计算并上报SPA_LOAD
import client from '@apmplus/web'
import { SPALoadPlugin } from '@apmplus/integrations'
client('init', {
...
plugins: {
pageview: {
routeMode: 'hash' // 默认是history模式，所以如果是history路由可以无需配置
}
},
integrations: [SPALoadPlugin()], // 手动引入SPALoadPlugin
})
说明
SPALoadPlugin主要是通过监听路由的变化，观察路由切换后的一系列关于dom变更、资源加载、请求发送等变更事件来寻找一个页面达到稳定态的时间，从而上报SPA_LOAD指标。
手动上报SPA_LOAD
// 方案一： 路由切换前调用performanceInit，渲染后调用performanceSend
// 路由切换前
client('performanceInit')
// SPA 渲染完成后， 调用此方法sdk会帮助计算时间差，然后上报spa_load 性能指标
client('performanceSend')
// 方案二： 上报自定义性能指标：手动计算好渲染时间【单位ms】，通过性能的单指标上报协议上报
client('sendCustomPerfMetric', { name: 'spa_load', value: {{渲染时间}} })
手动上报SPA_LOAD有两种方式：
- 通过performanceInit&&performanceSend打点
- 使用performanceIni&&performanceSend注意事项：
- 需要从产品层面，确定哪些URL对应页面的概念
- 例如，URL的改变对应的是页面中两个tab切换，产品层面认为两个tab属于同一页面，那么此时URL的改变不需要调用performanceInit&&performanceSend。
- 页面加载完成的时间点可以选择框架层的渲染完成的节点
- 例如，URL变化后，页面请求a、b两个接口。a对应主要内容的数据，b对应次要内容的数据，那么可以在a请求的数据渲染完成后，作为页面渲染完成时间点，调用performanceSend触发指标计算。
- 手动上报自定义性能指标
应用与消费
- 注册性能指标。
-
- 根据指标的具体情况为指标指定基准线，可用于衡量指标的优劣。如何注册性能指标，请参见 性能指标管理 。
- 在控制台左上角选择全部功能 > 站点性能总览。
- 单击指标总览页签，查看SPA_LOAD指标的消费情况。
-
- 在控制台左上角选择全部功能 > 数据探索。
- 单击Views页签查看瀑布图。
-
- 在瀑布图中，您可以查看SPA_LOAD指标前的一系列资源请求和业务请求的耗时情况，帮助找到路由切换性能差的原因。
最近更新时间：2026.02.10 19:56:24
这个页面对您有帮助吗？
有用
有用
无用
无用