Differences between browser refresh

We have been using a browser to refresh. In fact, there are also some primary-level questions about refresh. There are three common refresh methods:
1. url + enter or a label hyperlink click
2. F5 refresh
3. Press Ctrl + F5 to refresh
The three refresh levels are upgraded from low to high. Let's take a simple example.

Condition: This URL path has been recently accessed by the browser and does not exceed the cache time. For example, you visited this URL path just one minute ago.

1. url + enter or a label hyperlink click
First

 
Wow! A picture of my dream Mitsubishi Evo X has appeared.
We found that using firebug to view network requests is gray. Later, this request comes from the cache. In fact, this request is sent to the backend node. js end, but the cached data that the browser directly reads. Here you only need to go to response. setheader ('cache-control', 'public, Max-age = 000000'); // cache for an hour

2. F5 refresh
Or the URL address, but this time I gently pressed F5 ~

 
Evo X is so handsome, haha.
Let's take a closer look at the response status code to 304. Here, the browser requests the backend node. JS server, and the Response Header does not have the "Content-Length" attribute, it indicates that the response body is empty, and it carries two important parameters:
1. If-modified-since: the browser Response Header last-modified
2. If-None-Match: The corresponding browser Response Header etag
When node. after the JS server receives such an HTTP request, it determines whether to update the Client Cache. It depends on your node to determine whether the cache is updated using last-modified or etag. how is the JS server code written. Rrestjs gives priority to etag. How to obtain the etag value depends on how the Web server is obtained. It can be the MD5 value of the modification time + file size or other factors.

If the node. js server determines whether the last-modified or etag is used, the requested resource is still cached, and then returns the 304 status code and the latest last-modified and etag.
After the browser receives the 304 status code, it considers that the resource has not been modified, so it gets the cache response to the user.

3. Press Ctrl + F5 to refresh

Force refresh. Let's take a look at it first:

Evo X is so domineering! It has been discontinued!
We can take a closer look at the request header. If there are no 2 Cache headers in 2nd cases, it is the same as the first visit to this URL address, so node. the JS server directly returns the image to the browser, so the 151.1kb here is the size of the image and does not use any browser cache.

Concluding remarks:
Evo X...
We believe you have fully understood the three refresh situations. 90% of users use the first or second type, so the cache technology is crucial. For some infrequently modified pages, you can use cache-control to stop sending requests, saving server resources and responding quickly. For some static images, you must add the last-modified or etag. Because these resources are generally large in size, caching can improve the efficiency.
Of course, you can do this for both static files, JSON data, and HTML data, as long as you follow the HTTP protocol.

Differences between browser refresh