单页应用程序的真实用户监控

使用Site24x7 真实用户监控，您可以监控基于 SPA 框架构建的应用程序的性能并对其进行优化以获得更好的客户体验。

什么是单页应用程序 (SPA)？

单页应用程序是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。传统网站和 SPA 之间最显着的区别是页面刷新量减少。单页应用程序大量使用 AJAX（一种无需进行全页刷新即可与后端服务器通信的方式）以将数据加载到应用程序中。

监控单页应用程序的挑战：

在常规的 Web 应用程序中，页面加载完成所用的时间是通过在浏览器中侦听页面 onload 事件来获得的。

在单页应用程序的情况下，页面加载完成所用的时间无法通过页面加载事件获得，因为数据是使用 AJAX 调用从服务器动态获取的。

因此，对于每个 SPA 框架，页面加载指标是通过侦听特定于框架的特定事件来计算的。

目前，Site24x7 RUM 具有三个事件侦听器，以捕获所有 SPA 框架中的路由更改。我们监听网络（XHR 调用）、DOM（突变观察者）和历史变化（状态变化或 URL 变化）。

使用三个事件侦听器识别不同 SPA 框架中的路由更改：

如果存在状态更改（由 pushState、replaceState 或哈希更改指示）和高网络（XHR 调用）或 DOM 活动（突变观察者），则事务被视为单页事务。

SPA 事务由重要的网络和 DOM 活动（即，如果多个请求几乎同时开始）和状态变化来识别，而不是通过检测路由变化来收集网络和 DOM 性能指标。Site24x7 脚本不再需要包含在各种框架的路由器中。这也有助于依靠浏览器历史 API 收集 SPA 事务的适当开始和结束时间。

如果在未完成当前路由更改的情况下发生路由更改，则事务不被视为 SPA 事务。

SPA 框架中路由变化的加载时间：

开始时间： 当 URL 发生变化时，当有额外的网络活动时，或者当 DOM 发生变化时，开始时间是根据三个侦听器（网络、DOM 或历史记录）发送的最低开始时间来设置的。

结束时间：当阈值时间限制没有活动时，通过监听变异观察者和网络活动并从监听者中选择最高结束时间来计算结束时间。

总加载时间：开始时间 - 结束时间。

网络时间：网络性能，通常称为网络时间，是使用在开始和结束时间通过浏览器的性能对象调用的资源（XHR 调用）计算得出的。

文档处理时间：总加载时间 - 网络时间。

捕获的指标：

对于每个动态页面加载，都会捕获相应的 URL、相应的 AJAX 调用、每个 AJAX 调用的响应时间、响应代码和错误（如果有）。

查看以下安装说明，为单页应用程序启用 RUM：