Nodejs 第六十章（http缓存）

站长

2024年04月02日 23:31 · 阅读数 4

HTTP缓存

HTTP 缓存主要分为两大类：强缓存和协商缓存。这两种缓存都通过 HTTP 响应头来控制，目的是提高网站性能。

强缓存介绍

强缓存之后则不需要向服务器发送请求，而是从浏览器缓存读取分为（内存缓存）| （硬盘缓存）

Nodejs 第六十章（http缓存）

memory cache(内存缓存) 内存缓存存储在浏览器内存当中，一般刷新网页的时候会发现很多内存缓存
disk cache(硬盘缓存) 硬盘缓存是存储在计算机硬盘中，空间大，但是读取效率比内存缓存慢

强缓存案例(Expires)

Expires: 该字段指定响应的到期时间，即资源不再被视为有效的日期和时间。它是一个 HTTP 1.0 的头部字段，但仍然被一些客户端和服务器使用。

Expires 的判断机制是：当客户端请求资源时，会获取本地时间戳，然后拿本地时间戳与 Expires 设置的时间做对比，如果对比成功，走强缓存，对比失败，则对服务器发起请求。

node端


import express from 'express'
import cors from 'cors'
const app = express()
app.use(cors())
app.get('/', (req, res) => {
    res.setHeader('Expires', new Date('2024-3-30 23:17:00').toUTCString()) //设置过期时间
    res.json({
        name: 'cache',
        version: '1.0.0'
    })
})

app.listen(3000, () => {
    console.log('Example app listening on port 3000!')
})

web端请求

<body>
    <button id="btn">send</button>
    <script>
       const btn = document.getElementById('btn');
       btn.addEventListener('click', () => {
           fetch('http://localhost:3000')
       })
    </script>
</body>

没过期之前使用缓存的值，过期之后从服务器读取

Nodejs 第六十章（http缓存）

强缓存案例(Cache-Control)

Cache-Control 的值如下：

max-age：浏览器资源缓存的时长(秒)。
no-cache：不走强缓存，走协商缓存。
no-store：禁止任何缓存策略。
public：资源即可以被浏览器缓存也可以被代理服务器缓存(CDN)。
private：资源只能被客户端缓存。

如果 max-age 和 Expires 同时出现 max-age 优先级高

node端

import express from 'express'
import cors from 'cors'
const app = express()
app.use(cors())
app.get('/', (req, res) => {
    res.setHeader('Cache-Control', 'public, max-age=20') //20秒
    res.json({
        name: 'cache',
        version: '1.0.0'
    })
})


app.listen(3000, () => {
    console.log('Example app listening on port 3000!')
})

Nodejs 第六十章（http缓存）

协商缓存介绍

当涉及到缓存机制时，强缓存优先于协商缓存。当资源的强缓存生效时，客户端可以直接从本地缓存中获取资源，而无需与服务器进行通信。强缓存的判断是通过缓存头部字段来完成的，例如设置了合适的Cache-Control和Expires字段。

如果强缓存未命中（例如max-age过期），或者服务器响应中设置了Cache-Control: no-cache，则客户端会发起协商缓存的请求。在协商缓存中，客户端会发送带有缓存数据标识的请求头部字段，以向服务器验证资源的有效性。

服务器会根据客户端发送的协商缓存字段（如If-Modified-Since和If-None-Match）来判断资源是否发生变化。如果资源未发生修改，服务器会返回状态码 304（Not Modified），通知客户端可以使用缓存的版本。如果资源已经发生变化，服务器将返回最新的资源，状态码为 200。

协商缓存(Last-Modified)

Last-Modified 和 If-Modified-Since：服务器通过 Last-Modified 响应头告知客户端资源的最后修改时间。客户端在后续请求中通过 If-Modified-Since 请求头携带该时间，服务器判断资源是否有更新。如果没有更新，返回 304 状态码。

nodejs端

import express from 'express'
import cors from 'cors'
import fs from 'node:fs'
const getModifyTime = () => {
    return fs.statSync('./index.js').mtime.toISOString() //获取文件最后修改时间
}
const app = express()
app.use(cors())
app.get('/api', (req, res) => {
    res.setHeader('Cache-Control', 'no-cache, max-age=2592000')//表示走协商缓存
    const ifModifiedSince = req.headers['if-modified-since'] //获取浏览器上次修改时间
    res.setHeader('Last-Modified', getModifyTime())
    if (ifModifiedSince && ifModifiedSince === getModifyTime()) {
        console.log('304')
        res.statusCode = 304
        res.end()
        return
    } else {
        console.log('200')
        res.end('value')
    }
})


app.listen(3000, () => {
    console.log('Example app listening on port 3000!')
})

Nodejs 第六十章（http缓存）

协商缓存(ETag)

ETag 和 If-None-Match：服务器通过 ETag 响应头给资源生成一个唯一标识符。客户端在后续请求中通过 If-None-Match 请求头携带该标识符，服务器根据标识符判断资源是否有更新。如果没有更新，返回 304 状态码。

ETag 优先级比 Last-Modified 高

import express from 'express'
import cors from 'cors'
import fs from 'node:fs'
import crypto from 'node:crypto'
const getFileHash = () => {
    return crypto.createHash('sha256').update(fs.readFileSync('index.js')).digest('hex')
}
const app = express()
app.use(cors())
app.get('/api', (req, res) => {
    res.setHeader('Cache-Control', 'no-cache, max-age=2592000')//表示走协商缓存
    const etag = getFileHash()
    const ifNoneMatch = req.headers['if-none-match']
    if(ifNoneMatch === etag) {
        res.sendStatus(304)
        return
    }
    res.setHeader('ETag', etag)
    res.send('Etag')
    
})


app.listen(3000, () => {
    console.log('Example app listening on port 3000!')
})

Nodejs 第六十章（http缓存）