# 快取與緩存

## 快取與緩存

### 簡介:

1.我們在瀏覽器瀏覽圖片或影片時檔案通常會較大，此時如果每次瀏覽都重新去跟server要資料速度會很慢，所以有了緩存機制，讓一些檔案下載後存在我們本地端，此時之後再瀏覽就不用再次去找server要資料

2.而我們也可以利用Redis或memcached來做簡單文字資料的存儲，或是直接把資料存在記憶體中，之後可以快速取用，這兩種都是比直接存在大型資料庫如`MySQL`快速

存取記憶體的方式可參考<https://www.npmjs.com/package/node-cache>

### HTTP Header 識別快取

#### #If-Modified-Since與Last-Modified

```
1.第一次訪問不會有If-Modified-Since，只有server回應的Last-Modified
2.之後client請求即會帶有If-Modified-Since時間即為上次server回應的Last-Modified
3.如果時間不一致則會重新去向server要資料，如果相同則不會再去要資料，而是直接返回304
```

![](/files/-M0u4TTWlkWKu7BS0G8h)

#### #Etag

```
server會產生並傳回一個隨機數，通常是檔案內容的hash。用戶端不必瞭解hash是如何產生的，只需要在下一個請求中將其傳送給伺服器：如果hash仍然一致，說明資源未被修改，之後就可以不用再次向server要資料。
```

![](/files/-M0u4TTY3zIp4rRY_vnV)

#### #Expires

直接設定某個時間點前都可以保有緩存

![](/files/-M0u4TT_PLiCFbZjKbSl)

#### #Cache-Control

```
"no-cache" 和 "no-store"

「no-cache」表示必須先與伺服器確認傳回的回應是否已變更，然後才能使用該回應來滿足後續對同一個網址的請求。因此，如果存在(ETag)，no-cache 會發起往返通訊來驗證快取的回應，如果資源沒有任何變更，即可避免下載步驟。

相較之下，「no-store」更加簡單，直接禁止瀏覽器和所有中繼快取儲存傳回的任何回應版本，每次使用者請求時，都會向伺服器發送一個請求，而且每次都會下載完整的回應。

「public」和「private」

如果回應標記為「public」，即使具備關聯的 HTTP 認證，甚至回應狀態碼無法正常快取，回應也可以供使用者快取。在大多數情況下，「public」並不是必要項目，因為明確的快取資訊 (例如「max-age」) 已表示 回應可供快取。

另一方面，瀏覽器可以快取「private」回應，但是通常只開放給單一使用者快取，因此不允許任何中繼快取對其進行快取，例如使用者瀏覽器可以快取包含使用者私人資訊的 HTML 網頁，但是 CDN 不能快取。

"max-age"

這個指令指定從目前請求開始，允許擷取的回應重複使用的最長時間 (單位為秒)，例如「max-age=60」表示回應可以再快取及重複使用 60 秒。
```

![](/files/-M0u4TTbqGBPN3xSvmir)

## 控制檔案快取

在副檔名後方加上參數，如此一來瀏覽器會認定URL變得不相同，向伺服器請求新的下載

```
style.css?ai34mc (？號後可隨機輸入)
test.js?cihofew
test1.jpg?123123dfwef
```

## prefetch

```
<link rel="prefetch" href="image.png">
```

預先存取資源並先存入快取

## CDN

CDN(Content delivery network)內容傳遞網路

假設server在台灣．client端瀏覽器在美國，則他可以直接向位於美國某一個州的CDN server存取資源即可，而該美國CDN server會存有與台灣server相同的資料

如此會加快連線速度

![](/files/-M0u4TTdM2j9oxwY5bF_)

客戶端瀏覽器先檢查本地緩存是否過期，如果過期，則向CDN邊緣節點發起請求，CDN邊緣節點會檢測用戶請求數據的緩存是否過期，如果沒有過期，則直接響應用戶請求，此時一個完成http請求結束；如果數據已經過期，那麼CDN還需要向源站發出回源請求（back to the source request）,來拉取最新的數據


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easonwang.gitbook.io/class/cache.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.