The introduction
Turning to HTTP caching, you probably know the difference between mandatory caching and negotiated caching. There are many articles on whether or not to use caches and what kind of caches to use in general. However, different user behaviors can break the norms, so this article will explore the browser cache performance under different behaviors. That is, exactly what the F5 refreshes
Browser cache
When it comes to browser caching, there are a few keywords that come to mind: cache-Control, Expires, ETag, if-match, if-none-match, last-Modified, etc. The following two cache methods are used to access a resource again based on the functions of different ids
Strong cache
Once a resource hits a strong cache, the browser does not send a request to the server, but reads directly from the cache. In Chrome, 200 OK (from disk cache) or 200 OK (from memory cache) is displayed.
Negotiate the cache
This is the common 304 status code.
After the cache expires, it continues to request the resource. For modern browsers, there are two approaches:
- An if-none-match field is automatically added to the request header based on the ETag_value in the last response. After receiving the request, the server compares the if-none-match field with the ETag value of the resource. If they are the same, the server matches the negotiation cache and returns a 304 response.
- An if-modified-since field is automatically added to the request header based on last-modified_value in the Last response. After receiving the request, the server compares the value of the if-Modified-since field with the last-modified value of the resource. If they are the same, the negotiated cache is matched and a 304 response is returned.
ETag was added to HTTP /1.1 to address some of the problems with last-Modified. For example, the server and client time is out of sync, so last-Modified has a higher priority than last-Modified.
Therefore, in most cases, resources are cached in the above order: strong cache => negotiate cache => retrieve. However, caching policies are related to the user’s actions, and refreshing is unavoidable. There are many ways to refresh. Refresh button, command+ R, Shift + Command + R, etc. What’s the difference between them? Take xxdy.tech/ as an example.
Visit again (address bar enter)
You can see that resources fall into the following categories: Let’s look at the intuitive request first
- Uncached, maxage=0 resource
Such resources are always reloaded from the server when requested
- The status is 200, but is followed by the from Memory cache or Disk cache identifier. The cached font is gray, so it’s easy to see the difference between the 200 above.
The response of the CSS resource comes from the disk cache.
The js response, that is, the cache from memory
This is a strong cache, reading directly from the local cache.
Because cache-control :max-age=600 does not expire when refreshed, it is retrieved from the local Cache.
The reason we’re taking these two images here is because they’re cached in different places. Summary (please find the detailed information)
-
From memory cache: The memory cache has two features, namely, fast read and timely read. The memory cache directly stores the compiled and parsed files into the memory of the process, occupying certain memory resources of the process, and facilitating the fast read and timely read in the next run. Once the process is shut down, its memory is emptied.
-
From disk cache: The cache is directly written to the disk file. To read the cache, I/O operations are performed on the disk file stored in the cache and the cache content is parsed again. The reading of the cache is complex and slower than that of the memory cache.
In most cases, the browser will save js and images directly to the memory cache after they are parsed. Therefore, when refreshing the page, you only need to read from the memory cache directly. CSS files are stored in disk files, so every time the page is rendered, it needs to be read from disk cache.
- Negotiate the cache
Status is 304, which means that the file is not changed after being compared with the server and the original cache resources are returned.
Cache-control: max-age=0 in the request header, so every request is returned to the server. The server is not updated, and the eTAG is the same, so the Cache resource is returned.
conclusion
If the address bar is entered, we are accessing normally, following the browser’s cache policy.
F5 Refresh (MAC = Command + R)
F5 refresh, will there be any difference, first intuitive comparison.
There seems to be no difference, specific to the file is also the same state as the direct carriage return.
conclusion
So what exactly is the refresh of F5? You can see that F5 can be called soft refresh and it’s just a reload page. That is, the same carriage return address is still involved under normal caching rules.
Force refresh (Command + Shift + R)
The 304 and from cache items listed above are reloads.
Cache-control: no-cache: cache-control: no-cache: cache-control: no-cache: cache-control: no-cache: cache-control: no-cache: cache-control: no-cache This means that the server needs to evaluate whether or not the cache is valid every time, and should not be interpreted as simply not using the cache. Also notice that there is no if-none-match attribute in the request that matches the ETag in response, so it will be reloaded.
In conclusion
In this case, the request is called hard refresh. A cache-control :no-cache flag is added to the request to indicate that the Cache Control limit is exceeded. The server needs to re-evaluate the validity, that is, the Cache is not strong. In addition, if-none-match is removed from the request header, so negotiation caching cannot be used. Pull in new resources
tip
There is a hard reload here, and some files are still cached. I see some small images here, but I haven’t found a reasonable explanation. I need to study the details and fill them in later
Deactivate the cache and refresh
For those files mentioned above, you need to clear the cache and hard reload below.
After that, you don’t use the cache at all.
The rules
The effect of the above mentioned refresh methods may vary from browser to browser. Found a relatively perfect you can refer to.
conclusion
At this point, some of the personal closure of the refresh and cache is over, and I hope that it can be helpful to those in need, and also hope that there is a great god to advise. Please click more personal blog In addition to thank the following reference articles: stackoverflow.com/questions/8… Stackoverflow.com/questions/3…