總結
1、瀏覽器第一次發起一個http/https請求，讀取服務器的資源
2、服務端設置響應頭（cache-control、Expires、last-modified、Etag）給瀏覽器
2.1. cache-control、Expires 屬於強緩存，last-modified、Etag屬於對比緩存（協商緩存）
3、瀏覽器不關閉tab、f5刷新頁面（再次發起一個請求給服務器）
3.1、如果cache-control的max-age 和 Expires 未超過緩存時間，所有資源除了index.html 都來自於內存緩存（from memory cache）加載。且狀態碼為200
3.2、如果cache-control的max-age緩存時間為5s， Expires的過期時間是超過5s，則cache-control會覆蓋Expires
3.3、如果強緩存失效，則下一步會走對比緩存。瀏覽器會從第二步的拿到的響應頭，在刷新發起請求會設置
a、if-modified-since值為響應的last-modified的值；
b、if-none-match 值為響應的Etag的值;
3.4、如果if-modified-since 和if-none-match都存在，則if-none-match的優先比if-modified-since高。直接對比第二步給瀏覽器的Etag的值，如果相等就直接返回一個狀態為304不返回內容，如果不相等就返回一個狀態碼為200，並且會返回內容和cache-control 、Expires、last-modified、Etag等響應頭；
3.5、如果if-modified-since 存在， if-none-match不存在，步驟跟上述的3.4類似，只不過服務端對比的是if-modified-since 和第一次返回給瀏覽器last-modified的值
4、如果瀏覽器關閉tab。重新打開新tab，發起請求資源。步驟跟上述3類似，只不過在上述3.1中，左右資源除了index.html緩存（from disk cache）都從磁盤加載。
http緩存分為強緩存 和 對比緩存（協商緩存）
1、強緩存：
當客戶端請求后，會先訪問緩存數據庫看緩存是否存在。如果存在則直接返回，不存在則請求真的服務器。
強制緩存直接減少請求數，是提升最大的緩存策略。 它的優化覆蓋了文章開頭提到過的請求數據的全部三個步驟。如果考慮使用緩存來優化網頁性能的話，強制緩存應該是首先被考慮的。
可以造成強制緩存的字段是 Cache-control 和 Expires
Expires
這是 HTTP 1.0 的字段，表示緩存到期時間，是一個絕對的時間 (當前時間+緩存時間)。在響應消息頭中，設置這個字段之后，就可以告訴瀏覽器，在未過期之前不需要再次請求。
Expires: Thu, 22 Mar 2029 16:06:42 GMT
const http = require('http')
const url = require('url')
const path = require('path')
const fs = require('fs')
http.createServer((req, res) => {
let { pathname } = url.parse(req.url, true);
console.log(pathname)
let abs = path.join(__dirname, pathname);
res.setHeader('Expires', new Date(Date.now() + 20000).toGMTString());
fs.stat(path.join(__dirname, pathname), (err, stat) => {
if(err) {
res.statusCode = 404;
res.end('not found')
return
}
if(stat.isFile()) {
fs.createReadStream(abs).pipe(res)
}
})
}).listen(3000)
以上代碼給Expires設置過期時間為20s。
-
首次請求 首次請求 全部走網絡請求
-
20s內F5刷新當前，從內存里面加載。因為我們沒有關閉TAB，所以瀏覽器把緩存的應用加到了內存緩存。（耗時0ms，也就是1ms以內）
-
20s內關閉tab，打開請求的url，從磁盤加載
關閉了TAB，內存緩存也隨之清空。但是磁盤緩存是持久的，於是所有資源來自磁盤緩存。（大約耗時3ms，因為文件有點小）而且對比2和3，很明顯看到內存緩存還是比disk cache快得多的。 -
20s以后請求，緩存已經失效，重復第1步
過期的缺點：
在這里，其他電腦訪問服務器，若修改電腦的本地時間，會導致瀏覽器判斷緩存失效
這里修重新修改緩存時間：
res.setHeader（'Expires'，new Date（Date.now（）+ 2000000）.toGMTString（））
Cache-control
已知Expires的缺點之后，在HTTP/1.1中，增加了一個字段Cache-control，該字段表示資源緩存的最大有效時間，在該時間內，客戶端不需要向服務器發送請求
Expires 和 Cache-control 區別
Expires設置的是 絕對時間
Cache-control設置的是 相對時間
緩存控制的優先級大於到期
Cache-control: max-age=20
- Cache-control：max-age = 20 max-age最大有效時間
const http = require('http')
const url = require('url')
const path = require('path')
const fs = require('fs')
http.createServer((req, res) => {
let { pathname } = url.parse(req.url, true);
console.log(pathname)
let abs = path.join(__dirname, pathname);
res.setHeader('Cache-Control', 'max-age=20')
fs.stat(path.join(__dirname, pathname), (err, stat) => {
if(err) {
res.statusCode = 404;
res.end('not found')
return
}
if(stat.isFile()) {
fs.createReadStream(abs).pipe(res)
}
})
}).listen(3000)
以上代碼給cache-control設置max-age為20s
解析：首次請求->關閉tab再次請求參考Expires的圖
- no-cache 告訴瀏覽器忽略資源的緩存副本，強制每次請求直接發送給服務器，拉取資源，但不是“不緩存”
- no-store 強制緩存在任何情況下都不要保留任何副本
- public 任何路徑的緩存者（本地緩存、代理服務器），可以無條件的緩存改資源
- private 只針對單個用戶或者實體（不同用戶、窗口）緩存資源
no-store 和 no-cache的區別
-
no-store:
如果服務器再響應中設置了no-store。那么瀏覽器不會存儲這次相應的數據，當下次請求時，瀏覽器會在請求一次，就是說不會對比Etag
res.setHeader('Cache-control', 'no-store') -
no-cache
如果服務器在響應中設置了no-cache，那么說明瀏覽器在使用緩存前會對比Etag，返回304就會避免修改
public 和 private
- 設置了public,表示該響應可以在用戶的瀏覽器或者任何中繼web代理對其進行緩存,不寫默認為public,表示只有用戶的瀏覽器可以緩存private響應不允許任何web代理進行緩存，
只有用戶的瀏覽器可以進行緩存。
2、對比緩存（協商緩存）
當強制緩存失效(超過規定時間)時，就需要使用對比緩存，由服務器決定緩存內容是否失效。對比緩存是可以和強制緩存一起使用。
last-modified
1、服務器在響應頭中設置last-modified字段返回給客戶端，告訴客戶端資源最后一次修改的時間。
Last-Modified: Sat, 30 Mar 2019 05:46:11 GMT
2、瀏覽器在這個值和內容記錄在瀏覽器的緩存數據庫中。
3、下次請求相同資源，瀏覽器將在請求頭中設置if-modified-since的值（這個值就是第一步響應頭中的Last-Modified的值）傳給服務器
4、服務器收到請求頭的if-modified-since的值與last-modified的值比較，如果相等，表示未進行修改，則返回狀態碼為304；如果不相等，則修改了，返回狀態碼為200，並返回數據
http.createServer((req, res) => {
let { pathname } = url.parse(req.url, true);
console.log(pathname);
let abs = path.join(__dirname, pathname);
fs.stat(path.join(__dirname, pathname), (err, stat) => {
if(err) {
res.statusCode = 404;
res.end('Not Fount');
return
}
if(stat.isFile()) {
res.setHeader('Last-Modified', stat.ctime.toGMTString())
console.log(stat.ctime.toGMTString())
if(req.headers['if-modified-since'] === stat.ctime.toGMTString()) {
console.log('if-modifined-since', req.headers['if-modified-since'])
res.statusCode = 304;
res.end()
return
}
fs.createReadStream(abs).pipe(res)
}
})
}).listen(3000)
last-modified的缺點：
- last-modified是以秒為單位的，假如資料在1s內可能修改幾次，那么該緩存就不能被使用的。
- 如果文件是通過服務器動態生成，那么更新的時間永遠就是生成的時間，盡管文件可能沒有變化，所以起不到緩存的作用。
Etag
為了解決上述問題，出現了一組新的字段 Etag 和 If-None-Match
Etag是根絕文件內容，算出一個唯一的值。服務器存儲着文件的 Etag 字段。之后的流程和 Last-Modified 一致，只是 Last-Modified 字段和它所表示的更新時間改變成了 Etag 字段和它所表示的文件 hash，把 If-Modified-Since 變成了 If-None-Match。服務器同樣進行比較，命中返回 304, 不命中返回新資源和 200。
Etag 的優先級高於 Last-Modified
http.createServer(function(req, res) {
let { pathname } = url.parse(req.url, true);
console.log(pathname)
let abs = path.join(__dirname, pathname);
fs.stat(path.join(__dirname, pathname), (err, stat) => {
if(err) {
res.statusCode = 404;
res.end('Not Found')
return
}
if(stat.isFile()) {
//Etag 實體內容，他是根絕文件內容，算出一個唯一的值。
let md5 = crypto.createHash('md5')
let rs = fs.createReadStream(abs)
let arr = []; // 你要先寫入響應頭再寫入響應體
rs.on('data', function(chunk) {
md5.update(chunk);
arr.push(chunk)
})
rs.on('end', function() {
let etag = md5.digest('base64');
if(req.headers['if-none-match'] === etag) {
console.log(req.headers['if-none-match'])
res.statusCode = 304;
res.end()
return
}
res.setHeader('Etag', etag)
// If-None-Match 和 Etag 是一對， If-None-Match是瀏覽器的， Etag是服務端的
res.end(Buffer.concat(arr))
})
}
})
}).listen(3000)
Etag的缺點：
- 每次請求的時候，服務器都會把index.html 讀取一次，以確認文件有沒有修改
- 對大文件進行etag 一般用文件的大小 + 文件的最后修改時間 來組合生成這個etag