摘要：概念緩存是一種保存資源副本并在下次請(qǐng)求時(shí)直接使用該副本的技術(shù)。緩存能緩解服務(wù)器壓力，提高響應(yīng)速度，提升用戶體驗(yàn)。以下討論的緩存是針對(duì)對(duì)資源而言的，且緩存策略都是依靠報(bào)文的首部來(lái)實(shí)現(xiàn)。參考緩存控制小結(jié)淺談瀏覽器的緩存機(jī)制

緩存是一種保存資源副本并在下次請(qǐng)求時(shí)直接使用該副本的技術(shù)。——MDN

緩存能緩解服務(wù)器壓力，提高響應(yīng)速度，提升用戶體驗(yàn)。

以下討論的緩存是針對(duì)對(duì)img/script/css資源而言的，且緩存策略都是依靠 http 報(bào)文的首部來(lái)實(shí)現(xiàn)。

編寫 html 文件

  
  
  
  
  



  
  

    緩存實(shí)驗(yàn)
  

服務(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

通過(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)求）

設(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。

現(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 和圖片。

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 起到的作用和上文中 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)制刷新就是通過(guò)修改請(qǐng)求首部來(lái)實(shí)現(xiàn)的

將 Cache-Control 和 Pragma 設(shè)為 no-cache，去除 If-Modified, If-None-Match

很多js文件或css文件的文件名會(huì)帶有文件指紋或版本號(hào)，通過(guò)改變文件名，讓瀏覽器以為請(qǐng)求的新的未緩存的資源從而實(shí)現(xiàn)快速更新。

HTTP緩存控制小結(jié)

[淺談瀏覽器http的緩存機(jī)制](http://www.cnblogs.com/vajoy/...