Express framework, set the browser to read static files from the cache, only js reads from the cache, why did css and some pictures not read from the cache?

  node.js, question

Method of setting cache

app.use(express.static(path.join(__dirname, 'public'),{maxAge:1000*60*60}));

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.

  • url loadAccess

  • Command plus rOr ..F5Refresh

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.

Useurl 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 requestInitiatorDifferent, what you should visit isindex.htmlOk, then load some style css and pictures, these are 304 no problem. But after your js request, I saw your triggers were allLAB.min.js, not directly in yourindex.htmlJs introduced in, this is your special situation, if you put these scripts directly inindex.htmlvia<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.