前言

最近在背面試題時，時常會看見瀏覽器緩存，雖然沒有用過但是從它的描寫中大致是知道它的作用和重要性。但是還是沒有代碼實(shí)操過，也是一知半解的，這口氣咽不下啊，開始找資料，但是大部分都是理論半行代碼沒有，終于東拼西湊頓悟了。開始搭環(huán)境，干活。

瀏覽器緩存

瀏覽器緩存是瀏覽器在本地磁盤對用戶最近請求過的文檔進(jìn)行存儲，當(dāng)訪問者再次訪問同一頁面時，瀏覽器就可以直接從本地磁盤加載文檔。 瀏覽器緩存主要分為強(qiáng)緩存（也稱本地緩存）和協(xié)商緩存（也稱弱緩存）。

強(qiáng)緩存

當(dāng)請求資源的時，如果是之前請求過的并使用強(qiáng)緩存，那么在過期時間內(nèi)將不會發(fā)送本次請求向服務(wù)器獲取資源，而是直接從瀏覽器緩存中獲?。ú还苜Y源是否改動）。過期了將重新從服務(wù)器獲取，并再次強(qiáng)緩存。

協(xié)商緩存

當(dāng)請求資源時，如果是之前請求過的并使用協(xié)商緩存，還是發(fā)送請求到服務(wù)器，服務(wù)器通過邏輯判斷確認(rèn)資源沒有修改返回304狀態(tài)碼，那么本次的資源則是從緩存中獲??；如果經(jīng)過判斷確認(rèn)資源被修改過，則重新發(fā)送資源到客戶端，并且客戶端更新緩存。

判斷資源是否修改有兩種標(biāo)準(zhǔn)，一種是判斷最后修改時間是否變了（確實(shí)是修改了，但資源的內(nèi)容可以沒有變），另一種是判斷資源的內(nèi)容是否修改。

使用緩存有下面的優(yōu)點(diǎn)：

• 減少冗余的數(shù)據(jù)傳輸
• 減少服務(wù)器負(fù)擔(dān)
• 加快客戶端加載網(wǎng)頁的速度

搭建環(huán)境

• 創(chuàng)建文件夾app，并在下創(chuàng)建app.js 和 fs/a.txt（里面隨便寫東西）

我們使用node+koa2來搭建我們需要的環(huán)境，安裝koa、安裝路由

npm install koa --save
npm install koa-router --save

app.js

var Koa = require('koa');
var app = new Koa();
var Router = require('koa-router')();
const fs = require('fs')
Router.get("/", async (ctx) => {
    ctx.body = "ok"
})
app
    .use(Router.routes())   	//啟動路由
    .use(Router.allowedMethods());
app.listen(3000);

啟動服務(wù)器，網(wǎng)頁輸入網(wǎng)址127.0.0.1:3000，環(huán)境搭建成功

強(qiáng)緩存

強(qiáng)緩存是利用http頭中的Expires和Cache-Control兩個字段來控制的，Expires是http1.0的規(guī)范，Cache-Control是在http1.1中出現(xiàn)的，我們這里使用Cache-Control示范。

Cache-Control有一些常設(shè)置的值

• private：僅瀏覽器可以緩存（默認(rèn)值）；
• public：瀏覽器和代理服務(wù)器都可以緩存；
• max-age=xxx：過期時間單位秒；
• no-cache：不進(jìn)行強(qiáng)緩存；
• no-store：不強(qiáng)緩存，也不協(xié)商緩存）

將上面 / 路由的代碼改為

Router.get('/', async (ctx) => {
    const getResource = () => {
        return new Promise((res) => {
            fs.readFile("./fs/a.txt", (err, data) => {
                if (err) {
                    return;
                }
                res(data)
            })
        })
    }
    ctx.set('Cache-Control', 'max-age=10')  //設(shè)置強(qiáng)緩存，過期時間為10秒
    ctx.body = await getResource(); 
})

將測試搭建環(huán)境頁面關(guān)閉，重新打開網(wǎng)頁訪問127.0.0.1:3000

前端頁面響應(yīng)頭多了Cache-Control這個字段，且10s內(nèi)都走本地緩存，不會去請求服務(wù)端

在過期時間內(nèi)再次請求資源，就可以看到這次請求并沒有經(jīng)過服務(wù)器

協(xié)商緩存

主要涉及到兩組header字段：Etag和If-None-Match、Last-Modified和if-modified-since。

Etag和If-None-Match

Etag/If-None-Match返回的是一個校驗(yàn)碼。ETag可以保證每一個資源是唯一的，資源變化都會導(dǎo)致ETag變化。服務(wù)器根據(jù)瀏覽器上送的If-None-Match值來判斷是否命中緩存。 當(dāng)服務(wù)器返回304 Not Modified的響應(yīng)時，由于ETag重新生成過，response header中還會把這個ETag返回，即使這個ETag跟之前的沒有變化。

Last-Modify和if-modified-since

瀏覽器第一次請求一個資源的時候，服務(wù)器返回的header中會加上Last-Modify，Last-Modify是一個時間標(biāo)識該資源的最后修改時間，例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。

當(dāng)瀏覽器再次請求該資源時，request的請求頭中會包含 if-modified-since，該值為緩存之前返回的Last-Modify。服務(wù)器收到if-modified-since后，根據(jù)資源的最后修改時間判斷是否命中緩存。

如果命中緩存，則返回304，并且不會返回資源內(nèi)容，并且不會返回Last-Modify。

樣例我們使用Last-Modify和if-modified-since來實(shí)現(xiàn)。對于Etag和If-None-Match的實(shí)現(xiàn)，讀取資源內(nèi)容，轉(zhuǎn)成hash值，然后跟Last-Modify和if-modified-since的實(shí)現(xiàn)差不多了，同一個道理。

新添加一個路由器

Router.get('/pp', async (ctx) => {
    const ifModifiedSince = ctx.request.header['if-modified-since'];
    const getResource = () => {
        return new Promise((res) => {
            fs.stat("./fs/a.txt", (err, stats) => {
                if (err) {
                    console.log(err);
                }
                res(stats)
            })
        })
    }
    let resource = await getResource();
    // atime	Access Time	訪問時間	
    // 最后一次訪問文件（讀取或執(zhí)行）的時間
    // ctime	Change Time	變化時間	
    // 最后一次改變文件（屬性或權(quán)限）或者目錄（屬性或權(quán)限）的時間
    // mtime	Modify Time	修改時間	
    // 最后一次修改文件（內(nèi)容）或者目錄（內(nèi)容）的時間
    if (ifModifiedSince === resource.mtime.toGMTString()) { //把具體的日期轉(zhuǎn)換為（根據(jù) GMT）字符串
        ctx.status = 304;
    }
    ctx.set('Last-Modified', resource.mtime.toGMTString());
    ctx.body = resource
})

關(guān)閉頁面，重新打開網(wǎng)頁訪問127.0.0.1:3000/pp

第一次請求，是沒有if-modified-since字段的

第二次請求，沒有修改資源，返回狀態(tài)碼304，從緩存獲取資源

修改a.txt文件里內(nèi)容時，重新請求服務(wù)器

以上就是js前端面試常見瀏覽器緩存強(qiáng)緩存及協(xié)商緩存實(shí)例的詳細(xì)內(nèi)容，更多關(guān)于js前端面試瀏覽器緩存的資料請關(guān)注腳本之家其它相關(guān)文章！