HTTP笔记4：缓存控制

最新推荐文章于 2023-01-19 08:30:40 发布
最新推荐文章于 2023-01-19 08:30:40 发布
阅读量225 收藏
点赞数
分类专栏： HTTP深入浅出
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44145258/article/details/105181134
版权

缓存的进化阶段

1 无缓存

优点：简单
缺点：每次的请求资源服务器都返回原始文件，浪费带宽

2 有缓存无更新

第一次请求后，服务器发送完整的文件，浏览器将返回的完整文件存到本地缓存，下次再发送同意请求之后，就从本地获取。
优点：节省带宽
缺点：若服务器的文件更新，浏览器本地缓存任然无更新

3 缓存加上更新（GMT时间格式）

服务器在发送问响应的时候，在响应报文加上了额外的字段：过期时间如Expires: Mon,10 Dec 1990 02:25:22GMT，告诉浏览器此次发送的资源什么时候过期，如果过期，需要重新给服务器发送请求。
优点：缓存可控
缺点：控制功能单一，这种格式更改本地时间后就相当于失效了

4 缓存控制

响应头附带额外信息Cache-Control: max-age=300；字段可对应不同的值，使得缓存控制功能强大

  1. Public表示响应可被任何中间节点缓存：如 Browser <-- proxy1 <-- proxy2 <-- Server，中间的proxy可以缓存资源，比如下次再请求同一资源proxy1直接把自己缓存的东西给 Browser 而不再向proxy2要。
  2. Private表示中间节点不允许缓存：对于Browser <-- proxy1 <-- proxy2 <-- Server，proxy 会老老实实把Server 返回的数据发送给proxy1,自己不缓存任何数据。当下次Browser再次请求时proxy会做好请求转发而不是自作主张给自己缓存的数据。
  3. no-cache表示不使用： Cache-Control的缓存控制方式做前置验证，而是使用 Etag 或者Last-Modified字段来控制缓存
    no-store ，真正的不缓存任何东西。浏览器会直接向服务器请求原始文件，并且请求中不附带 Etag 参数(服务器认为是新请求)。
  4. max-age，表示当前资源的有效时间，单位为秒。

缺点：如果资源时间上过期，但是服务器实际并未更新，服务器仍然会发送新的完整资源给浏览器，同样浪费带宽
所以资源过期后，先判断是否真的有更新，没有的话就只返回一个未更改的消息就行了。

5 缓存控制的升级

响应头的格外信息中添加Etag
Etag是 对资源的编码，如果资源在服务端未被修改，这个值就不会变

Cache-Control: max-age=300；
ETag:W/"e-cbxLFQW5zapn79tQwb/g6Q"

时间过期的时候，发送请求给服务器，附带上Etag，服务器接收到请求后，先对Etag进行比对，不相等才发送更新的资源

与 ETag 类似功能是Last-Modified/If-Modified-Since

  • 当资源过期时（max-age超时），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since,表示上次服务器告知的文件修改的时间,
  • web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对
  • 若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（200）
  • 若最后修改时间较旧，说明资源无新修改，则响应HTTP 304 ，告知浏览器继续使用所保存的cache。

nodejs写一个简单的静态服务器

/* 一个最简单的静态服务器 */
/* 访问 http://localhost:8080/index.html */

const http = require('http')
const fs = require('fs')
const path = require('path')


http.createServer((req, res) => {
    console.log(req)
    fs.readFile(path.join(__dirname, req.url), (err, data) => {
        if (err) {
            res.writeHead(404, 'not found')
            res.end('Oh, Not Found')
        } else {
            res.writeHead(200, 'OK')
            res.end(data)
        }
    })
}).listen(8080)
console.log('Visit http://localhost:8080')

在这里插入图片描述

1 expires 与pragma : no-cache (http 1.0)

expires GMT

const http = require('http')
const fs = require('fs')
const path = require('path')


