4

与 hasbangs 相比，HTML5 Pushstate 有几个优点，事实上，Google 现在鼓励使用 Pushstate。公开讨论的唯一 Pushstate 缺点是非现代浏览器不支持它。然而，对我来说，Pushstate 在缓存方面似乎也是不利的。我可能是错的，因此这个问题。

在缓存页面方面，Pushstate 是否不如 Hashbangs？

这是一个看起来 Pushstate 不擅长缓存的案例。

推萨特

  • Bob 导航到eg.com/page1，整个页面被下载、渲染和缓存。

  • Bob 点击一个按钮，eg.com/json/page2下载并缓存。

  • 浏览器处理 JSON 并重新呈现 Bob 页面的部分内容。

  • Pushstate 将显示的浏览器地址更改为eg.com/page2.

  • Bob 关闭浏览器，然后重新打开并直接访问 eg.com/pushstate2. 整个页面被下载、渲染和缓存。*

*-尽管理论上它已经在缓存中以eg.com/json/page2

哈希帮

  • Alice 导航到eg.com/#!page1，eg.com/index.html被下载并缓存。

  • eg.com/json/page1被下载并缓存。

  • 浏览器处理 JSON 并呈现 Alice 的页面。

  • Alice点击一个按钮，eg.com/json/page2被下载并缓存，显示的浏览器地址变为eg.com/#!page2

  • 浏览器处理 JSON 并呈现 Alice 的页面。

  • Alice 关闭浏览器，然后重新打开，直接访问eg.com/#!page2。与 Pushstate 不同，没有下载任何内容，并且从缓存中加载所有内容。

概括

我有很多类似的案例，问题是这是否确实有效，我可能遗漏了一些导致我得出错误结论的东西。在缓存页面方面，Pushstate 是否不如 Hashbangs？

4

1 回答 1

0

我认为 pushstate 较差，但是如果您正确构建 SPA 页面，则差异应该不会很大：

假设您使用的是最新的框架之一，您的index.html页面应该相对较小，只有几个<script>标签（webpack、systemjs 等框架）。使用这些标签引用的 js 文件确实会正常缓存，因此这两种方法之间的唯一区别是获取index.html每个 pushstate url，而不是在 hashbang 模式下获取一次。

我从以下问题中得到了这个想法： https ://webmasters.stackexchange.com/questions/65694/is-this-way-of-using-pushstate-seo-friendly

于 2018-05-18T09:17:55.753 回答