技术点:前端缓存(web 缓存)详解
前端缓存(web 缓存)详解
什么是 web 缓存
web 缓存主要指的是两部分:浏览器缓存和 http 缓存
浏览器缓存: localStorage,sessionStorage,cookie 等等
http 缓存: 通过配置 http 请求头来达到缓存的效果,分为强缓存和弱缓存
缓存可以解决什么问题?他的缺点是什么?
解决的问题
- 减少不必要的网络传输,节约宽带(就是省钱)
- 更快的加载页面(就是加速)
- 减少服务器负载,避免服务器过载的情况出现。(就是减载)
缺点
- 占内存(有些缓存会被存到内存中)
浏览器缓存
太简单了,略
http 强缓存
http 强缓存有两种方式,Expires 和 Cache-control
基于 Expires 实现的强缓存(已弃用)
Expires 字段的作用是,设定一个强缓存时间。在此时间范围内,则从内存(或磁盘)中读取缓存返回。比如说将某一资源设置响应头为:Expires:new Date(“2022-7-30 23:59:59”);那么,该资源在 2022-7-30 23:59:59 之前,都会去本地的磁盘(或内存)中读取,不会去服务器请求
res.writeHead(200, {Expires: new Date("2022-07-30 14:05:55").toUTCString(),
});
缺点: 因为 Expires 判断强缓存是否过期的机制是:获取本地时间戳,所以如果本地时间不对的话会出问题,会导致资源无法被缓存或者资源永远被缓存的情况
基于 Cache-control 实现的强缓存(代替 Expires 的强缓存实现方法)
Cache-control 这个字段在 http1.1 中被增加,Cache-control 完美解决了 Expires 本地时间和服务器时间不同步的问题。是当下的项目中实现强缓存的最常规方法。
//往响应头中写入需要缓存的时间
res.writeHead(200, {"Cache-Control": "max-age=10",
});
Cache-control 有 max-age、s-maxage、no-cache、no-store、private、public 这六个属性。
- max-age 决定客户端资源被缓存多久。
- s-maxage 决定代理服务器缓存的时长。
- no-cache 表示是强制进行协商缓存。
- no-store 是表示禁止任何缓存策略。
- public 表示资源即可以被浏览器缓存也可以被代理服务器缓存。
- private 表示资源只能被浏览器缓存。
设置多个值,使用逗号分割,
Cache-control:max-age=10000,s-maxage=200000,public
强制缓存就是以上这两种方法了。现在我们回过头来聊聊,Expires 难道就一点用都没有了吗?也不是,虽然 Cache-control 是 Expires 的完全替代品,但是如果要考虑向下兼容的话,在 Cache-control 不支持的时候,还是要使用 Expires,这也是我们当前使用的这个属性的唯一理由
http 协商缓存
基于 last-modified 的协商缓存
实现方式
- 首先需要在服务器端读出文件修改时间,
- 将读出来的修改时间赋给响应头的 last-modified 字段。
- 最后设置 Cache-control:no-cache
原理
- 服务端接收请求时,读取文件最后一次的修改时间,返回给客户端
- 客户端接收到之后,下次再调用该资源时会在请求头中添加 If-Modified-Since(就是服务器第一次修改时候给他的时间)
- 服务端拿到这个时间并再次读取该资源的修改时间,让他们两个做一个比对来决定是读取缓存还是返回新的资源
缺点
使用以上方式的协商缓存已经存在两个非常明显的漏洞。这两个漏洞都是基于文件是通过比较修改时间来判断是否更改而产生的。
- 因为是更具文件修改时间来判断的,所以,在文件内容本身不修改的情况下,依然有可能更新文件修改时间(比如修改文件名再改回来),这样,就有可能文件内容明明没有修改,但是缓存依然失效了。
- 当文件在极短时间内完成修改的时候(比如几百毫秒)。因为文件修改时间记录的最小单位是秒,所以,如果文件在几百毫秒内完成修改的话,文件修改时间不会改变,这样,即使文件内容修改了,依然不会返回新的文件。
基础 ETag 的协商缓存
实现方式
- 首先需要在服务器端读出文件哈希值
- 将读出来的哈希值赋给响应头的 etag 字段。
- 最后设置 Cache-control:no-cache
原理
- 服务端接收请求时,读取文件生成的哈希值
- 客户端接收到之后,下次再调用该资源时会在请求头中添加 is-None-Match(就是服务器返回的 etag 字段)
- 服务端拿到这个时间并再次读取该资源的哈希值,让他们两个做一个比对来决定是读取缓存还是返回新的资源
缺点
- ETag 需要计算文件指纹这样意味着,服务端需要更多的计算开销。。如果文件尺寸大,数量多,并且计算频繁,那么 ETag 的计算就会影响服务器的性能。显然,ETag 在这样的场景下就不是很适合。
- ETag 有强验证和弱验证,所谓将强验证,ETag 生成的哈希码深入到每个字节。哪怕文件中只有一个字节改变了,也会生成不同的哈希值,它可以保证文件内容绝对的不变。但是,强验证非常消耗计算量。ETag 还有一个弱验证,弱验证是提取文件的部分属性来生成哈希值。因为不必精确到每个字节,所以他的整体速度会比强验证快,但是准确率不高。会降低协商缓存的有效性。
总结
值得注意的一点是,不同于 cache-control 是 expires 的完全替代方案(说人话:能用 cache-control 就不要用 expiress)。ETag 并不是 last-modified 的完全替代方案。而是 last-modified 的补充方案(说人话:项目中到底是用 ETag 还是 last-modified 完全取决于业务场景,这两个没有谁更好谁更坏)。
- http 缓存可以减少宽带流量,加快响应速度。
- 关于强缓存,cache-control 是 Expires 的完全替代方案,在可以使用 cache-control 的情况下不要使用 expires
- 关于协商缓存,etag 并不是 last-modified 的完全替代方案,而是补充方案,具体用哪一个,取决于业务场景。
- 有些缓存是从磁盘读取,有些缓存是从内存读取,有什么区别?答:从内存读取的缓存更快。
- 所有带 304 的资源都是协商缓存,所有标注(从内存中读取/从磁盘中读取)的资源都是强缓存。
参考文章
技术点:前端缓存(web 缓存)详解相关推荐
- .net System.Web.Caching.Cache缓存类使用详解(转载)
转自:http://www.cnblogs.com/virusswb/articles/1681561.html net System.Web.Caching.Cache缓存类使用详解 System. ...
- mysql select 缓存_mysql select缓存机制使用详解
mysql Query Cache 默认为打开.从某种程度可以提高查询的效果,但是未必是最优的解决方案,如果有的大量的修改和查询时,由于修改造成的cache失效,会给服务器造成很大的开销,可以通过qu ...
- 并发编程之CPU缓存架构缓存一致性协议详解(二)
并发编程之CPU缓存架构&缓存一致性协议详解 CPU高速缓存(Cache Memory) CPU高速缓存 在CPU访问存储设备时,无论是存取数据抑或存取指令,都趋于聚集在一片连续的区域中,这就 ...
- 并发-MESI缓存一直协议详解
并发-MESI缓存一直协议详解 CPU缓存一致性协议MESI CPU高速缓存(Cache Memory) CPU为何要有高速缓存 目前流行的多级缓存结构 多核CPU多级缓存一致性协议MESI MESI ...
- MESI缓存一致性协议详解
MESI缓存一致性协议详解 1.CPU为何要有高速缓存 CPU中内置了少量的高速缓存以解决I\O速度和CPU运算速度之间的不匹配问题. 带有高速缓存的CPU执行计算的流程 程序以及数据被加载到主内存 ...
- 修改conda缓存路径:详解如何将Anaconda缓存位置更改
修改conda缓存路径:详解如何将Anaconda缓存位置更改 在使用Anaconda进行Python开发时,我们经常需要使用conda来管理第三方库和环境.但是,使用默认缓存路径时,conda会将下 ...
- web存储详解(cookie、sessionStorage、localStorage、indexedDB)
目录 一.web存储概念简介 1. 什么是web存储? 2. 为什么需要web存储? 二.web存储详解 1. cookie 2. sessionStorage和localStorage (1). 相 ...
- Spring Web MVC详解
Spring Web MVC详解 原创 2016年03月23日 10:55:57 标签: 421 编辑 删除 2.1.Spring Web MVC是什么 Spring Web MVC是一种基于Java ...
- (转)asp.net夜话之十一:web.config详解
在开发中经常会遇到这样的情况,在部署程序时为了保密起见并不将源代码随项目一同发布,而我们开发时的环境与部署环境可能不一致(比如数据库不一样),如果在代码中保存这些配置这些信息部署时需要到用户那里更改代 ...
- Web.config详解+asp.net优化(1)
一.认识Web.config文件 Web.config 文件是一个xml文本文件,它用来储存 asp.NET Web 应用程序的配置信息(如最常用的设置asp.NET Web 应用程序的身份验证方式) ...
最新文章
- zookeeper在搭建的时候,解决后台启动为standalone模式问题
- winform实现翻书效果_如何用PPT实现翻书效果?
- #舍得Share#Flash Media Server4.5迅雷高速下载地址by lwxshow
- 从神经元到CNN、RNN、GAN…神经网络看本文绝对够了
- 抽象类可以创建对象吗_【基础篇】java-抽象类与继承的补充
- 二叉树删除节点+思路分析
- MacOS 下如何创建文本文件
- Video.js实现rtmp视频播放
- 数据分析来诠释,为了“鸡”出“牛蛙”,中国家长到底能有多拼!
- 个性化推荐算法-协同过滤
- 我家两个孩子周六都开家长会,我和老公两个人都要上班,怎么办?
- python—pickle模块的dump与load函数
- 未来三年分布式光伏必然爆发
- 集成电路可测性设计DFT技术入门概论--MBIST技术报告
- icloud邮箱android手机,如何用iCloud账号登陆邮箱 使用方法【详解】
- 结果和过程到底哪个重要?
- python包发布到Pypi官网
- Python 800 道习题 (°ー°〃) 测试你学废了嘛
- K8S(Kubernets)
- 用多个Kinect体感摄像头实现真正360度运动捕捉系统