Pushstate 在缓存方面是不是不如 Hashbangs？

Posted 2023-02-22

【中文标题】Pushstate 在缓存方面是不是不如 Hashbangs？

【英文标题】：is Pushstate inferior to Hashbangs when it comes to caching?Pushstate 在缓存方面是否不如 Hashbangs？

【发布时间】：2015-02-06 00:52:35

【问题描述】：

与 hasbangs 相比，html5 Pushstate 有几个优点，事实上，Google 现在是encouraging the use of 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为幌子在缓存中可用

Hashbang

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

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

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

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

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

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

总结

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

【参考方案1】：

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

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

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