关于http的缓存的一些实践

最新推荐文章于 2024-06-02 14:54:06 发布
最新推荐文章于 2024-06-02 14:54:06 发布
阅读量137 收藏
点赞数
文章标签： 数据库 嵌入式 面试
原文链接：https://juejin.im/post/5c836dea5188257e3941b456
版权

前言

http的缓存是老生常谈的问题，基本面试专用的，看到的文章挺多的，但都是一些原理性的文章，基本没有真正实践过怎么缓存，就会形成一种道理大家都懂，但谁真正实践过呢，从而到用的时候，却发现不会怎么做缓存，如何配置呢，也一无所知。所以本文从理论和实践上试了一下怎么认识缓存。这里有借鉴前辈们的经验文章，但对于生产环境上服务器的缓存还是懵懂的，请各位大佬赐教，同时欢迎各位大佬指正。

缓存的规则

我们知道HTTP的缓存属于客户端缓存，后面会提到为什么属于客户端缓存。所以我们认为浏览器存在一个缓存数据库，用于储存一些不经常变化的静态文件（图片、css、js等）。我们将缓存分为强制缓存和协商缓存。下面我将分别详细的介绍这两种缓存的缓存规则。

强制缓存

当缓存数据库中已有所请求的数据时。客户端直接从缓存数据库中获取数据。当缓存数据库中没有所请求的数据时，客户端的才会从服务端获取数据。

协商缓存

又称对比缓存，客户端会先从缓存数据库中获取到一个缓存数据的标识，得到标识后请求服务端验证是否失效（新鲜），如果没有失效服务端会返回304，此时客户端直接从缓存中获取所请求的数据，如果标识失效，服务端会返回更新后的数据。

小贴士：

我们可以看到两类缓存规则的不同，强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互。 两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。

缓存的方案

上面的内容让我们大概了解了缓存机制是怎样运行的，但是，服务器是如何判断缓存是否失效呢？我们知道浏览器和服务器进行交互的时候会发送一些请求数据和响应数据，我们称之为HTTP报文。报文中包含首部header和主体部分body。与缓存相关的规则信息就包含在header中。boby中的内容是HTTP请求真正要传输的部分。举个HTTP报文header部分的例子如下：

HTTP/1.1 200 OK
Server: nginx/1.14.0
Date: Sat, 09 Mar 2019 02:59:02 GMT
Content-Type: application/javascript; charset=utf8
Content-Length: 1544092
Last-Modified: Sat, 09 Mar 2019 00:52:32 GMT
Connection: keep-alive
ETag: "5c830e50-178f9c"
Accept-Ranges: bytes
复制代码
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Host: xlink-iot.qinyuan.cn
If-Modified-Since: Fri, 08 Mar 2019 06:56:18 GMT
If-None-Match: "5c821212-178f9c"
Referer: https://xlink-iot.qinyuan.cn/iot/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
复制代码

接下来我们将对HTTP报文中出现的与缓存规则相关的信息做出详细解释。（我们依旧分为强制缓存和协商缓存两个方面来介绍）

强制缓存

对于强制缓存，服务器响应的header中会用两个字段来表明——Expires和Cache-Control

Expires

Exprires的值为服务端返回的数据到期时间。当再次请求时的请求时间小于返回的此时间，则直接使用缓存数据。但由于服务端时间和客户端时间可能有误差，这也将导致缓存命中的误差，另一方面，Expires是HTTP1.0的产物，故现在大多数使用Cache-Control替代。

Cache-Control

Cache-Control有很多属性，不同的属性代表的意义也不同。 private：客户端可以缓存 public：客户端和代理服务器都可以缓存 max-age=t：缓存内容将在t秒后失效 no-cache：需要使用协商缓存来验证缓存数据 no-store：所有内容都不会缓存。

协商缓存

协商缓存需要进行对比判断是否可以使用缓存。浏览器第一次请求数据时，服务器会将缓存标识与数据一起响应给客户端，客户端将它们备份至缓存中。再次请求时，客户端会将缓存中的标识发送给服务器，服务器根据此标识判断。若未失效，返回304状态码，浏览器拿到此状态码就可以直接使用缓存数据了。 对于协商缓存来说，缓存标识我们需要着重理解一下，下面我们将着重介绍它的两种缓存方案。

