Day 35 of #100DaysOfCode: Review HTTP Cache
Tags: cache, browser, webdev, 100daysofcode
Published: 2020-08-20 13:29:16

## Introduction
That's review the HTTP cache for the browser.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sbby0k9hbm4vzmituh1a.png)

## 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
```
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 
```

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}
```

* 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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bj4h06ptq1ijr0zw8kir.png)


### (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}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cchof2s7gw7bkfhv48cl.png)

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

#### Example
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pvl77vae3aavk8uj0mb4.png)



* source: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/images/http-cache-control.png?hl=zh-tw

## 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](https://dev-to-uploads.s3.amazonaws.com/i/d6yvv0ktafreqhkzf3te.png)

* source: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-tw

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/


## Reference
* [循序漸進理解 HTTP Cache 機制](https://blog.techbridge.cc/2017/06/17/cache-introduction/)
* [HTTP 快取](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-tw)
* [（2.6w 字）网络知识点灵魂拷问——前端面试必问](https://xie.infoq.cn/article/369e41fc00d1915554ef18b1f)