Introduction
That's review the HTTP cache for the browser.
1. If you don't use cached files on the browser
Option 1. Progma: no-cache (HTTP 1.0 request header)
Progma: no-cache
- Equals Cache-Control:no-cache
Option 2. Cache-Control: no-store (HTTP 1.1 request header)
Cache-Control: no-store
- The browser will never use the cache.
- The browser will always ask the server for files even though there are no new files. The server will always sends the entire file (status code: 200)
Option 3. Cache-Control: no-cache (HTTP 1.1 request header)
Cache-Control: no-cache
- The browser always checks the web cache.
- The browser will always ask the server for new files. The server will send the new file (status code: 200) or not (304)
2. Force to use HTTP cache (max-age > Expires)
(I) Cache according to the freshness
Option 1. Expires (HTTP response header)
Date: {date}
Expires: {date}
- The browser will cache the file until the expires date. The expires date is the server's time and the browser will check it.
- It's possible that it's different between the server's time and the browser's time
Option 2. Cache-Control: max-age (HTTP response header)
Cache-Control: max-age (seconds)
- The browser will cache the file and expires on the specific date
Example
- The browser will response 200 with from memory cache if the file isn't expired
(II) Cache according to the latest edited date
Set the HTTP request header
- Ask the server to check if the file’s content is the same or not. (hash)
If-Modified-Since: {date}
Set the HTTP response header
Last-Modified: {date}
- The server will sends new file (status code: 200) or not (304)
(III) Get the new file if the content has any modifications
Set the HTTP request header
- The browser will retrieve the new file after the file was expired
If-None-Match: {hash value}
Set the HTTP response header
Etag: {hash value}
- The server will sends new file (status code: 200) or not (304)
Example
3. The recommended cache strategy
- For the HTML file, the browser will always ask the server for the file. The HTML file will update if the CSS, or the JS file was changed.
- For the CSS file with the hashed name, the browser holds the cache for a long time but still can be updated immediately.
- For the JS file with the hashed name, the browser holds the cache for a long time but still can be updated immediately. private means the file can't be cached by CDNs.
That's it!
Articles
There are some of my articles. Feel free to check if you like!
- My blog-posts for software developing: https://medium.com/a-layman
- My web resume: https://jenhsuan.github.io/ALayman/cover.html
- Facebook page: https://www.facebook.com/imalayman
- My latest side project - Daily Learning: https://daily-learning.herokuapp.com/
Top comments (0)