http缓存详解

最新推荐文章于 2024-08-25 10:00:00 发布

baby加油_

最新推荐文章于 2024-08-25 10:00:00 发布

阅读量1.5k

点赞数 2

文章标签：缓存 http 前端 javascript

本文链接：https://blog.csdn.net/qq_34664239/article/details/131064976

版权

为什么要缓存

通过http协议在客户端和服务端建立连接需要消耗时间，重复访问同一个资源，增加访问服务器数据资源的成本，因此，利用浏览器的缓存机制重用以前获取的数据来优化性能
1、减少了网络延迟，加快了页面响应速度，增强了用户体验；
2、减少了网络带宽消耗嘛。（就近获取）；
3、通过缓存，我们都不用到服务器（origin servers）去请求了，从而也就相应地减轻了服务器的压力。
说到浏览器中的缓存机制，就相当于http协议定义的缓存机制，一般我们会想到http响应头中的Expires，Cache-Control，Last-Modified，If-Modified-Since，Etag这样与缓存相关的响应头信息

Web缓存的种类

数据库缓存
当web应用的关系比较复杂，数据库中的表很多的时候，如果频繁进行数据库查询，很容易导致数据库不堪重荷。可以将查询后的数据放到内存中进行缓存，下次查询时，直接从内存缓存直接返回，从而提高响应速度和效率。常见的数据库缓存技术有memcache和redis。
CDN缓存
网站管理员部署，为了让他们的网站更容易扩展并获得更好的性能。
浏览器先向CDN网关发起Web请求，网关服务器后面对应着一台或多台负载均衡源服务器，会根据它们的负载请求，动态将请求转发到合适的源服务器上。从浏览器角度来看，整个CDN就是一个源服务器，从这个层面来说，浏览器和服务器之间的缓存机制，在这种架构下同样适用。
代理服务器缓存
代理服务器是浏览器和源服务器之间的中间服务器，浏览器先向这个中间服务器发起Web请求，经过处理后（比如权限验证，缓存匹配等），再将请求转发到源服务器。代理服务器缓存的运作原理跟浏览器的运作原理差不多，只是规模更大。
代理服务器缓存，其实跟下面即将讲的浏览器缓存性质差不多，差别就是代理服务器缓存面向的群体更广，规模更大而已。即，它不只为一个用户服务，一般为大量用户提供服务，同一个副本会被重用多次,因此在减少相应时间和带宽使用方面很有效。
浏览器缓存
每个浏览器都实现了 HTTP 缓存，我们通过浏览器使用HTTP协议与服务器交互的时候，浏览器就会根据一套与服务器约定的规则进行缓存工作。当我们点击浏览器上‘后退’或者‘前进’按钮时，显得特别有用。
应用层缓存
应用层缓存是指我们在代码层面上做的缓存。通过代码逻辑，把曾经请求过的数据或资源等，缓存起来，再次需要数据时通过逻辑上的处理选择可用的缓存的数据。

浏览器缓存

什么是浏览器缓存

浏览器缓存包括HTTP 缓存、cookie、localstorage 、sessionStorage
HTTP 缓存：
通过设置请求和响应的header参数，来实现HTTP 缓存
HTTP 缓存分为强制缓存和协商缓存
强制缓存：不向服务器发送请求，直接从缓存中读取资源
协商缓存：在使用本地缓存前，先向服务器发送请求，服务器会根据请求的request header的一些参数判断是否读取缓存，是，则返回304状态，并带上新的response header通知浏览器从缓存中读取资源
缓存涉及到的参数属性名：Expires/cache-control/last-modify/etag
其中Expires和Cache-Control为强缓存用来确定确定缓存的存储时间，Last-Modified 和Etag为协商缓存则用来确定缓存是否要被更新。

浏览器缓存指本地使用的计算机开辟一个内存区、同时也开辟一个磁盘区作为数据传输的缓冲区，然后用这个缓冲区来暂时保存用户以前访问过的信息
缓存位置：
Server Worker -> Memery Cache (内存中的缓存)-> Disk Cache（硬盘中的缓存） -> Push Cache
CPU：处理器，计算机的运算核心和控制中心。电脑靠CPU运算和控制，让电脑各个部分顺利工作
硬盘：存储资料和软件等数据的设备，容量大，断电数据不消失
内存：负责硬盘等硬件上的数据和CPU之间的数据交换，体积小，速度快，断电清空

强制缓存

Expires：HTTP1.0中用来控制缓存时间的参数，header里包含日期/时间，用GMT格式的字符串表示，即在此时间之后，响应过期
cache-control: HTTP1.1中用来控制缓存时间的参数

no-store: 表示禁止缓存；也就是说每次用户请求资源时，都会向服务器发送一个请求，每次都会下载完整的响应。
no-cache：表示用协商缓存；缓存资源，但立即过期，每次请求都需要跟服务器对比验证资源是否被修改。（等同于max-age=0）；表示必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求。因此，如果存在合适的验证令牌 (ETag)，no-cache 会发起往返通信来验证缓存的响应，如果资源改，可以避免下载未被更
max-age: 设置资源被缓存的最长时间(单位是秒)，在此时间内，访问资源直接读取本地缓存，不向服务器发出请求。（与expires同时出现时，max-age优先级更高）
s-maxage: 规则等同max-age，覆盖max-age 或者 Expires 头，但是仅适用于共享缓存(比如各个代理)，并且私有缓存中它被忽略。（与expires或max-age同时出现时，s-maxage优先级更高）
public: 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存。
private: 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器例如CDN不能缓存它）。

服务器响应浏览器请求时响应头中的Cache-Control响应头使得每个资源都可以通过 Cache-Control HTTP 头来定义自己的缓存策略，Cache-Control 指令用来告诉我们，哪个资源在什么条件下可以缓存，以及可以缓存多久

协商缓存

Last-modified: 源头服务器认定的资源做出修改的日期及时间。客户端请求之后，服务器可能会比较客户端的If-Modified-Since（上次请求的last-modified的值）和当前版本资源的最后修改时间做对比。精确度比Etag低（精确到秒，如果在1s内修改资源，再加载客户端拿不到最新资源）。Last-Modified优先级低于Etag。
Etag:服务器通过 ETag HTTP 头传递资源文件对应的hash值。当浏览器在资源过期后再次请求时，浏览器默认会通过If-None-Match传递Etag，通过服务器资源的hash（只要文件内容改动，ETag就会重新计算）对比可以进行高效的资源更新检查：如果一致，表示资源未更改，返304状态。
304状态告诉客户端，它的缓存版本是最新的，并应该使用它。

浏览器缓存过程

浏览器缓存

浏览器第一次加载资源，服务器返200，浏览器下载该资源，并把response header及该请求的返回时间一并缓存
再次加载资源，先比较两次加载的时间，如果小于max-age，则不需要向服务器发送请求，直接从本地缓存中读取资源；如果时间过期，则向服务器发送header并带有if-none-Match和if-Modify-Since请求
服务器收到请求，优先根据Etag判断请求文件是否更改，Etag值没改，则命中协商缓存，返304；如果有改动，则返回新资源，并带上最新的Etag，并返回200.
若服务器收到的请求中无Etag，则将if-Modify_Since和文件的最后修改时间做对比，一致，则命中协商缓存，返304；不一致则返回新的last-Modify和文件并返回200