load、unload和pagehide、pageshow

1. The main applications of load, unload, pagehide, and pageshow

1) The load and unload events monitor the entry and exit of the web page, and are generally used to monitor the first loading, refreshing and closing of the page; 2) The
pageshow and pagehide events are mostly used to monitor the browser's forward and backward movements.

2. The difference between pageshow and load events

1. The difference between pageshow and load

The pageshow event is similar to the load event. The load event is triggered when the page is loaded for the first time. The pageshow event is triggered every time the page is loaded. That is, the load event is not triggered when the page is read from the browser cache .

Under normal circumstances, mobile browsers will store the currently visited page in the cache. The cache stores the page data , DOM and js status. During forward and backward operations, the page content is directly read from the browser cache without Perform page refresh , so the pageshow event can be used when listening for forward and backward operations.

Trigger time : load triggers first, pageshow triggers later.

2. Check whether the cache is read

In order to see whether the page was loaded directly from the server or read from the cache, you can use the persisted property of the Event object to determine. Returns true if the page reads this property from the browser's cache, otherwise returns false

Example:

window.addEventListener('pageshow', function(event) {
   	console.log(event.persisted);
})

3. The difference between pagehide and unload events

1. The difference between pagehide and unload

The pagehide event is similar to the unload event and is triggered when the user leaves the web page (such as clicking a link, refreshing the page, submitting a form, closing the browser, going forward, back, etc.).

Page caching: The page can be cached when pagehide is triggered, but it cannot be cached after the unload event is triggered.

Trigger time : pagehide triggers first, then unload.

2. Check whether the cache is read

// 同pageshow
window.addEventListener('pagehide', function(event) {
   	console.log(event.persisted);
})

4. Pageshow and pagehide application scenarios

When we need to perform an operation when the browser moves forward or backward, we can listen to the pageshow and pagehide events.

5. Browser compatibility of pageshow and pagehide

6. Summary 

the difference:

1. load is triggered when the page is loaded for the first time. It will not be triggered when using the cache to move forward or backward.
2. pageshow will be triggered every time the page is displayed, and cache will be triggered when going forward or backward.
3. pageshow contains load
4. Trigger timing: load triggers first, pageshow triggers later. pagehide is triggered first, and then unload.