http.createServer((req, res) => {
    let filePath = path.join(__dirname, req.url)
    fs.readFile(filePath, (err, data) => {
        if (err) {
            res.writeHead(404, 'not found')
            res.end('Oh, Not Found')
        } else {
            // 发送文件之前加设置响应头
            // GTM 时间格式

            let date = new Date(Date.now() + 1000 * 15).toGMTString()
            res.setHeader('Expires', date)
            
			// 同时写 no-cache优先级更高
            //res.setHeader('Expires', 'Wed, 23 Jan 2019 07:40:51 GMT')
            //res.setHeader('Pragma', 'no-cache')

            res.writeHead(200, 'OK')
            res.end(data)
        }
    })
}).listen(8080)
console.log('Visit http://localhost:8080')

开启服务器，响应头成功加上GMT字段
在这里插入图片描述
在这里插入图片描述

pragma : no-cache 不保存缓存

            res.setHeader('Pragma', 'no-cache')

每次返回响应之后清除浏览器缓存，不会出现 form-memory或disk这种字段

no-cache的优先级要高

同时设置，仍然执行no-cache

2 Cache-Control

请求报文

  • Cache-Control: max-age=10 //hi,(代理)服务器我想要
  • Cache-Control: no-cache // hi,(代理)服务器，不要给我缓存的东西，我要新鲜完整的内容
  • Cache-Control: no-store // hi,(代理)服务器, 这是机密请求，别缓存数据，给我最新的

响应报文

  • Cache-Control: max-age=10 //hi,浏览器，把这个文件信息保存起来。当再次需要它时，如果是在10秒以内发起的请求则直接使用缓存(200, from memory cache)，否则重新发起网络请求找我要(200)
  • Cache-Control: no-cache // hi,浏览器(代理服务器)，你可以缓存，但每次需要向我确认一下
  • Cache-Control: no-store // hi,浏览器（代理服务器），这是机密信息，别缓存

max-age=10

const http = require('http')
const fs = require('fs')
const path = require('path')


http.createServer((req, res) => {
    let filePath = path.join(__dirname, req.url)
    fs.readFile(filePath, (err, data) => {
        if (err) {
            res.writeHead(404, 'not found')
            res.end('Oh, Not Found')
        } else {

            // max-age=10 表示发出的资源期限是10s
            res.setHeader('Cache-Control', 'max-age=10') 
            
            res.writeHead(200, 'OK')
            res.end(data)
        }
    })
}).listen(8080)
console.log('Visit http://localhost:8080')

在这里插入图片描述
在这里插入图片描述

  1. 再次请求index时 浏览器会在请求头设置max-age: 0 告诉浏览器不要拿缓存，而是直接请求服务器拿新资源，而其他资源没有这个
  2. 如果浏览器不加这个字段，下次访问，index仍然走本地缓存，页面就无法更新

no-cache 再次请求不会再访问缓存

no-store 告诉浏览器，不再保存到缓存

直接进行浏览器和服务器之间的资源转换
no-cache 实际上是保存在本地缓存里的，只是不访问

3 Last-Modified 字段对缓存的控制

完整步骤：

  1. 第一次请求，服务器获取文件修改时间，并设置在响应头中
  2. 后几次请求，比较新旧文件修改时间，不同则修改，相同则返回状态码304.
const http = require('http')
const fs = require('fs')
const path = require('path')


http.createServer((req, res) => {
    let filePath = path.join(__dirname, req.url)
    fs.readFile(filePath, (err, data) => {
        if (err) {
            res.writeHead(404, 'not found')
            res.end('Oh, Not Found')
        } else {
        
            // 获取文件的修改时间
            let mtime = Date.parse(fs.statSync(filePath).mtime)
            //10秒内，浏览器直接从自己本地拿，10秒后找服务器要。如果没修改，告诉浏览器没修改就行，如果修改了，给浏览器最新的
            res.setHeader('Cache-Control', 'max-age=10')
            // 第一次访问：服务器判断请求头上有没有字段，没有就加上字段Last-Modified 代表修改时间
            if (!req.headers['if-modified-since']) {
                res.setHeader('Last-Modified', new Date(mtime).toGMTString())
                res.writeHead(200, 'OK')
                res.end(data)
            } else { // 后几次访问，
                let oldMtime = Date.parse(req.headers['if-modified-since'])
                if (mtime > oldMtime) { // 判断最新的修改时间大于上一次修改时间，表示这个文件已经被修改过了，要重新发一次新文件
                    res.setHeader('Last-Modified', new Date(mtime).toGMTString())
                    res.writeHead(200, 'OK')
                    res.end(data)
                } else { // 否则就不修改
                    res.writeHead(304)
                    res.end()
                }
            }

        }
    })
}).listen(8080)
console.log('Visit http://localhost:8080')

