【浅解】浏览器缓存 -尊龙游戏旗舰厅官网

为什么有缓存?

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

什么数据可以缓存?

不能缓存的数据

• 实时更新替换的数据(例如: 弹幕,留言,评论,经常更换的广告图片)
• 网页的 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 指令

• cache-control: max-age= : 缓存存储的最大周期
• cache-control: max-stale[=] : 客户端愿意接收一个已经过期的资源
• 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 用来帮助服务器控制客户端缓存校验的属性

不同点 :

存储的值不同

• last-modified存储的值是最后修改数据的时间, 而请求头中携带的if-modified-since是浏览器中缓存的时间
• etag中存储的是一个字符串,和id一样的具有唯一性,而请求头中携带的if-none-match是浏览器上传收到数据时携带的etag

服务器对比方式不同

• last-modified : 如果缓存的时间和最后修改的时间一致，则缓存命中，响应 304，否则不命中，向服务端请求资源,响应 200 和最新的资源，并在响应头中携带这次的 last-modified,把这次的 last-modified 存到 if-modified-since 中
• etag 内容比对，用来判断缓存内容的 if-none-match 和服务器内容的 etag 是否相等，如果相等则说两处的资源相等,缓存命中响应 304，否则请求资源,响应 200 和最新的资源，并在响应头中携带新的 etag,

协商缓存流程图

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

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头中,在浏览器和服务器之间传递	保存与客户端硬盘中，不参与和服务器的通信	保存在客户端内存中，不参与和服务器的通信

总结

以上是尊龙游戏旗舰厅官网为你收集整理的【浅解】浏览器缓存的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。