首页 > 其他分享 >前端缓存【http缓存 | 浏览器缓存】

前端缓存【http缓存 | 浏览器缓存】

时间:2023-06-23 09:44:16浏览次数:56  
标签:03 缓存 浏览器 res Cache etag http

一、前端缓存分类【http缓存|浏览器缓存】

1、http缓存分类:强缓存  协商缓存

 

    都是服务端设置 HTTP Header 来实现的

(1)强缓存

  • 不需要发送请求到服务端,直接读取浏览器本地缓存
  • //
  • 在 Chrome 的 Network 中显示的 HTTP 状态码是 200
  • 在 Chrome 中,强缓存又分为 Disk Cache(存放在硬盘中)和 Memory Cache(存放在内存中),存放的位置是由浏览器控制的。
  • //
  • 是否强缓存:由 Expires、Cache-Control 和 Pragma 3 个 Header 属性共同来控制
    • Expires(优先级最低)
      • 服务端在响应头中设置一个 GMT 格式的到期时间,值为HTTP日期
      • 若系统时间小于响应头的Expires时间,会从本地读取,不会去请求服务器;超过了,就去请求服务区获取最新资源
      • 由于和系统时间进行比较,所以当系统时间和服务器时间不一致的时候,会有缓存有效期不准的问题==》出现了Cache-Contorl
    • Cache-Control (在请求头和响应头中都可以使用)
      • max-age:单位是秒,缓存时间计算的方式是距离发起的时间的秒数,超过间隔的秒数缓存失效

      • no-cache:不使用强缓存,需要与服务器验证缓存是否新鲜

      • no-store:禁止使用缓存(包括协商缓存),每次都向服务器请求最新的资源

      • private:专用于个人的缓存,中间代理、CDN 等不能缓存此响应

      • public:响应可以被中间代理、CDN 等缓存

      • must-revalidate:在缓存过期前可以使用,过期后必须向服务器验证

    • Pragma (优先级最高)
      • 只有一个属性值:no-cache (效果同Cache-Contorl中的no-cache)
      • 不使用强缓存,需要与服务器验证缓存是否新鲜

(2)协商缓存

  • 协商缓存表示在使用本地的缓存之前,会先向服务器发一个请求,与服务器协商当前浏览器的缓存是否已经过期了,如果没过期,那么就使用本地的资源,如果过期了就去请求最新资源。
  • 主要解决强缓存资源不能及时更新的问题
  • 实现:(会将这两个属性值到服务端去验证是否命中协商缓存,如果命中了协商缓存,会返回 304 状态)
    • last-modified 配合 If-Modified-Since
      • // 判断客户端请求的是03这个图片
        if(pathname === '/img/03.jpg') {
        // 读取 03 图片的最后修改时间
        const { mtime } = fs.statSync("./img/03.jpg")
        // 判断客户端发送过来的if-modified-since是否与mtime一致,如果一致就直接返回304
        if(req.headers['if-modified-since'] === mtime.toUTCString()) {
        res.statusCode = 304
        res.end()
        } else
        // 如果不一致,那么就请求最新的资源返回给客户端
        const data = fs.readFileSync("./img/03.jpg")
        // 这2句代码是设置协商缓存
        res.setHeader("last-modified", mtime.toUTCString())
        res.setHeader("Cache-Control", "no-cache")
        res.end(data)
        }
        }
    • Etag 配合 If-None-Match

         

// 引入 etag 模块
const etag = reqiure("etag")
if(pathname === '/img/03.jpg') {
const data = fs.readFileSync("./img/03.jpg")
// 获取生成的etag字符串
const etag = etag(data)
// 判断客户端发送的 If-None-Match 与服务端是否一致
if(req.headers['if-none-match'] === etag) {
res.statusCode = 304
res.end()
} else {
// 如果不一致,那么就请求最新的资源返回给客户端
const data = fs.readFileSync("./img/03.jpg")
// 这2句代码是设置协商缓存
res.setHeader("etag", etag)
res.setHeader("Cache-Control", "no-cache")
res.end(data)
}
}

 

 

 

