前端缓存

前端缓存分两种:

  • HTTP缓存,主要用于HTTP请求资源时用到(仅GET请求),相关设置都在服务器端设置
  • 浏览器缓存,浏览器缓存主要是我们前端对于某些特殊数据进行本地缓存,相关设置在前端代码中设置

两种缓存使用到的属性如下:

HTTP缓存过程

浏览器第一次向服务器发起请求后拿到对应的资源,会根据响应报文中HTTP头的缓存标识决定是都缓存资源。后面再次请求该资源时分下面两种情况:

如果是强缓存,并且资源被缓存,那么浏览器后面每次发起请求时都会在缓存中查找请求的资源,并判断标识资源是否有效,无效则发送请求到服务端,如果有效则直接使用缓存资源。

如果是协商缓存,请求将携带标识传递给服务器,服务器根据标识判断缓存是否有效,有效则走304,无效则查找新的资源返回给前端。

强缓存分两种规则进行缓存

  • Cache-Control

    Cache-Control是在HTTP/1.1中使用的一种缓存方式,它里面主要可以设置下面几个属性:
    public:所有内容都将被缓存
    private:所有内容只有在客户端可以缓存,Cache-Control默认取值
    no-cache:客户端缓存内容,但是是否使用缓存需要经过协商缓存来验证决定
    no-store:所有内容都不会被缓存,包括强缓存和协商缓存
    max-age=600(600 is numeric):缓存内容将在600秒后失效
  • Expires

    expires是通过设置绝对时间来进行缓存,例如:expires: Fri, 01 Jan 1990 00:00:00 GMT

Cache-Control和Expires两者比较

Cache-Control使用的是相对时间,一般是设置多长时间后过期,Expires设置的是绝对时间,过了设置的时间后过期,而且这个时间是根据服务器的时间来确定的,可能存在客户端与服务端时间不同步的情况造成过期时间不准确。另外Cache-Control的优先级比expires高,如果都设置的情况下优先使用前者。
注意点:强缓存的判断过程在发起请求之前,所以如果命中缓存这里是不需要与服务器进行任何交互的

协商缓存

协商缓存是在强缓存失效后,并且资源设置了协商缓存标识,那么发起请求时会携带缓存标识,服务器接收到请求后会对比标识,判断资源是否有效。如果生效返回304,浏览器去缓存获取资源。如果无效则服务器直接查询相关资源返回。

协商缓存使用到的几个字段

  • Last-Modified/If-Modified-Since
  • Etag/If-None-Match
last-Modify是服务器资源的最新修改时间,但是这个时间修改了,但是资源未必一定有变更。
Etag是根据文件的内容生成的唯一标识,如果它变化了,那么资源肯定有变更,所以Etag相对于Last-Modified来说更加的准确,所有Etag的优先级要高于Last-Modified

If-Modified-Since与If-None-Match取对应缓存字段的值传递给后端,后端根据值去比对

最后对于HTTP缓存的流程我们大概了解了,但是这些资源到底缓存到哪里去了呢?

分两种形式memory cache/disk cache,前者表示内存缓存,后者表示硬盘缓存
  • memory cache内存缓存,浏览器关闭资源被销毁,再次打开需要重新获取,一般会将脚本、字体、图片等存在内存中。
  • disk cache硬盘缓存,关闭浏览器下次打开资源依旧是from disk cache,一般缓存一些非脚本文件,比如css

浏览器缓存对于大多数人都比价熟悉,这里就...

2 声望
2 粉丝
0 条评论
推荐阅读
正则原理剖析
回溯法也称试探法,它的基本思想是:从问题的某一种状态(初始状态)出发,搜索从这种状态出发所能达到的所有“状态”,当一条路走到“尽头”的时候(不能再前进),再后退一步或若干步,从另一种可能“状态”出发,继...

闲人阅读 560

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan25阅读 1.7k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.4k评论 1

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
2 声望
2 粉丝
宣传栏