在缓存方面，Pushstate是否优于Hashbangs？ [英] is Pushstate inferior to Hashbangs when it comes to caching?
问题描述
与hasbangs相比，HTML5 Pushstate有几个优点，事实上，Google现在已经鼓励使用Pushstate 。公开讨论的唯一Pushstate缺点是非现代浏览器不支持它。但是，对我来说，似乎Pushstate在缓存方面也是不利的。我可能错了，因此这个问题。
There are several advantages to the HTML5 Pushstate in comparison to hasbangs, in fact, Google is now encouraging the use of Pushstate. The only Pushstate disadvantage being publicly discussed is the fact that non-modern browsers do not support it. However, to me it seems that Pushstate is also disadvantageous when it comes to caching. I might be wrong, hence this question.
在缓存页面方面，Pushstate是否优于Hashbangs？
这是一个似乎Pushstate在缓存方面不好的情况。
Here is a case where it seems that Pushstate is bad at caching.
Pushsate
-
Bob导航到
eg.com/page1，整个页面被下载，渲染并缓存。
Bob navigates to
eg.com/page1, the full page is downloaded, rendered and cached.
Bob点击一个按钮， eg.com/json/page2 被下载并缓存。
Bob clicks a button, eg.com/json/page2 is downloaded and cached.
浏览器处理JSON并重新呈现Bob页面的部分内容。
The browser Processes the JSON and re-renders parts of Bob's page.
Pushstate将显示的浏览器地址更改为 eg.com/page2 。
Pushstate changes the displayed browser address to eg.com/page2.
Bob关闭浏览器，然后重新打开它并直接访问
eg.com/pushstate2 。整个页面被下载，渲染和缓存。*
Bob closes the browser, then re-opens it and directly visits
eg.com/pushstate2. The full page is downloaded, rendered and cached.*
* - 尽管它已经是理论上可以在的幌子下在缓存中获得，例如：/ json / page2
*-Despite the fact that it is already theoretically available in the cache under the guise of eg.com/json/page2
Hashbangs
-
Alice导航到
eg.com /＃！page1，eg.com/index.html已下载并缓存。
eg.com/json/page1 已下载并缓存。
浏览器处理JSON并呈现Alice的页面。
The browser Processes the JSON and renders Alice's page.
Alice点击一个按钮， eg.com/json/page2 被下载并缓存，显示的浏览器地址更改为 eg.com /＃！page2
Alice clicks a button, eg.com/json/page2 is downloaded and cached, the displayed browser address is changed to eg.com/#!page2
浏览器处理JSON和呈现Alice的页面。
The browser Processes the JSON and renders Alice's page.
Alice关闭浏览器，然后重新打开它并直接访问 eg.com /＃！page2 。与强制状态不同， NOTHING已下载且所有内容均已从缓存加载。
Alice closes the browser, then re-opens it and directly visits eg.com/#!page2. NOTHING is downloaded and everything is loaded from cache, unlike Pushstate.
摘要
我有很多类似的案例，问题是这是否确实有效，我可能会遗漏一些导致我错误的事情结论。在缓存页面时，Pushstate是不是Hashbangs？
I have numerous similar cases in mind, The question is whether or not this is indeed valid, I may be missing something which is leading me to wrong conclusions. is Pushstate inferior to Hashbangs when it comes to caching pages?
推荐答案
我认为pushstate是劣等的，但如果你正在构建一个正确的SPA页面差异不应该很大：
I think that pushstate is inferior, but if you are building a SPA page correctly the differences should not be significant:
假设您使用的是最新的框架之一，那么 index.html 页面应该相对较小，只有一些< script> 标签（webpack，systemjs等框架）。
使用这些标记引用的js文件会正常缓存，因此两种方法之间的唯一区别是为每个pushstate url获取 index.html 而不是在hashbang模式下获取一次。
Assuming that you are using one of the latest frameworks, your index.html page should be relatively small with a few <script> tags (frameworks like webpack, systemjs etc).
The js files that are referenced with these tags do get cached normally so the only difference between the two methods is fetching index.html for every pushstate url as opposed to fetching it once in hashbang mode.
我从以下问题得到了这个想法：
https://webmasters.stackexchange.com/questions/65694/is-this-way-of-using-pushstate-seo-friendly
I got the idea from the following question: https://webmasters.stackexchange.com/questions/65694/is-this-way-of-using-pushstate-seo-friendly
这篇关于在缓存方面，Pushstate是否优于Hashbangs？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
