DEV Community

Cover image for Day 35 of #100DaysOfCode: Review HTTP Cache
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on • Updated on

Day 35 of #100DaysOfCode: Review HTTP Cache

#cache #browser #webdev #100daysofcode

Introduction

That's review the HTTP cache for the browser.
Alt Text

1. If you don't use cached files on the browser

Option 1. Progma: no-cache (HTTP 1.0 request header) 

Progma: no-cache
Enter fullscreen mode Exit fullscreen mode
  • Equals Cache-Control:no-cache

Option 2. Cache-Control: no-store (HTTP 1.1 request header) 

Cache-Control: no-store
Enter fullscreen mode Exit fullscreen mode
  1. The browser will never use the cache.
  2. 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
Enter fullscreen mode Exit fullscreen mode
  1. The browser always checks the web cache.
  2. 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}
Enter fullscreen mode Exit fullscreen mode
  • 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)
Enter fullscreen mode Exit fullscreen mode
  • 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 Alt Text

(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}
Enter fullscreen mode Exit fullscreen mode

Set the HTTP response header 

Last-Modified: {date}
Enter fullscreen mode Exit fullscreen mode
  • 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}
Enter fullscreen mode Exit fullscreen mode

Set the HTTP response header 

Etag: {hash value}
Enter fullscreen mode Exit fullscreen mode

Alt Text

  • The server will sends new file (status code: 200) or not (304)

Example

Alt Text

3. The recommended cache strategy

  1. 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.
  2. For the CSS file with the hashed name, the browser holds the cache for a long time but still can be updated immediately.
  3. 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. Alt Text

That's it!

Articles

There are some of my articles. Feel free to check if you like!

Reference

Top comments (0)

Read next

patrick_61cbc6392b72286f6 profile image

Best Practices for Writing API Documentation 📚

Patrick -

duubemmm profile image

Installing And Running NPM Packages Using The Terminal

Chidubem Okoli -

arnab2001 profile image

MUI Stack: Mastering One-Dimensional Layouts in React

Arnab Chatterjee -

charan_sajjanapu profile image

Evolution of Web Tech and Browsers

Charan Sajjanapu -