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.
is Pushstate inferior to Hashbangs when it comes to caching pages?
Here is a case where it seems that Pushstate is bad at caching.
Pushsate
Bob navigates to
eg.com/page1
, the full page is downloaded, rendered and cached.Bob clicks a button,
eg.com/json/page2
is downloaded and cached.The browser Processes the JSON and re-renders parts of Bob's page.
Pushstate changes the displayed browser address to
eg.com/page2
.Bob closes the browser, then re-opens it and directly visits
eg.com/pushstate2
. The full page is downloaded, rendered and cached.*
*-Despite the fact that it is already theoretically available in the cache under the guise of eg.com/json/page2
Hashbangs
Alice navigates to
eg.com/#!page1
,eg.com/index.html
is downloaded and cached.eg.com/json/page1
is downloaded and cached.The browser Processes the JSON and renders Alice's page.
Alice clicks a button,
eg.com/json/page2
is downloaded and cached, the displayed browser address is changed toeg.com/#!page2
The browser Processes the JSON and renders Alice's page.
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.
Summary
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?
I think that pushstate is inferior, but if you are building a SPA page correctly the differences should not be significant:
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.
I got the idea from the following question: https://webmasters.stackexchange.com/questions/65694/is-this-way-of-using-pushstate-seo-friendly
来源:https://stackoverflow.com/questions/27356774/is-pushstate-inferior-to-hashbangs-when-it-comes-to-caching