浏览器缓存--阅读笔记

最新推荐文章于 2025-08-09 17:12:08 发布

newbie_ljm

最新推荐文章于 2025-08-09 17:12:08 发布

阅读量484

点赞数

CC 4.0 BY-SA版权

分类专栏：浏览器前端文章标签：缓存浏览器

本文链接：https://blog.youkuaiyun.com/newbie_ljm/article/details/50811588

浏览器同时被 2 个专栏收录

3 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

一、浏览器缓存

强缓存：浏览器在请求资源时，会根据请求的http header判断是否是强缓存，如果是强缓存，会直接从浏览器中读取资源，不会向服务器发送请求；
协商缓存：如果不是强缓存，浏览器就发送请求到服务器，通过服务器端依据请求资源的http header看是否是协商缓存，如果是浏览器就会将这个请求返回，但是返回内容中没有数据，而是告诉客户端可以直接从缓存中加载资源，最终浏览器从自己的缓存中加载资源；【HTTP返回状态码304】
共同点：都是从浏览器端加载资源，而不从服务器端；
区别：强缓存不会发送请求到服务器，协商缓存会发送请求到服务器；

如果请求也不是协商缓存，那么浏览器直接获取到服务器端的资源并加载。

二、强缓存

 京东首页强缓存如下图中红色部分，强缓存的http返回状态码是200，size显示from cache。

京东首页请求

强缓存是通过http header中的Expires和Cache-Control实现的，如下图所示：两个对应的是资源在客户端缓存的有效期。

强缓存请求头

Expires是http1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间，由服务器端返回，用GMT格式的字符串表示。
它的缓存原理：

1、浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在response的header上加Expires；
2、浏览器接收到这个资源后，会把这个资源和它素有的response header一起缓存下来（缓存命中的请求返回的header并不是来自服务端，而是来自之前缓存的header）；
3、浏览器再请求这个资源时，先从缓存中寻找，找到这个资源后，拿出它的Expires跟当前请求时间比较，如果请求时间在指定时间之前，就会命中强缓存，否则不行；
4、如果没有命中缓存，浏览器会从服务端重新加载资源并将Expires header记录下来。
Expires是较老的强缓存管理header，由于是返回绝对时间，在服务端和客户端时间相差较大时，缓存管理容易出现问题，所以在http1.1的时候提出了一个新的缓存管理header即Cache-Control，这是一个相对时间，用数值来表示。
它的缓存原理：
1、浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在response的header上加Cache-Control ；
2、浏览器接收到这个资源后，会把这个资源和它素有的response header一起缓存下来（缓存命中的请求返回的header并不是来自服务端，而是来自之前缓存的header）；
3、浏览器再请求这个资源时，先从缓存中寻找，找到这个资源后，根据它第一次的请求时间和Cache-Control 中设定的有效期，计算出一个资源过期的时间，再拿这个时间跟当前的请求时间比较，如果请求时间在指定时间之前，就会命中强缓存，否则不行；
4、如果没有命中缓存，浏览器会从服务端重新加载资源并将Cache-Control header记录下来。
- 区别：Cache-Control是相对时间，在进行缓存命中时都是利用客户端时间进行判断，所以相比较Expires，更为有效和安全。
  
  这两个header可以用其中一个或者同时使用，同时存在时Cache-Control优于Expires。

三、强缓存的管理：通过如下两种方式设置是否启用强缓存【服务器例如nginx和apache】

 1、通过代码的方式，在web服务器返回的响应中添加Expires和Cache-Control的header；
 2、通过配置web服务器的方式，让web服务器在响应资源的时候统一添加Expires和Cache-Control的header；

 由于在开发时一般不会专门配置强缓存，而浏览器会默认缓存图片、css和js等静态资源，所以开发时经常会因为强缓存而导致资源没有及时更新，解决办法如下：
 1、ctrl+f5；
 2、使用浏览器隐私模式开发；
 3、如果是chrome，可以在network中把缓存禁掉；

禁止缓存

 4、如果缓存问题出现在ajax中，最有效的办法是ajax请求地址追加随机数；
 5、如果使用grunt和gulp等前端工具，通过插件例如grunt-contrib-control来启动一个静态服务器，该服务器下的所有资源返回的response header中，cache-control始终设置为不缓存；

四、强缓存的应用

强缓存是前端性能优化的有力工具，它对于大量的静态资源的网页，很有作用，提高相应速度。通常做法是为这些静态资源全部配置一个超长时间的Expires或者Cache-Control，这样用户访问资源时只需要在第一次的时候加载资源，其他时候只需要在缓存没有失效并且用户没有强制刷新的条件下从缓存中加载。
存在的问题：发布时资源更新问题，更新了资源，但是用户每次请求时依然从缓存中获取原来的资源，除非用户清掉或者强刷新，否则看不到最新的效果。
- 强缓存还有一点需要注意：通常都是针对静态资源使用，动态资源需要慎用，除了服务端页面可以看作动态资源外，那些引用静态资源的html也可以看作是动态资源，如果这种html也被缓存，当这些html更新之后，可能就没有机制能够通知浏览器这些html有更新，尤其是前后端分离的应用里，页面都是纯html页面，每个访问地址可能都是直接访问html页面，这些页面通常不加强缓存，以保证浏览器访问这些页面时始终请求服务器最新的资源。
强缓存存在问题的解决方案待续~~~

原文博客地址：http://www.cnblogs.com/lyzg/p/5125934.html#rd?sukey=16298ae1a3e33631bf6ebf978f9b1ce8dcaeb2d696193543bb5cb64b79fbc3bca3db85d585c7be90f1fde83d5f15d035