javascript - 如何知道一个网站是不是单页应用？

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 - 单页应用

前体

需要避免的一件事是:单页应用程序 和单页网站。尽管它们有相似之处，但还是有区别的。

单页网站是一个试图将所有内容放在一个页面上的网站，您通常滚动页面以到达其他部分，并且通常会有一个粘性导航跟随您并告诉你你在哪个部分。此外，点击导航通常是一个 anchor 链接，它会让您停留在页面上并跳转到该部分而无需重新加载(这可以在没有 javascript 的情况下完成)。

当发生页面交互或导航时，单页面应用程序 通常以两种形式出现。一种风格是 URL 中会有一个 #，# 字符后面的内容会随着交互而改变。这类似于单击 anchor 时的单页网站，不同之处在于内容通常是动态加载的，而不是页面滚动到页面的一部分。另一个利用称为浏览器历史状态的东西。 javascript 能够在不重新加载窗口的情况下更改页面的路径。

你为什么关心？你的使命是什么，你想要完成什么？大多数人都关心了解页面是否为 SPA，因为他们正在确定其产品是否适用于客户网站的可行性。最后，您想知道内容是否正在动态加载。如果您的产品修改了页面上的内容，但内容正在更改，则没有真正好的方法可以在 SPA 导航/内容更改时再次触发您的代码。不知道原因，很难回答这个问题，但我会尽量涵盖广泛的范围。

如何检测 SPA？

并没有真正说明您是要尝试手动检测还是以编程方式检测 SPA。不幸的是，没有设置任何标志，仅仅因为您找到一个框架并不意味着它被用来使页面成为 SPA。

手动检测SPA

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

手动检测SPA的步骤

1. 打开开发者工具/检查器
2. 重新加载页面或导航到它
3. 注意请求的时间线/瀑布
4. 点击您关注的链接或其他互动
   • 如果时间轴刷新并导致页面重新加载，则它不是 SPA
   • 如果时间轴显示第一次点击和互动后的其他点击，那么您就有了 SPA。

以编程方式检测 SPA

这可能会很复杂，因为 SPA 可以 Hook 事件，甚至可以防止事件冒泡或传播(如果您尝试通过监听来确定页面是否为 SPA)。

以下是我提出的一些检测 SPA 的想法。

---

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

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

---

• 您可以 Hook /代理历史状态 API 以了解它们是否被调用。
• 您可以查看历史状态。如果发生变化，那么您就有了 SPA
• 您可以想出一些疯狂的链接/元素点击事件观察器，它会延迟任意时间，如果时间过去并且触发了定时事件，那么它可能是一个 SPA，否则页面导航离开并且事件永远不会完成触发。这不是很好，因为您必须等待任意时间；如果您不想要足够长的时间并且页面运行缓慢并且仍然导航怎么办？