I. Basic concepts of Bfcache
The modern browser enables the caching mechanism, called "Bfcache" (Back-forward cache, round-trip cache), to make the page navigation very fast when the forward/backward operation is based on history. The cache status will not be deleted until the user closes the browser.
From the MDN, the Firefox browser, which supports the Bfcache feature , caches all pages in memory, including their JavaScript status, for a simple browser session. The cache status will not be deleted until the user closes the browser. Bfcache is a browser optimizer, but the HTML standard does not specify how the browser caches, so different browsers have different caching strategies than Firefox.
The MDN also indicates that some Firefox does not cache the page, as follows:
Ii. different strategies in different browsers
1. Test design
There are two test pages, the code is as follows.
<HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Page 1</title></Head><Body> <imgsrc= "//static.symind.top/images/fruit.png"> <P>Page 1.</P> <ahref= "page2.html">Go to page 2.</a> <Script> varP=Document.createelement ('P'); Document.body.appendChild (P); varI= 0; var Time=SetInterval (function() {P.innertext=I++; }, +); Window.onload= function() {alert ('onload ...'); } </Script></Body></HTML>
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Page 2</title></Head><Body> <P>Page 2.</P> <ahref= "Javascript:goback ()">Back off</a> <Script> functionGoBack () {window.history.back (); } </Script></Body></HTML>
2. Test results
| Browser | Version | Whether to cache DOM | Whether to cache static resources in the page | Whether to cache JS execution state | Whether to trigger the Load event |
| Desktop Chrome | 60.0.3112.101 (official version) (64-bit) | Whether | Is | Whether | Is |
| Desktop Firfox | 58.0.2 (64-bit) | Is | Is | Is | Whether |
| QQ Browser | 8.2.0.3950 (Android version) | Is | Is | Is | Whether |
Note: The cache JS execution status indicates that JS will stop executing when it leaves the current page, and will continue to execute when returned. Many mobile browsers today do not use the Bfcache feature to improve page navigation speed , but instead encapsulate each page in a form similar to a WebView, such as Xiaomi's mobile browser. In this way the browser, even after leaving the page, JS will continue to execute, and will not trigger the Pageshow and Pagehide events described below.
remark: when a "round trip cache" is triggered by Desktop Chrome, the status code for the HTTP request is visible in the developer tool (from disk cache), such as.
Iii. New Events
The browser also provides some new events pageshow and Pagehide, although the Load event does not cause any problems because the state of the entire page is saved in memory, but in order to more visually illustrate the behavior of Bfcache.
1. Pageshow Events
This event is similar to the Load event, but it is triggered every time the page loads (the Load event will not be triggered when the page trigger Bfcache attribute is loaded with the cache). When the page first loads, the Pageshow event is triggered immediately after the load event. Pageshow uses a Boolean type property named persisted, which has a value of false at initialization loading. When the page is not initialized for loading, its value is true (in other words, its value is true when the page is cached).
2. Pagehide Events
If you want to define some behavior when the user navigates away from the page, but you do not want to use the Unload event (which causes the page to not be cached), you can use the new Pagehide event. As with the Pageshow event, the Pagehide event also uses a Boolean type property named persisted. If the page is not cached, the value of this property is false, and the value of this property is true if the page is cached. When the value of this property is false, the Unload event handler is processed and, conversely, the Pagehide event is triggered immediately after the Unload event is triggered.
Iv. actual Business related
1. Business Background Brief
The first page provides a list of services based on the city, assuming Catepage. Clicking on one of these services will jump to the list of detailed services under the Service category, assuming Servicepage. Where the city can be switched in Servicepage, the business requires that the city information of the page be refreshed when the servicepage switch the city back to Catepage. As shown in.
2. Solution
The solution is simple, when the page is in non-initialized loading, the relevant to update the city information operations.
For browsers that use Bfcache, the Pageshow event can be added and combined with the persisted property in the event to handle city information in the case of non-initialized loading.
And for Xiaomi browser this way, each page is encapsulated into a WebView-like form of the phone, using the Visibilitychange event. This event can be used in conjunction with the Load event to determine whether the load is initialized, with the Document.hidden property being able to determine the page display state.
Reference articles
1. Using Firefox 1.5 caching:https://developer.mozilla.org/en-us/firefox/releases/1.5/using_firefox_1.5_caching
2. Browser forward/Rewind cache (BF cache): http://harttle.land/2017/03/12/backward-forward-cache.html
3. Can I use:https://caniuse.com/#search =pageshow
Bfcache features of the browser
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