拆分步骤

1 获取文件修改时间，并设置到响应头
      // 步骤一：设置文件修改时间
       let stat = fs.statSync(filePath)
       console.log(stat.mtime)
       let modifyDate = new Date(Date.parse(stat.mtime)).toGMTString()
       console.log(modifyDate)
       res.setHeader('Cache-control', 'no-cache')
       res.setHeader('Last-Modified', modifyDate)
       res.writeHead(200, 'OK')
       res.end(data)

在这里插入图片描述
现在修改下文件
在这里插入图片描述
文件最后修改时间就更新了
在这里插入图片描述

2 初次请求时设置字段，之后的请求只需对比文件的修改时间
  console.log(req.headers)
    let mtime = Date.parse(fs.statSync(filePath).mtime)
    if (!req.headers['if-modified-since']) {
        res.setHeader('Cache-control', 'no-cache')
        res.setHeader('Last-Modified', new Date(mtime).toGMTString())
        res.writeHead(200, 'OK')
        res.end(data)
    } else {
        let oldMtime = Date.parse(req.headers['if-modified-since'])
        if (mtime > oldMtime) {
            res.setHeader('Last-Modified', new Date(mtime).toGMTString())
            res.writeHead(200, 'OK')
            res.end(data)
        } else {
            res.writeHead(304)
            res.end()
        }
    }

首次请求先关掉缓存，便于测试
在这里插入图片描述
之后的请求，文件并未修改，返回304，并且response里仍然有响应体，这就是从缓存中拿到的
在这里插入图片描述
单独修改css文件之后，只有css返回200，表示已重新请求响应
在这里插入图片描述

存在的问题

  • 缓存全由浏览器控制，因为加了字段 cache-control：no-cache
  • 浏览器无法控制缓存

面试问题
cache-control：no-cache
LastModified: GMT时间格式
服务器完全控制缓存，服务起来判断给不给浏览器更新页面

4 Etag字段对缓存的控制

  1. 第一次请求设置etag字段：字段里存放的是文件的md5值（通过base64展示）
  2. 每次文件修改，对应md5值也将修改
  3. 所以对比每次的md5值相同时，就返回304，不相同才请求到服务器，更新文件，并更换新文件的md5值
const http = require('http')
const fs = require('fs')
const path = require('path')
const crypto = require('crypto')

http.createServer((req, res) => {
    let filePath = path.join(__dirname, req.url)
    fs.readFile(filePath, (err, data) => {
        if (err) {
            res.writeHead(404, 'not found')
            res.end('Oh, Not Found')
        } else {

            console.log(req.headers['if-none-match'])
            let oldEtag = req.headers['if-none-match']
            if (!oldEtag) {
                let md5 = crypto.createHash('md5')
                // 得到内容的md5值，每次文件内容改变之后，md5值一定会改变
                console.log(md5.update(data).digest('base64'))
                res.setHeader('Etag', md5.update(data).digest('base64'))
                res.writeHead(200, 'OK')
                res.end(data)
            } else {
                let newEtag = crypto.createHash('md5').update(data).digest('base64')
                if (oldEtag !== newEtag) {
                	// 更换掉新的tag值
                    res.setHeader('Etag', newEtag)
                    res.writeHead(200, 'OK')
                    res.end(data)
                } else {
                    res.writeHead(304)
                    res.end()
                }
            }
        }
    })
}).listen(8080)
console.log('Visit http://localhost:8080')

