You need to enable JavaScript to run this app.
导航
SPA场景接入
最近更新时间:2023.03.31 15:28:04首次发布时间:2023.03.22 17:11:27

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触发指标计算。
  • 手动上报自定义性能指标

应用与消费

  1. 注册性能指标。
    图片
    根据指标的具体情况为指标指定基准线,可用于衡量指标的优劣。如何注册性能指标,请参见 性能指标管理
  2. 在控制台左上角选择全部功能 > 站点性能总览
  3. 单击指标总览页签,查看SPA_LOAD指标的消费情况。
    图片
  4. 在控制台左上角选择全部功能 > 数据探索
  5. 单击Views页签查看瀑布图。
    图片
    在瀑布图中,您可以查看SPA_LOAD指标前的一系列资源请求和业务请求的耗时情况,帮助找到路由切换性能差的原因。