【浅解】浏览器缓存

最新推荐文章于 2024-09-18 16:31:10 发布
最新推荐文章于 2024-09-18 16:31:10 发布
阅读量8.3k 收藏 59
点赞数 12
分类专栏： 浅解技术 文章标签： 前端 javascript 缓存
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiang_ziy/article/details/123818243
版权

缓存

为什么有缓存?

缓存在活中其实很常见。往往初次打开一个新的软件或者网页的时候都会相对较慢, 但是再次打开就会快很多, 这就是缓存的功劳。大大提高了效率,也大大提高了用户体验。

什么数据可以缓存?

不能缓存的数据

  • 实时更新替换的数据(例如: 弹幕,留言,评论,经常更换的广告图片)
  • 网页的 HTML 结构, 在网页使用过程中结构会随着操作发生变化
    缓存中的数据
  • 静态资源很少发生改变的图片(例如:商品图片,用户头像,网站logo)
  • 使用过的视频数据,音频数据都会在缓存里

技术层面的缓存 - Web 缓存

在前端开发中，性能一直都是重点问题，判断一个网站的性能就是看网页打开的速度。然而提高网页反应速度就要使用 Web 缓存。

Web 缓存的优点 :

  • 节约了网络的资源
  • 提高了网络的效率
  • 缩短网页请求资源的距离
  • 减少网络延迟
  • 减少带宽
  • 降低网络负荷

Web 缓存的种类 :

1 . 数据库缓存

  • 通过缓存数据库查询结果，加快访问速度，减少数据库访问次数,缓解数据库压力，以提高 web 应用速度
    2 . 代理服务器缓存
  • 在不能访问服务器时,使用代理服务器满足的 HTTP 请求(例: 跨域 Porxy)
    3 . CDN 缓存
  • 通过在网络各处放置节点服务器, 快速可靠地分发静态内容,
    4 . 浏览器缓存
  • 加速浏览，浏览器在用户磁盘上对请求过的资源进行存储，当再次请求这个页面时，浏览器就可以从本地取出资源响应给用户,这样就可以加速页面浏览

浏览器缓存

浏览器缓存包含 ： HTTP 缓存、indexDB、cookie、localstorage 、sessionStorage

1 . http 缓存（强制缓存 & 协商缓存）

强制缓存

什么是强制缓存

  • 请求的资源本地缓存中有,资源从本地缓存获取,不需要发起请求
  • 想理解强制缓存,先知道什么是缓存控制
缓存控制

在http中，控制缓存开关的属性有两个：Pragma 和 Cache-Control。

Pragma

Pragma 有两个情况 Pragma 和 Expires 。

  • Pragma 的值为 no-cache : 表示禁用缓存
  • Expires 的值是一个时间(格林尼治标准时间) : 表示该缓存的有效时间
    注意 : 当 http 响应头中同时出现 Pragma 和 Cache-Control , 缓存控制执行优先级从高到低是 Pragma ==> Cache-Control ==> Expires
Cache-control

Cache-Control 在 http 请求头和响应头中,用来控制 http 缓存的

cache-control.png

常见 请求头 中的Cache-Control 指令

  • Cache-Control: max-age=<seconds> : 缓存存储的最大周期
  • Cache-Control: max-stale[=<seconds>] : 客户端愿意接收一个已经过期的资源
  • Cache-control: no-cache : 重新验证是否缓存(协商缓存验证)
  • Cache-control: no-store : 禁止缓存

常见 响应头 中的Cache-Control 指令

  • Cache-control: must-revalidate 资源过期后重新请求
  • Cache-control: no-cache 请求是验证是否缓存(协商缓存验证)
  • Cache-control: no-store 不使用任何缓存
  • Cache-control: private 同意本地浏览器缓存
    详情查看官方文档
强制缓存的执行流程

流程情景1 - 初次请求

浏览器会向服务器发起请求 ==> 服务器接收到浏览器的请求 ==> 响应资源并在响应头中携带 Cache-Control 给客户端( Cache-Control 值为缓存的最大过期时间)

流程情景2 - 再次请求相同的数据

浏览器会先查看Cache-Control 是否过期 ==> 没有过期 ==> 浏览器直接从缓存中拉取资源(此过程不用经过服务器)

流程情景3 - Cache-Control 过期