Last-Modified

Last-Modified： 服务器在响应请求时，会告诉浏览器资源的最后修改时间。

if-Modified-Since: 浏览器再次请求服务器的时候，请求头会包含此字段，后面跟着在缓存中获得的最后修改时间。服务端收到此请求头发现有if-Modified-Since，则与被请求资源的最后修改时间进行对比，如果一致则返回304和响应报文头，浏览器只需要从缓存中获取信息即可。 从字面上看，就是说：从某个时间节点算起，是否文件被修改了

  1. 如果真的被修改：那么开始传输响应一个整体，服务器返回：200 OK
  2. 如果没有被修改：那么只需传输响应header，服务器返回：304 Not Modified

Last-Modified 有个问题，因为如果在服务器上，一个资源被修改了，但其实际内容根本没发生改变，会因为Last-Modified时间匹配不上而返回了整个实体给客户端（即使客户端缓存里有个一模一样的资源）。为了解决这个问题，HTTP1.1推出了Etag。

Etag

Etag： 服务器响应请求时，通过此字段告诉浏览器当前资源在服务器生成的唯一标识（生成规则由服务器决定）

If-None-Match： 再次请求服务器时，浏览器的请求报文头部会包含此字段，后面的值为在缓存中获取的标识。服务器接收到次报文后发现If-None-Match则与被请求资源的唯一标识进行对比。

  1. 不同，说明资源被改动过，则响应整个资源内容，返回状态码200。
  2. 相同，说明资源无心修改，则响应header，浏览器直接从缓存中获取数据信息。返回状态码304.

缓存的优点

  1. 减少了冗余的数据传递，节省宽带流量
  2. 减少了服务器的负担，大大提高了网站性能
  3. 加快了客户端加载网页的速度 这也正是HTTP缓存属于客户端缓存的原因。

问题

强缓存

1.服务器怎么返回数据到期时间，怎么缓存（需要服务器进行配置）
Cache-Control

let http = require('http')
let url = require('url')
let fs = require('mz/fs')
let path = require('path');
let p = path.resolve(__dirname);
http.createServer(async function(req, res) {

    let {pathname} = url.parse(req.url);
    let realPath = path.join(p, pathname);
    console.log(realPath, '来请求服务了')
    try{
        let statObj = await fs.stat(realPath);
        res.setHeader('Cache-Control','max-age=180')  //强制缓存 180s内不需要再次请求服务器
        //res.setHeader('Cache-Control','no-cache')

        res.setHeader('Content-Type',require('mime').getType(realPath)+';charset=utf8')
       fs.createReadStream(realPath).pipe(res)
    }catch(e) {
        res.statusCode = 404;
        res.end('404')
    }
}).listen(3000)
复制代码
// 我们请求一个本地的文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <!-- <meta http-equiv="Cache-control" content="no-cache"> -->
</head>
<body>
    
    <img src="/he.png"/>
</body>
<script src="./index.js"></script>
</html>
复制代码

返回头：

Cache-Control: max-age=180
Connection: keep-alive
Content-Type: text/html;charset=utf8
Date: Sat, 09 Mar 2019 06:42:58 GMT
Transfer-Encoding: chunked
复制代码

上述中的文件，针对强制缓存，除html文件外其他的资源在180s内均在缓存中读取，另外强调一点:主网页只有对比缓存没有强制缓存，html文件每次都是重新请求服务器文件即使设置了<meta http-equiv="Cache-Control" content="max-age=180" />

expires
//Expires:Sun, 22 Jul 2018 02:43:42 GMT
//备注：如果Cache-Control和Expires同时存在，Cache-Control说了算
res.setHeader('Expires', new Date(Date.now() + 10*1000).toGMTString()) //强制缓存的另一种方式
复制代码
2.客户端需要如何设置

没有，暂时找不到

协商缓存

//对比缓存 为了更加明显的看到对比缓存，我们将在以下的代码中都将强制缓存关闭
//res.setHeader('Cache-Control','no-cache')

//响应头设置了res.setHeader('Last-Modified',statObj.ctime.toGMTString())
//请求头就会带上req.headers['if-modified-since']

