Method of setting cache
After the second refresh
Wow! What a great question! I also studied.
In fact, the main reason is that the browser handles the two modes of re-access differently.
Command plus rOr ..
First of all, simply understand the difference between the two state codes.
200 OK (from cache) means that the browser did not confirm with the server and directly used the Browser Caching.
304 Not Modified is a cache that the browser and the server have confirmed once more the validity of the cache before using it.
url loadWhen visiting the same page again
The browser will not set Cache-Control:max-age=0 when obtaining resources, so the set max-age will be preferentially obtained from the local cache if it is still valid.
When accessing the same page again using refresh mode
When the Request is initiated, the browser sets cache-Control:max-age=0 for header inside. Once max-age is 0, data will not be obtained from the local cache, so an http request will be initiated, and if-modified-sine or If-None-Match from header inside will be compared with Last-Modified and Etag respectively, so as to return 304 or re-access resources and re-cache.
After verification, the above statement is correct! ! ! ! ! !
In response to your question, after the first visit, you cached the static file, so it was cached. When you refresh for the second time, it should be 304. Why are there 304 and 200?
Because of your request
InitiatorDifferent, what you should visit is
index.htmlOk, then load some style css and pictures, these are 304 no problem. But after your js request, I saw your triggers were all
LAB.min.js, not directly in your
index.htmlJs introduced in, this is your special situation, if you put these scripts directly in
<script>The tag introduction will also see that it was requested by 304.
If I am wrong, correct me! ! ! !
I hope reading the following articles will be helpful to you.