2、浏览器缓存分类:本地存储  默认缓存

 

二、缓存作用:

  • 为加快资源获取速度,提升用户体验,减少网络传输,缓解服务端的压力

三、缓存流程图:

 

四、http缓存的强缓存

 

标签:03,缓存,浏览器,res,Cache,etag,http
From: https://www.cnblogs.com/le-cheng/p/17498486.html

相关文章

  • Nginx上的HTTPS的配置
    Ngnix上配置HTTPS不算特别复杂,下面记录一下整体过程。生成自签名的SSL证书通过下面命令生成一系列文件,最终只需要server.key和server.crt两个就可以了opensslgenrsa-des3-outserver_temp.key2048opensslreq-new-keyserver_temp.key-outserver.csr-configopenssl.......
  • 让您的Nginx支持Http 3.0 协议
    Http3.0其实从最开设到正式的使用,已经过去了不少时间了,这块也是关系到我们现在数据安全一块很重要的发展,后续我们应该不在会有明文加密的协议的存在了吧,只是在加密的基础上,不断的升级现在的加密方法与技术升级,从而更高的保障我们的数据传输的高效与安全。并且我们也会在这路上......
  • 浏览器本地储存
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>localStorage</title>......
  • HTTP2 概述
    HTTP/2,也就是超文本传输协议第2版,不论是1还是2,HTTP的基本语义是不变的,比如方法语义(GET/PUST/PUT/DELETE),状态码(200/404/500等),RangeRequest,Cacheing,Authentication、URL路径,不同的主要是下面几点:HTTP2主要是针对Http1的下面几个问题做的优化:并行能力有限每一个源最大只支持6个请......
  • 浏览器的回流和重绘
    1、回流重绘的概念回流:当RenderTree中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程重绘:当页面中元素样式的改变并不影响它在文档流中的位置时,浏览器会将新样式赋予给元素并重新绘制它的过程浏览器使用流式布局模型(FlowBasedLayo......
  • [转]火狐浏览器访问github提示:未连接:有潜在的安全问题...github.com 启用了被称为 HTT
    火狐浏览器访问github,提示:       未连接:有潜在的安全问题;       Firefox检测到潜在的安全威胁,并因github.com要求安全连接而没有继续。如果这种情况是因为使用DevSidecar而引起的,可以使用以下方式解决:在地址栏输入:about:config在搜索框输入:security.en......
  • C:\Windows\Installer\ 存储安装程序的数据库 修复和更改安装程序 安装程序的缓存
    C:\Windows\Installer\是一个特殊的系统文件夹,在Windows操作系统中扮演着重要的角色。它主要用于存储安装程序的相关信息和安装源。具体来说,C:\Windows\Installer\文件夹有以下几个作用和功能:存储安装程序的数据库:文件夹中包含一个名为"Installer"的数据库文件(即MSI数据库),......
  • 添加一段代码,让你的网站在微信QQ提示使用浏览器访问
    <script>//跳转提示if(is_weixn_qq()){;window.location.href='https://c.pc.qq.com/middle.html?pfurl='+window.location.href;}functionis_weixn_qq(){//判断当前是否微信/QQ浏览器varua=navigator.userAgent;varisWeixin=!!/MicroMessenger/i.test......
  • 同一网段下ping不通电脑以及everything的http服务器使用
    U盘沾水暂时不能用,想用机器A上的everything的http服务器拉点文件到另外的机器B上。但不能访问到那台电脑A,第一想法是ping一下那台电脑是否能通,结果ping也ping不通,显示超时。上网搜了一下是网络属性那里不能被其他电脑发现,具体的解决方案是控制面板\网络和Inte......
  • 什么是缓存?
    一、什么是缓存?一种具备高效读写能力的数据暂存区域 二、缓存的作用降低后端负载提高服务读写响应速度 三、缓存的成本开发成本运维成本一致性问题......