let http = require('http')
let url = require('url')
let util = require('util')
let fs = require('mz/fs')
let stat = util.promisify(fs.stat);
let path = require('path');
let p = path.resolve(__dirname);
http.createServer(async function(req, res) {
    let {pathname} = url.parse(req.url);
    let realPath = path.join(p, pathname);
    console.log(realPath)
    try{
        let statObj = await fs.stat(realPath);
        console.log(statObj)
        // res.setHeader('Cache-Control','max-age=10')  //强制缓存  10s内不需要再次请求服务器
        res.setHeader('Cache-Control','no-cache')
        res.setHeader('Content-Type',require('mime').getType(realPath)+';charset=utf8')
        res.setHeader('Expires', new Date(Date.now() + 10*1000).toGMTString()) //强制缓存 因为上面设置了no-cache，所以这里的设置其实无效
        let since = req.headers['if-modified-since'];
        if (since === statObj.ctime.toGMTString()) {
            res.statusCode = 304                      //服务器的缓存
            res.end();
        } else {
            res.setHeader('Last-Modified',statObj.ctime.toGMTString())
            fs.createReadStream(realPath).pipe(res)
        }
    }catch(e) {
        res.statusCode = 404;
        res.end('404')
    }
}).listen(3000)

复制代码

返回头

Cache-Control: no-cache
Connection: keep-alive
Content-Type: text/html;charset=utf8
Date: Sat, 09 Mar 2019 07:22:17 GMT
Last-Modified: Sat, 09 Mar 2019 07:04:41 GMT
Transfer-Encoding: chunked
复制代码

在浏览器打开localhost:3000/index.html 刷新看到就是304，我们返回状态码304，浏览器就乖乖地去读缓存中的文件了。我们稍微改动一下index.html就可以看到 200

Etag

//对比缓存
//Etag内容的标识 
// 响应头设置了res.setHeader('Etag',statObj.size.toString());  这里设置的是文件大小
//请求头就会带上req.headers['if-none-match'];
let http = require('http');
let util = require('util');
let fs = require('fs');
let stat = util.promisify(fs.stat);
let url = require('url');
let path = require('path');
let p = path.resolve(__dirname);

// 比较内容 stat.size
// 第一次请求Etag:内容的标识  
// 第二次在请求我的时候 if-none-match 

http.createServer(async function(req,res){
    let {pathname} = url.parse(req.url);
    let realPath = path.join(p,pathname);
    try{
        let statObj = await stat(realPath);
        console.log(realPath) 
        res.setHeader('Cache-Control','no-cache');
        let match = req.headers['if-none-match'];
        if(match){
            if(match === statObj.size.toString()){
                res.statusCode = 304;
                res.end();
            }else{
                res.setHeader('Etag',statObj.size.toString());
                fs.createReadStream(realPath).pipe(res);
            }
        }else{
            res.setHeader('Etag',statObj.size.toString());
            fs.createReadStream(realPath).pipe(res);
        }
       
    }catch(e){
        res.statusCode = 404;
        res.end(`not found`);
    }
}).listen(3000);
复制代码

两种缓存的区别

  1. 强制缓存
  • 设置强制缓存的方式就是 res.setHeader('Cache-Control','max-age=10')
  • res.setHeader('Expires', new Date(Date.now() + 10*1000).toGMTString())
  • 以上两种以第一种方式取决定作用
  1. 对比缓存
  • 通过时间对比 Last-Modified ---- if-modified-since
  • 通过标识对比 Etag ---- if-none-match

总结

缓存只能服务端配置！！！！，目前暂时没有找到客户端能做的事，html5的meta标签好像在也没什么用，感谢大佬指正

参考文档

聊聊web缓存那些事！

HTTP----HTTP缓存机制

转载于:https://juejin.im/post/5c836dea5188257e3941b456

