js前端面試常見瀏覽器快取強快取及協商快取範例

2022-06-16 14:00:15

前言

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

瀏覽器快取

瀏覽器快取是瀏覽器在本地磁碟對使用者最近請求過的檔案進行儲存，當存取者再次存取同一頁面時，瀏覽器就可以直接從本地磁碟載入檔案。瀏覽器快取主要分為強快取（也稱本地快取）和協商快取（也稱弱快取）。

強快取

當請求資源的時，如果是之前請求過的並使用強快取，那麼在過期時間內將不會傳送本次請求向伺服器獲取資源，而是直接從瀏覽器快取中獲取（不管資源是否改動）。過期了將重新從伺服器獲取，並再次強快取。

協商快取

當請求資源時，如果是之前請求過的並使用協商快取，還是傳送請求到伺服器，伺服器通過邏輯判斷確認資源沒有修改返回304狀態碼，那麼本次的資源則是從快取中獲取；如果經過判斷確認資源被修改過，則重新傳送資源到使用者端，並且使用者端更新快取。

判斷資源是否修改有兩種標準，一種是判斷最後修改時間是否變了（確實是修改了，但資源的內容可以沒有變），另一種是判斷資源的內容是否修改。

使用快取有下面的優點：

減少冗餘的資料傳輸
減少伺服器負擔
加快使用者端載入網頁的速度

搭建環境

建立資料夾app，並在下建立app.js 和 fs/a.txt（裡面隨便寫東西）

我們使用node+koa2來搭建我們需要的環境，安裝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);

啟動伺服器，網頁輸入網址127.0.0.1:3000，環境搭建成功

強快取

強快取是利用http頭中的Expires和Cache-Control兩個欄位來控制的，Expires是http1.0的規範，Cache-Control是在http1.1中出現的，我們這裡使用Cache-Control示範。

Cache-Control有一些常設定的值

private：僅瀏覽器可以快取（預設值）；
public：瀏覽器和代理伺服器都可以快取；
max-age=xxx：過期時間單位秒；
no-cache：不進行強快取；
no-store：不強快取，也不協商快取）

將上面 / 路由的程式碼改為

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')  //設定強快取，過期時間為10秒
    ctx.body = await getResource(); 
})

將測試搭建環境頁面關閉，重新開啟網頁存取127.0.0.1:3000

前端頁面響應頭多了Cache-Control這個欄位，且10s內都走本地快取，不會去請求伺服器端

在過期時間內再次請求資源，就可以看到這次請求並沒有經過伺服器

協商快取

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

Etag和If-None-Match

Etag/If-None-Match返回的是一個校驗碼。ETag可以保證每一個資源是唯一的，資源變化都會導致ETag變化。伺服器根據瀏覽器上送的If-None-Match值來判斷是否命中快取。當伺服器返回304 Not Modified的響應時，由於ETag重新生成過，response header中還會把這個ETag返回，即使這個ETag跟之前的沒有變化。

Last-Modify和if-modified-since

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

當瀏覽器再次請求該資源時，request的請求頭中會包含 if-modified-since，該值為快取之前返回的Last-Modify。伺服器收到if-modified-since後，根據資源的最後修改時間判斷是否命中快取。

如果命中快取，則返回304，並且不會返回資源內容，並且不會返回Last-Modify。

樣例我們使用Last-Modify和if-modified-since來實現。對於Etag和If-None-Match的實現，讀取資源內容，轉成hash值，然後跟Last-Modify和if-modified-since的實現差不多了，同一個道理。

新新增一個路由器

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	存取時間	
    // 最後一次存取檔案（讀取或執行）的時間
    // ctime	Change Time	變化時間	
    // 最後一次改變檔案（屬性或許可權）或者目錄（屬性或許可權）的時間
    // mtime	Modify Time	修改時間	
    // 最後一次修改檔案（內容）或者目錄（內容）的時間
    if (ifModifiedSince === resource.mtime.toGMTString()) { //把具體的日期轉換為（根據 GMT）字串
        ctx.status = 304;
    }
    ctx.set('Last-Modified', resource.mtime.toGMTString());
    ctx.body = resource
})

關閉頁面，重新開啟網頁存取127.0.0.1:3000/pp

第一次請求，是沒有if-modified-since欄位的