SPA依赖于HTML 5 History API。使用mPulse的SPA设置，我们可以跟踪软导航。软导航是指在浏览器上更改URL但实际上并未重新加载整个页面。我试图了解单页应用程序的工作原理，并通过CSS-Tricks使用HTML5 History API。在本文中，解释了HTML5 History API的概念。

通常，当您从一个URL导航到另一个URL时，浏览器会重新加载整个页面。 但是，您可能希望只更改页面的某些部分。这可以通过使用AJAX请求来完成。 但是，如果只使用AJAX，则页面的URL会保持不变。因此，如果需要共享此特定视图，则无法执行此操作。这就是History API的用武之地。

了解 History API

History API能够操纵URL而不强制浏览器加载整个页面。它提供了两个主要功能：history.replaceState和history.pushState。

history.replaceState：这会更改URL，也会更改浏览器中的导航流。因此，用户点击后退按钮将不会返回到此SPA页面的原始视图，而是被重定向到它们来自的页面。history.pushState：此方法将替换URL并记录当前视图信息。因此，用户点击后退按钮将返回到SPA页面的原始视图。

SPA对性能测试提出了挑战。在常规网页上，浏览器基于NavTiming API收集大量与性能相关的信息。但是，当SPA导航发生时，页面不会真正重新加载，这导致浏览器不会重建DOM。因此，它无法报告与导航相关的性能。

要解决这个问题，像mPulse这样的Real User Monitoring（RUM）解决方案依赖于历史API。通过观察对此插件的更改，它能够检测导航，然后测量时序信息。

测试SPA页面

使用CSS-Tricks网站上的Ghostbusters SPA代码创建了一个虚拟网站。 在他们的例子中，有以下内容：

主页：https：//css-tricks.com/examples/State/SPA导航：

实际上，当用户首次登陆主页时，它具有常规的导航布局。 这在mPulse中称为SPA Hard。本网站子部分中的所有其他导航称为SPA软导航。如果用户直接使用URL，则会导致浏览器正常加载页面并将其作为SPA硬导航事件进行检测。

检测结果

当我设置测试时，基于8个视图，中间页面加载时间显示为15秒。 这包括SPA（SPA-Soft）和非SPA（SPA-Hard）定时信息。

当我看一下硬导航的性能时，4个视图的页面加载时间现在跳到17.4秒。

如果我现在只过滤软导航，4个视图的页面加载时间下降到129毫秒。

如果我们从未使用过软导航，则可能会错误地将网站性能误解为超过17秒。实际上，这个时间包含了加载SPA框架的时间。如果没有软导航调用的信息，您可能会误解网站上的访问量。在这种情况下，用户可以加载主页并访问其他四个子页面。如果没有SPA跟踪，RUM分析可能会向用户显示只访问过一个页面。

总结

如果您拥有基于SPA的网站，可能会丢失关键性能信息或数据。如果您已将页面设计为使用SPA框架，请启用SPA跟踪。混合SPA和非SPA导航可能会产生没有作用的信息。另一方面，缺少SPA导航会降低参与度和转化率指标。 因此，需要仔细检测其测量结果以获得整体图像。