如何知道它是否是单页应用程序？

Question

我对网络技术的经验很少，只了解基本的HTML和CSS。我的任务是评估网站并确定有助于改善网站的网络技术。我想弄清楚的第一件事是我选择的是多页应用程序还是单页应用程序。我已经花了几个小时搜索SPA的“典型”代码，但除此以外没有发现任何其他东西：

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Single Page Sliding Layout - Design Shack Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="https://designshack.net/favicon.ico">
<link rel="icon" href="https://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

这是否表明它是SPA？还是我完全偏离了轨道？如果有帮助，请访问该网站：http : //www.mrbottles.com/

谢谢！

/要拔头发的人

Answer 1

SPA-单页应用程序

前体

要摆脱的一件事：有单页应用程序和单页网站。尽管两者可能有相似之处，但还是有区别的。

一个单页网站是一个网站，试图把一个页面上的所有内容，你通常是通过滚动页面才能到其他部分，往往存在一个跟随你，并告诉你你在哪一段粘性导航。同样，单击导航通常是一个锚链接，它将使您停留在页面上，无需重新加载即可跳到该部分（无需使用JavaScript即可完成此操作）。

一个单页应用常见于两种形式，当页面交互或导航发生。一种味道是URL中将包含一个#，#字符后的内容在交互时会更改。这与单击锚点时的“单页网站”相似，除了通常动态加载内容而不是页面滚动到页面的一部分之外。另一个利用称为浏览器历史状态的东西。javascript无需更改窗口即可更改页面的路径。

你为什么在乎？您的任务是什么，您要完成什么？大多数人关心知道页面是否为SPA，因为他们正在确定其产品是否可以与客户的网站一起使用的可行性。最终，您想知道内容是否正在动态加载。如果您的产品修改了页面上的内容，但是内容正在更改，则没有真正的好方法可以在SPA导航/内容更改后再次触发代码。在不知道原因的情况下，很难回答这个问题，但是我将尝试涵盖广泛的领域。

如何检测SPA？

并没有真正说明您是要手动检测还是以编程方式检测SPA。不幸的是，没有标记会被设置，仅仅是因为您发现一个框架并不意味着它被用来使该页面成为SPA。

手动检测SPA

检测SPA的最直接方法是手动检查它。

手动检测SPA的步骤

1. 打开开发人员工具/检查器
2. 重新加载页面或导航到它
3. 注意请求的时间表/瀑布
4. 单击您关注的链接或其他互动
   • 如果时间轴刷新并导致页面重新加载，则它不是SPA
   • 如果时间轴显示您的互动之后的第一个匹配和其他匹配，则您具有SPA。

以编程方式检测SPA

这很复杂，因为SPA可以挂接事件，甚至在您尝试侦听该页面是否为SPA时也可以防止事件冒泡或传播。

这是我提出来检测SPA的一些想法。

当窗口离开时，您可以确定将要重新加载。此时，您可以说该页面不是SPA。如果您进行了交互并希望重新加载发生，但没有，那么您就有SPA了。

window.onbeforeunload = function(event) {
  var text = 'Not a SPA!';
  event.returnValue = text; 
  return text;
};

• 您可以观看历史记录状态。如果发生更改，那么您有SPA
• 您可能会想到一些疯狂的链接/元素单击事件观察器，该观察器会延迟任意时间，并且如果时间过去并且定时事件触发，则可能是SPA，否则页面会消失并且事件永远不会触发。这不是很好，因为您必须等待一些任意时间。如果您不想要足够长的时间并且页面运行缓慢并且仍然无法导航怎么办？