在这里插入图片描述
在这里插入图片描述
修改css文件之后
在这里插入图片描述

前端开发者无论后端用什么缓存策略，只需要每次更新时修改文件名就行了，这样每次拿到的就是最新的

斜光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
安全：Web安全学习笔记
02-26
通过控制HTTP的请求头，可以控制：客户端缓存、Cookie、请求编码、相应编码等。请求内容向服务器提交数据（POST和GET），响应内容向浏览器发送数据。Cookie包含在每个请求和响应中，因此客户端和服
Nginx 关于http中Cache-Control详解
kane_canpower的博客
02-22 5960
为了优化网站，需要在缓存中着手看看，看到有关nginx cache—control 的设置网页的缓存是由http消息头中的“Cache-control”来控制的，常见的取值有public、private、no-cache、max-age、must-revalidate等，默认为private。其作用根据不同的重新浏览方式分为以下几种情况：public新打开一个窗口： 不会去访问服务器 原页面回车
http Cache-Control详解及nginx设置Cache-Control
wangjun5159的专栏
01-19 6747
no-store只能阻止新的资源不会被缓存，不能阻止已经缓存的资源仍被使用，添加max-age:0，可以清除旧缓存；这个设置意味着每次请求都会去源服务器获取资源，状态码就是200；属于http1.0规范，一般来说现在的通信端都用http1.1，所以不缓存时，没必要设置此header了。
cache-control
hugui123456ccc的专栏
08-26 292
网页的缓存是由 HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must- revalidate等，默认为private。其作用根据不同的重新浏览方式分为以下几种情况： （1） 打开新窗口 值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。 而如果指...
HTTP缓存带来的“bug”--HTTP 协议 Cache-Control
weixin_30924239的博客
03-29 227
问题描述 先说背景。网站是用PHP开发的，未用任何框架，代码结构也非常简单。运行于阿里云服务器，并采用其CDN来做分发。根据业务需求，有的页面会判断用户浏览器类型，依此来选择PC或者手机端内容。 在一次上线过程中，遇到比较诡异的问题：用PC和手机分别访问页面时，网页内容未根据浏览器类型来区分。而在开发环境，页面却能正常显示。仔细排查了代码，没有发现问题出在什么地方。而线上环境也不好调试，...
浏览器通过response设置缓存几种方法简解
一曲破东风的专栏
02-05 6428
浏览器通过response设置缓存几种方法简解
ENPM:Erciyes笔记分享中心
06-19
Laravel 试图通过简化大多数 Web 项目中使用的常见任务（例如身份验证、路由、会话和缓存）来减轻开发过程中的痛苦。 Laravel 的目标是在不牺牲应用程序功能的情况下使开发过程对开发人员来说是一种愉快的过程。 ...
FELearningNotes:我的前端学习笔记
05-15
HTTP协议TCP/IP五层协议osi七层协议HTTP缓存控制小结前端安全第四部分前端高级技巧函数节流前端跨域前端跨域整理CORS技术整理四种前端渲染方式React+Router+Redux SSR 项目搭建第五部分开发性问题一个优秀的前端...
Zynq-MMU-Caches-Control:控制 Zynq Cortex A9 MMU 缓存的指南，以及展示如何在 Xilinx SDK 中创建自定义软件库的指南
06-11
Zynq MMU 缓存控制 控制 Zynq Cortex A9 MMU/缓存的指南 （还展示了如何在 Xilinx SDK 中创建自定义软件库） 这是一份应用笔记，适用于希望通过 Xilinx Zynq SoC 器件控制 Cortex A9 器件上的缓存/MMU 的用户。 此...
response.setHeader问题
qq_39800695的博客
05-17 706
禁用IE缓存 HTTP消息报头包括普通报头、请求报头、响应报头、实体报头。 普通报头中的Cache-Control用于指定缓存指令，缓存指令是单向的（响应中出现的缓存指令在请求中未必会出现），且是独立的（一个消息的缓存指令不会影响另一个消息处理的缓存机制），HTTP1.0使用的类似的报头域为Pragma。 请求时的缓存指令包括：no-cache（用于指示请示或响应消息不能缓存）、no-store、max-age、max-stale、min-fresh、only-if-cach...
初解 HTTP 缓存
weixin_30828379的博客
08-12 89
Cache-Control 希望某请求被缓存，加一个响应头 response.setHeader('Cache-Control','max-age=300000000') max-age=300000000表示300000000s内再次执行，直接从缓存中读取内容，不请求，下载时间为0，不会重新下载 注意： 1.首页不要设置缓存，特别是html 2.通常max-age设置的...
通过HTTP Header控制缓存
weixin_30426957的博客
05-16 361
我们经常通过缓存技术来加快网站的访问速度，从而提升用户体验。HTTP协议中也规定了一些和缓存相关的Header，来允许浏览器或共享高速缓存缓存资源。这些Header包括： Last-Modified 和 If-Modified-Since ETag 和 If-None-Match Expires Cache-Control 　　以上Header又可以分成两种类型： 协商缓存...
浏览器缓存机制介绍与缓存策略剖析
最恨不过不努力
01-09 5744
浏览器缓存机制介绍与缓存策略剖析 缓存可以减少网络 IO 消耗，提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。对于这个操作的必要性，Chrome 官方给出的解释似乎更有说服力一些： 通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成...
关于HTTP缓存Cache-Control
Wang的专栏
02-14 2584
关于Cache-Control的特性 可缓存性 代表http请求返回的内容所经过的任何路径中, 包括中间的http代理服务器, 以及发出请求的客户端浏览器 都可以对返回内容进行缓存的操作，也就是把这份数据存在本地，下一次可以直接读取而非重新获取 网络中有很多代理服务器和发起的客户端都可以进行缓存的操作，它的可缓存性就是指那些地方可以执行缓存操作 public：表示任何地方都可以进行缓存 private：表示发起请求的浏览器才可以进行缓存 no-cache：不表示不缓存，实际上，在每次请求中使用任何缓存响应
说说HTTP缓存Cache-Control响应头
IT部落格
02-20 9356
前言 除非特别说明，否则以下内容和结论均经过实际测试并验证，测试用的浏览器：Google Chrome 98.0.4758.102正式版。 例子 先看下响应头Cache-Control的一些常见用法。 第一种：Cache-Control:max-age=N 浏览器获取到资源内容后，将资源内容缓存在本地，缓存有效期是N秒。 若过期前再次访问资源，直接使用本地缓存；过期后再访问，则向服务器发请求，若服务器检查资源没有更新，则返回304状态码；如果有更新，则返回200状态码以及新的资源内容。同时浏览器延长本地资源
HTTP的缓存设置Cache-Control
学习笔记
04-16 5913
HTTP可缓存性包括: public：HTTP请求返回时，经过的代理服务器以及客户端都可以对内容进行缓存。 private：只有发起请求的浏览器可以进行缓存 no-cache：本地和代理服务器可以缓存，但是每次使用缓存时都要到服务器验证一下，服务器返回可以使用缓存才能生效。 max-age ：可以设置缓存的有效期 s-maxage：代理服务器的缓存有效期。同时设置max-age和s-maxag...
HTTP报文头解析（图文）
热门推荐
windyf2013的博客
09-05 1万+
一.通用头部字段 （General Header Fields） 该字段在请求头和响应头都会使用到，下方是常用的通用头部字段： 1、Cache-Control 用来操作缓存的工作机制，下方截图响应头中的的Cache-Control的参数为private和max-age=10。private缓存是私有的，仅像特定用户提供相应的缓存信息。如果是public，那么就意味着可向任意方提供
redission笔记
最新发布
08-24
4. 分布式计数器：Redission 提供了分布式计数器的实现，可以用于实现在分布式环境下进行计数操作，并且保持计数的一致性。 5. 缓存支持：Redission 提供了缓存支持，可以将数据缓存到分布式环境中，提高系统的性能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值