weixin_34018169
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IIS的内容缓存过期机制实践 有效提高站点性能
09-30
目前，随着网页内容越来越绚烂，访问速度却令人越来越不满。实践证明，正确设置Http Response Header中的Expires头将有助于提高网页访问速度
漫谈Web缓存
02-26
之前，对于缓存的认知一直停留在看《HTTP权威指南》和一些相关帖子的深度，过了一段时间，又总是忘记，正好最近不是很忙，结合内网上的一些参考资料，结合实践，试着全面解析一下缓存以及其最佳实践。我们日常所见...
HTTP缓存深入实践
xyr05288的专栏
04-20 612
转载自：https://www.jianshu.com/p/32733a356acf网络特有的延迟以及数据传输的成本，制约互联网快速获取Web资源。为此，HTTP协议引入缓存以空间换时间，使浏览器缓存和重用已获取的资源，解决网络延迟和数据传输成本高的问题，提升访问体验。随着HTTP协议1.0-&gt;1.1-&gt;2的演进，关于缓存控制的部分有一些变化。但我觉着，在开发Web服务时，首先要关注请...
HTTP协商缓存实践
YiYing's sharing
09-19 1065
从浏览器的缓存类型上来讲分为强缓存和协商缓存，之前写过一篇文章《HTTP缓存详解》做了详细的整理。  目前做的知识管理产品，为了首页能够更快的加载，需要对首页请求的资源做缓存整理。通过整理分析，决定对css、js做强缓存处理；对个人头像的请求做协商缓存处理；  为什么要头像不做强缓存处理呢？原因为目前的头像都是通过人员的ID来获取，而不是通过头像ID来获取。这样做的好处为在后台获取相关数据时，比如排
http抓包实践--（三）--HTTP协议中的缓存
weixin_42349568的博客
09-13 234
一，HTTP缓存的概念 是指当web请求抵达缓存时，如果本地有“已缓存”的副本，就可以从本地存储设备而不是从原始服务器中提取这个文档。 二，判断缓存新鲜度的方法 1，If-Modified-Since 当检查缓存没有过期的时候，就只返回状态码304，然后客户端直接使用缓存。 当检查缓存已经过期了，则需要返回完整的数据文件了（网络传递文件比传递一个304状态码需要更长时间），也就是说，使用缓存，实际上省下来的就是这个传递文件的时间。 具体的表现在fiddler中就如下图所示： 2，使用ETag 使用i
http缓存详解（ 直接看图，超易懂 ）
tager168的博客
10-23 2843
前言 你了解http缓存吗？http请求在什么状态下会返回304状态码？ 下面5张图，花了一晚上整理画出来????，图画的不太好看，但意思十分明确，不要太嫌弃喔。相信看完后，能让你对http缓存有比较深刻????的了解。 Http 缓存机制作为 web性能优化的重要手段，对于从事 Web开发的同学们来说，应该是知识体系库中的一个基础且重要的环节，同时对于有追求的前端童鞋来说也是必备的知识技能。 知识铺垫 了解浏览器和服务器间通信时的请求报文及响应报文,HTTP报文就是浏览器和服务器间通信时发送及响应的数据块
HTTP | 强缓存与协商缓存
Ethan's Blog
04-19 1195
一个web应用，需要各式各样的资源（html/css/js, 图片，字体，。。。），浏览器在取这些资源都是通过http请求完成。为了给用户好的体验，需要让这些请求尽可能快和少（减少冗余请求）。HTTP缓存机制就是 针对不同资源类型，采取不同的缓存策略，避免不必要的请求！
HTTP的缓存机制是什么？
努力是为了站在万人之中，成为别人的光
06-29 7562
在Web开发中，优化网站性能是非常重要的一项任务。HTTP缓存是提升网站性能的重要策略之一，通过合理使用缓存机制可以减少服务器的负载，降低网络延迟，提升用户的访问速度和体验。本文将介绍HTTP缓存的基本原理和实现方法，并提供示例代码帮助读者更好地理解和应用HTTP缓存。HTTP缓存机制是指在HTTP协议中定义的一种数据缓存机制，它通过在客户端或代理服务器中存储响应数据，以便在后续请求中复用这些数据，从而减少对服务器的请求和响应次数。
HTTP缓存
obj_obj_baby的博客
07-06 2082
HTTP缓存
浏览器HTTP缓存策略
zhouhao620的博客
04-26 2927
使用缓存是前端性能优化的重要方式，既可以提高响应的速度又可以减少不必要的重复请求，从而提高服务器的吞吐量。但是有时候缓存并不适用于所有情况，有时候反而会使用户体验变差，因此需要根据不同的请求制定不同的缓存策略。
HTTP缓存——强制缓存和协商缓存
weixin_52148548的博客
05-19 2525
目录为什么需要缓存？什么是缓存？缓存的原理：缓存的分类强制缓存Expires**expires的不足：**cache-Controlcache-control的属性协商缓存Last-Modified和If-Modified-Since**Last-Modified的不足**：ETag和If-None-Match**ETag的不足：**缓存决策树 为什么需要缓存？ 在任何一个前端项目中，访问服务器获取数据都是很常见的事情，但是如果相同的数据被重复请求了不止一次，那么多余的请求次数必然会浪费网络带宽，以及延迟浏
HTTP缓存-http强制缓存与协商缓存
moxunjinmu的博客
02-15 2050
http缓存 缓存介绍 缓存的原理：在首次请求后保存一份请求资源的响应副本，当用户再次发起相同请求后，如果判断缓存命中则拦截请求，将之前存储的响应副本返回给用户，从而避免重新向服务器发 起资源请求。 缓存的技术种类：代理缓存、浏览器缓存、网关缓存、负载均衡器及内容分发网络等，大致分为两类：共享缓存和私有缓存。 共享缓存指的是缓存内容可被多个用户使用，如公司内部架设的Web代理； 私有缓存指的是只能单独被用户使用的缓存，如浏览器缓存。 HTTP 缓存可细分为强制缓存与协商缓存。 强制缓存：不用判断缓存是否过期
Web协议与实践
08-26
深入阐述了Web高速缓存技术和多媒体流播技术的最新技术动态；分析了Apache Web服务器和Squid代理；还探讨了通信量的分析和测量技术。书中使用了大量示例、技术发展水平报告以及案例分析来阐述Web的工作原理和各个...
App后台开发运维和架构实践
09-28
App后台开发运维和架构实践》通过阐述移动互联网中 App 后台开发的特点，梳理了 App 后台开发中会遇到的各个技术点，给出了生产环境常用软件的实战运维经验总结，剖析了常见 App 后台技术架构设计，为读者呈现一幅...
如何mysql数据导入到mongdb
codemami的博客
05-30 1122
由于MySQL和MongoDB的数据模型不同（例如，MySQL使用关系模型，而MongoDB使用文档模型），你可能需要转换数据的格式。使用MongoDB驱动程序：你也可以使用MongoDB的官方驱动程序（如Python的pymongo）来编写脚本，将数据直接插入到MongoDB中。注意：如果你的JSON文件包含多个文档，并且它们不是作为数组的一部分（即每个文档都在其自己的行上），则需要使用--jsonArray选项。手动转换：对于小型数据集，你可以手动编辑SQL或CSV文件，将其转换为JSON格式。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1187
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
oracle中的INTERVAL函数学习总结
weixin_42821740的博客
05-30 451
简单学懂interval函数
行列视（RCV）能否在指定时间生成报表数据？
2401_83701843的博客
05-30 163
需要注意的是，要实现指定时间生成报表数据的功能，用户需要确保行列视（RCV）系统已经正确配置并连接了相应的数据源，同时还需要根据实际需求进行报表格式和计算逻辑的设置。此外，系统的稳定性和性能也是影响报表生成的重要因素，用户需要确保系统能够正常运行并处理大量的数据。其次，关于指定时间生成报表数据的需求，用户可以通过行列视（RCV）的定时任务功能来实现。综上所述，行列视（RCV）具备在指定时间生成报表数据的能力，但具体实现方式需要根据系统的配置和使用需求来确定。
chat4-Server端保存聊天消息到mysql
最新发布
gulanga5的博客
06-02 460
本文档描述了Server端接收到Client的消息并转发给所有客户端或私发给某个客户端同时将聊天消息保存到mysql服务端为当前客户端创建一个线程，此线程接收当前客户端的消息并转发给所有客户端或私发给某个客户端同时将聊天消息保存到mysql本文档主要总结了将聊天消息保存到mysql!!!),;import;import;import;/**用druid连接池来连接数据库的工具类*/DBUtil。
best http (pro) 缓存
10-27
综上所述，最佳的HTTP缓存实践需要综合考虑资源类型、内容特点以及网络环境等因素，通过合适的缓存策略、验证机制、压缩和及时的缓存失效等措施，来实现更高效的网络传输和页面加载速度的提升。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值