cache-control 过期了 ==> 没有办法拉取缓存中的数据 ==> 继续执行流程情景1

协商缓存

是什么协商缓存
协商缓存，也叫对比缓存。一种服务端的缓存策略

  • 服务端判断客户端的资源
    • 返回 304表示缓存中的资源和请求的资源一致 ，
    • 返回 200 表示从服务器返回的最新的资源。
  • 想理解协商缓存,先知道什么是缓存校验
缓存校验

如何确定缓存数据有效,校验缓存是否是最新的(和服务器中最新的数据一样)

  • 在响应头中有两个属性(资源标识),ETag 和 Last-Modified 用来帮助服务器控制客户端的缓存校验。

Last-Modified

  • 值为资源的最后修改时间，对应请求头的属性为 If-Modified-Since 
    Etag
  • ETag 是 HTTP1.1 中加入的新属性
  • 表示资源的唯一标识，所谓唯一，和id一样，具有唯一性。对应请求头为 If-None-Match 。
    • Etag 的本质是一个字符串
      注意 : 当响应头中同时存在 Last-Modified 和 Etag ，会优先使用 Etag(更加精确)
协商缓存的执行流程

流程情景1 - 初次请求

客户端向服务器发出请求 ==> 服务器收到请求 ==> 响应资源和相对应的资源标（Etag 或 Last-Modified）识给客户端

流程情景2 - 再次请求

浏览器再次发起请求 ==> 请求头会携带If-None-Match (或 If-Modified-Since) 去找服务器 ==> 服务器将If-None-Match (或 If-Modified-Since) 和自己的Etag(或 Last-Modified) 的值对比(两种情况)

  • 如果相等，则返回 304 ，表示缓存资源和客户端资源一致
  • 如果不相等，则返回 200，并返回资源和新的Etag (或Last-Modified) 的值。
Last-Modified 和 Etag的异同点

相同点 : Last-Modified 和 Etag 用来帮助服务器控制客户端缓存校验的属性

不同点 :

  1. 存储的值不同
    • Last-Modified存储的值是最后修改数据的时间, 而请求头中携带的If-Modified-Since是浏览器中缓存的时间
    • Etag中存储的是一个字符串,和id一样的具有唯一性,而请求头中携带的If-None-Match是浏览器上传收到数据时携带的Etag
  2. 服务器对比方式不同
    • Last-Modified : 如果缓存的时间和最后修改的时间一致，则缓存命中，响应 304，否则不命中，向服务端请求资源,响应 200 和最新的资源，并在响应头中携带这次的 last-modified,把这次的 last-modified 存到 if-modified-since 中
    • Etag 内容比对，用来判断缓存内容的 if-none-match 和服务器内容的 Etag 是否相等，如果相等则说两处的资源相等,缓存命中响应 304，否则请求资源,响应 200 和最新的资源，并在响应头中携带新的 Etag,

协商缓存流程图

协商缓存.png
注意 : 刷新浏览器页面,强制缓存会失效，而协商缓存有效。

2 . indexDB

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

详情参考官方文档:

3 . Cookie

Cookie 是什么

  • Cookie 直意为小甜饼。用于数据缓存,cookie 存放数据量非常小，它的大小限制为4KB以内。可以缓存用户登录信息（例如：token）。

Cookie 的作用

  • Cookie 缓存的数据始终在同源 http 中携带，在浏览器和服务器之间传递
  • Cookie 缓存可以做数据持久化，Cookie 数据在设置的 Cookie 过期时间之前都有效（数据在缓存中关闭浏览器窗口不能删除 Cookie 数据）

cookie的使用

  • 下载依赖包 ：npm i js-cookie 或者 yarn add js-cookie
  • 导入 : import Cookies from 'js-cookie'
  • 存入数据语法 : Cookies.set('键', '值',{ expires: 7, path: '' })
    • 第三参数为一个对象, 对象的属性有expires和path
    • expires : 创建一个过期 cookie,值为天数
    • path : Cookie只对当前路径的页面有效
  • 使用数据语法 : Cookies.get('键')

注意 ： Cookies 中有路径的概念，可以限制 Cookies 数据所属路径

4 . localStorage

1 . localStorage 作用 : 本地存储

  • 经典场景 ： 免登录
    2 . localStorage 语法 ：
  • 2.1 存数据 ： localStorage.setItem('属性名',属性值)
  • 2.2 取数据 : localStorage.getItem('属性名')
  • 2.3 删数据 : localStorage.removeItem('属性名')
  • 2.4 清空数据 ： localStorage.clear()

