缓存浅析
概念
緩存是一種保存資源副本并在下次請(qǐng)求時(shí)直接使用該副本的技術(shù)?！狹DN緩存能緩解服務(wù)器壓力，提高響應(yīng)速度，提升用戶體驗(yàn)。
以下討論的緩存是針對(duì)對(duì)img/script/css資源而言的，且緩存策略都是依靠 http 報(bào)文的首部來(lái)實(shí)現(xiàn)。
實(shí)驗(yàn)
搭建實(shí)驗(yàn)環(huán)境
編寫(xiě) html 文件
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="icon" href="data:;base64,="><title>緩存</title> </head><body><img style="width:400px;" src="sun.jpg"><div>緩存實(shí)驗(yàn)</div> </body></html>服務(wù)端代碼
const path = require('path') const url = require('url') const fs = require('fs') const zlib = require('zlib')const img = fs.readFileSync(path.resolve(__dirname, './static/sun.jpg'), 'binary')http.createServer((req, res) => {const html = fs.createReadStream(path.resolve(__dirname, './static/index.html'))let {pathname} = url.parse(req.url)if (pathname === '/') {res.writeHead(200, {'Content-Type': 'text/html','Content-Encoding': 'gzip'})html.pipe(zlib.createGzip()).pipe(res)} else if (pathname === '/sun.jpg') {res.writeHead(200, {'Content-Type': 'image/jpeg'})res.write(img, 'binary')res.end()} else {res.end(pathname)} }).listen(3210)訪問(wèn) http://localhost:3210 , 看到相應(yīng)的文檔和圖片，且無(wú)論刷新多少次，sun.jpg 的 Status 和 Size 都不變?？刂婆_(tái)里勾選 Preserve log
Cache-Control
通過(guò)在服務(wù)端設(shè)置相應(yīng)首部 Cache-Control 可以控制緩存行為，例如
- Cache-Control: no-cache, 告訴瀏覽器，下次請(qǐng)求該資源時(shí)，不直接使用緩存，而是向服務(wù)端發(fā)送請(qǐng)求，服務(wù)端會(huì)根據(jù)請(qǐng)求，判斷本地的資源是否過(guò)期
- Cache-Control: no-store, 告訴瀏覽器，不要緩存該資源
- Cache-Control: max-age=age, 告訴瀏覽器，這個(gè)資源有效的時(shí)長(zhǎng) age，在該時(shí)間范圍內(nèi)，如果需要該資源，直接從本地取，不要煩我（向我發(fā)送請(qǐng)求）
修改服務(wù)端代碼
設(shè)置圖片緩存時(shí)長(zhǎng) 30s
res.writeHead(200, {'Content-Type': 'image/jpeg','Cache-Control': 'max-age=30'})快速刷新頁(yè)面2次，超過(guò)30s后，再刷新一次
三次刷新結(jié)果在控制臺(tái)顯示的情況如下
其中第二次請(qǐng)求 sun.jpg 的請(qǐng)求情況如下，200 OK （from memory cache），第三次請(qǐng)求 sun.jpg 則又是從服務(wù)端獲取圖片，顯示資源 1.6M。
Last-Modified & If-Modified
現(xiàn)在的情形是這樣的，30s到了，瀏覽器向服務(wù)端發(fā)出 sun.jpg 的請(qǐng)求，但服務(wù)器并沒(méi)有更新該資源，所以服務(wù)器告訴瀏覽器，“我沒(méi)有修改該資源，你還是用你本地的吧，我就不再發(fā)給你了”。這些通過(guò) Last-Modified 和 If-Modified-Since 來(lái)實(shí)現(xiàn)。
瀏覽器第一次向服務(wù)端請(qǐng)求 sun.jpg，服務(wù)端不僅返回 sun.jpg，還通過(guò)響應(yīng)首部的 Last-Modified(瀏覽器自動(dòng)添加)，告訴瀏覽器該資源最后修改的時(shí)間。
下次瀏覽器再次請(qǐng)求 sun.jpg，會(huì)通過(guò)請(qǐng)求首部的 If-Modified-Since, 把自己手上這個(gè)資源最后修改的時(shí)間告訴服務(wù)端，服務(wù)端通過(guò)這個(gè)時(shí)間，判斷瀏覽器本地的資源是否是最新的，若是，則返回 304（not modified） 和響應(yīng)頭部即可，不用返回圖片；若不是，則返回 200 和圖片。
修改服務(wù)端代碼
const http = require('http') const path = require('path') const url = require('url') const fs = require('fs') const zlib = require('zlib')const img = fs.readFileSync(path.resolve(__dirname, './static/sun.jpg'), 'binary') let date = new Date() let lastModified = date.toUTCString()http.createServer((req, res) => {const html = fs.createReadStream(path.resolve(__dirname, './static/index.html'))let {pathname} = url.parse(req.url)if (pathname === '/') {res.writeHead(200, {'Content-Type': 'text/html','Content-Encoding': 'gzip'})html.pipe(zlib.createGzip()).pipe(res)} else if (pathname === '/sun.jpg') {if (req.headers['if-modified-since'] === lastModified) {res.writeHead(304, {'Content-Type': 'image/jpeg','Cache-Control': 'max-age=30','Last-Modified': lastModified})res.end()} else {res.writeHead(200, {'Content-Type': 'image/jpeg','Cache-Control': 'max-age=30','Last-Modified': lastModified})res.write(img, 'binary')res.end()}} else {res.end(pathname)} }).listen(3210)瀏覽器刷新一次，30s內(nèi)，再刷新一次，30s后再刷新一次
三次刷新的結(jié)果在控制臺(tái)里顯示如下，最后一次還有 189B 是服務(wù)端響應(yīng)頭部的大小，178ms 里包含了服務(wù)端比較修改時(shí)間，返回響應(yīng)頭部的時(shí)間。
且最后一次請(qǐng)求 sun.jpg 的請(qǐng)求情形如下
ETag & If-None-Match
Etag 和 If-None-Match 起到的作用和上文中 Last-Modified 和 If-Modified 差不多，區(qū)別在于 Etag 是服務(wù)端上通過(guò)算法給資源計(jì)算出的唯一標(biāo)示，當(dāng)資源修改時(shí)，該標(biāo)示會(huì)發(fā)生變化。服務(wù)端通過(guò)響應(yīng)首部 Etag 將該標(biāo)示告訴瀏覽器，瀏覽器再下一次請(qǐng)求該資源時(shí)，會(huì)通過(guò)請(qǐng)求首部 If-None-Match 帶上該標(biāo)示，服務(wù)端會(huì)比較請(qǐng)求中的標(biāo)示和該資源最新的標(biāo)示，如果一樣，證明瀏覽器擁有的該資源是最新的，僅返回304和響應(yīng)頭部，否則返回200和整個(gè)資源。
強(qiáng)制刷新
常使用的強(qiáng)制刷新就是通過(guò)修改請(qǐng)求首部來(lái)實(shí)現(xiàn)的
將 Cache-Control 和 Pragma 設(shè)為 no-cache，去除 If-Modified, If-None-Match
盜個(gè)圖，HTTP緩存控制小結(jié)
快速更新
很多js文件或css文件的文件名會(huì)帶有文件指紋或版本號(hào)，通過(guò)改變文件名，讓瀏覽器以為請(qǐng)求的新的未緩存的資源從而實(shí)現(xiàn)快速更新。
參考
- HTTP緩存控制小結(jié)
- [淺談瀏覽器http的緩存機(jī)制](http://www.cnblogs.com/vajoy/...
總結(jié)
- 上一篇： Django笔记---数据库设计
- 下一篇： gulp自动添加版本号