单页应用的真实用户监控

通过 Site24x7 真实用户监控，您可以监控基于 SPA 框架构建的应用性能，并对其进行优化，以提升客户体验。

单页应用是一种 Web 应用，它加载单个 HTML 页面，并在用户与应用交互时动态更新该页面。传统网站与 SPA 之间最显著的区别在于页面刷新次数的减少。单页应用大量使用 AJAX——一种无需完整页面刷新即可与后端服务器通信的方式——来将数据加载到应用中。

在普通 Web 应用中，页面加载完成所需的时间通过监听浏览器中的页面 onload 事件来获取。

而对于单页应用，由于数据是通过 AJAX 调用从服务器动态获取的，因此无法通过页面 onload 事件来获取页面加载完成所需的时间。

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

目前，Site24x7 RUM 具有三个事件监听器，用于捕获所有 SPA 框架中的路由变化。我们监听网络（XHR 调用）、DOM（mutation observer）和历史记录变化（状态变化或 URL 变化）。

使用三个事件监听器识别不同 SPA 框架中的路由变化：

如果存在状态变化（由 pushState、replaceState 或 hash 变化指示）以及较高的网络（XHR 调用）或 DOM 活动（mutation observer），则该事务被视为单页事务。

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

如果在当前路由变化完成之前发生另一次路由变化，则该事务不被视为 SPA 事务。

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

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

结束时间：当在阈值时间限制内没有活动时，通过监听 mutation observer 和网络活动并选择监听器中最高的结束时间来计算结束时间。

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

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

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

对于每次动态页面加载，相应的 URL、其各自的 AJAX 调用、每次 AJAX 调用的响应时间、响应代码和错误（如有）都会被采集。

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

本页内容

什么是 SPA？

监控 SPA 的挑战

采集的指标