3 . localStorage 特点 ：

  • 3.1 localStorage 是 永久存储 的， 除非 手动清除 ，否则一直存在。
  • 3.2 localStorage 只能存储 字符串类型 数据。 如果是其他类型，则会自动转成字符换格式存储。

5 . sessionStorage

1 . sessionStorage 作用 ： 临时存储

  • 经典场景 ： 页面间传值

2 . sessionStorage 语法和 localStorage 完全一致 ：

  • 2.1 存数据 ： sessionStorage.setItem('属性名',属性值)
  • 2.2 取数据 : sessionStorage.getItem('属性名')
  • 2.3 删数据 : sessionStorage.removeItem('属性名')
  • 2.4 清空数据 ： sessionStorage.clear()

3 . sessionStorage 特点 ：

  • 3.1 sessionStorage 页面关闭后就 自动清除 了。
  • 3.2 sessionStorage 只能存储 字符串类型 数据。 如果是其他类型，则会自动转成字符换格式存储。

cookie、localStorage、sessionStorage异同

CookielocalStoragesessionStorage
数据保存的期限一般由服务器生成，可设置保存时间。需要手动清除，否则永久保存仅在当前页面有效，关闭页面或浏览器后被清除
存放数据大小4KB以内5MB或更大5MB或更大
与服务器关系每次都会携带在HTTP头中,在浏览器和服务器之间传递保存与客户端硬盘中，不参与和服务器的通信保存在客户端内存中，不参与和服务器的通信
疆子
关注
专栏目录
聊一聊作为高并发系统基石之一的缓存，会用很简单，用好才是技术活
是Vzn呀
10-26 372
本篇文章的内容中，我们对缓存的各个方面进行了一个简单的阐述与了解，也可以看出缓存对于一个软件系统的重要价值。通过对缓存的合理、充分利用，可以大大的增强我们的系统承压性能、提升产品的用户体验。缓存作为高并发系统中的神兵利器被广泛使用，堪称高并发系统的基石之一。而缓存的内容还远远不止我们本篇文档中所介绍的这些、它是一个非常宏大的命题。为了能够将缓存的方方面面彻底的讲透、讲全，在接下来的一段时间里，我会以系列专栏的形式，从不同的角度对缓存的方方面面进行探讨。
浏览器缓存
qq593249106的博客
10-18 1877
前端面试题之浏览器缓存 浏览器缓存指的是http缓存，而storage是应用层缓存，不一样 浏览器缓存分为两类：强缓存和协商缓存 先了解一下浏览器缓存机制： 缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是怎么玩的，让大家有个大概的认知。 ...
浏览器缓存机制
weixin_34258782的博客
11-28 222
  浏览器缓存机制 浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等）。但是也有非HTTP协议定义的缓存机制，如使用HTML Meta 标签，Web开发者可以在HTML页面的&lt;head&gt;节点中加入&lt;meta&gt;标签，代码如下： html cod...
前端学习——浏览器的缓存机制
最新发布
m0_59709405的博客
09-18 779
浏览器的缓存机制
缓存技术研究01---浏览器缓存技术
java-t-go
09-27 125
前提说明： 缓存技术在在网站应用中非常重要，在减少服务器请求压力和用户浏览速度加块方面有着功不可没的功劳， 昨天在我《网站优化--让你的网页飞起来》里面有人问道关于浏览器缓存原理的问题，萌发了我研究缓存技术的兴趣，本文主要 介绍浏览器的缓存原理。 正文： 缓存技术： 在介绍缓存技术之前，我们先看一张LAMP网站的价格图，通过架构图我们可以很清晰的对网...
浏览器的缓存
weixin_50012993的博客
07-15 856
浏览器缓存是指浏览器在访问网页时将一些数据（如HTML、CSS、JavaScript文件、图像等）存储在客户端本地的临时存储空间中。这样，在用户再次访问同一个页面时，浏览器可以直接从缓存中加载这些数据，而无需重新从服务器下载。提升性能和加快加载速度：通过使用缓存，浏览器避免了重复下载相同的资源文件，减少了服务器的负担和网络传输时间，从而加快了页面加载速度。减少网络流量和节省带宽。
lodop打印html有缓存,Lodop打印维护PRINT_SETUP本地缓存ini文件
weixin_35955473的博客
06-22 829
针对千差万别的客户端，Lodop提供了打印维护(PRINT_SETUP)，可以针对某个客户端微调，调整结果保存在客户端本地，不会影响其他访问网站的用户的使用。打印维护使用方法：1.PRINT_INIT或PRINT_INITA，中设置任务名。2.打印维护，然后修改内容后，点应用。上述两个步骤会在本地生成一个ini文件，该ini文件的名称中带有PRINT_INIT或PRINT_INITA中设置的任务名...
Vue浅解
hmwx_的博客
12-01 918
Vue 一、初识vue 1、什么是vue Vue是一个轻量级框架 组件化 数据的双向绑定 ​ Vue是一个MVVM框架，数据双向绑定。 指令 ​ Vue.js与页面交互，通过指令完成 组件化 ​ 对某一个功能进行封装，可重复用的代码 路由 ​ vue-router—>官方插件，进行页面跳转 状态管理 vuex进行存储 2、vue实例 vue引入 超链接 本地 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xcwYjhoI-1638328944993)(D:\Vue\v
缓存面试五连击（下篇）
08-27 355
接着上篇去聊一下，缓存的主要类型 缓存的类型主要分为客户端缓存，浏览器缓存，CDN缓存，反向代理缓存，应用缓存等; 客户端缓存相对于其他端的缓存而言，要简单一些，目的就是加速各种静态资源的访问，想想现在的大型网站，随便一个页面都是一两百个请求，每天 pv 都是亿级别，如果没有缓存，用户体验会急剧下降、同时服务器压力和网络带宽都面临严重的考验。客户端缓存主要分为两种：页面缓存和浏览器缓存 页面缓存 页面缓存有两层含义： 一个是页面自身对某些元素或全部元素进行缓存；另一层意思...
C/C++学习路线总结与分享
热门推荐
dvlinker的技术专栏
10-07 9万+
C/C++学习路线总结与分享
js清除浏览器缓存的几种方法
weixin_34202952的博客
12-02 1751
  2014年9月24日 4692次浏览 关于浏览器缓存 浏览器缓存，有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数据。像股票类网站实时更新等，这样的网站是不要缓存的，像有的网站很少更新，有缓存还是比较好的。今天主要介绍清除缓存的几种方法。 清理网站缓存的几种方法 meta方法 //不缓存 &...
浏览器缓存 四种缓存分类 两种缓存类型
fyw1789的博客
03-11 1606
在正式开始讲解浏览器缓存之前，我们先来回顾一下整个Web应用的流程。上图展示了一个Web应用最最简单的结构。客户端向服务器端发送HTTP请求，服务器端从数据库获取数据，然后进行计算处理，之后向客户端返回HTTP响应。那么上面整个流程中，哪些地方比较耗费时间呢？总结起来有如下两个方面：发送请求的时候涉及到大量计算的时候一般来讲，上面两个阶段比较耗费时间。首先是发送请求的时候。这里所说的请求，不仅仅是HTTP请求，也包括服务器向数据库发起查询数据的请求。其次是大量计算的时候。
浏览器HTTP缓存机制
weixin_34037977的博客
01-23 150
Web缓存是一种保存Web资源副本并在下次请求时直接使用该副本的技术。 Web缓存可以分为这几种：浏览器缓存、CDN缓存、服务器缓存、数据库数据缓存 。因为可能会直接使用副本免于重新发送请求或者仅仅确认资源没变无需重新传输资源实体，Web缓存可以减少延迟加快网页打开速度、重复利用资源减少网络带宽消耗、降低请求次数或者减少传输内容从而减轻服务器压力。 这篇文章主要讨论...
关于浏览器缓存的小知识
a909197213的博客
03-08 646
/* 摘自：微信公众号-前端早读课*/ 前言 缓存这个词应该经常听到或偶尔也了解到。那它到底是个什么东西呢？涉及比较多，需耐心看看～ 正文从这开始～ 浏览器缓存，也就是客户端缓存，既是网页性能优化里面静态资源相关优化的一大利器，也是无数web开发人员在工作过程不可避免的一大问题，所以在产品开发的时候我们总是想办法避免缓存产生，而在产品发布
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

疆子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值