浏览器缓存知识+JS实现缓存

最新推荐文章于 2025-07-04 13:28:46 发布

Qian_mos

最新推荐文章于 2025-07-04 13:28:46 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Qian_mos/article/details/84795426

前端专栏收录该内容

35 篇文章

订阅专栏

本文深入探讨浏览器缓存的三大策略：缓存存储、过期及对比策略，详细解释了HTTP头中如Etag、Last-modified、cache-control的作用。同时介绍了JavaScript实现缓存的方法，包括变量缓存、localStorage、sessionStorage以及HTML5的离线缓存清单（manifest）。通过示例阐述了如何利用JS操作manifest进行缓存更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http header中与缓存有关的关键属性
在这里插入图片描述

Etag：倾向于资源是否变更
Last-modified: 倾向于时间状态的变更。
cache-control：[public、private、no-store、max-page]
优先级高于其他一切设置，若有与之抵触的设置，一律覆盖掉。
public：资源被客户端和代理服务器缓存
private：资源被客户端缓存，代理服务器不会缓存。
no-store：请求和响应都不缓存。
max-age：缓存资源，但是在指定的时间后缓存过期。

浏览器请求首部字段
在这里插入图片描述
强缓存
强缓存下，浏览器不会向服务器发生请求，而是直接读取缓存。
如可以在浏览器下看到的from disk cache/from memory cache。对于一般的请求，若是存在该资源的缓存，并且在cache-control:max-age或者expires没有过期，就会命中强缓存。

协商缓存
在缓存过期后，继续请求该资源，需要重新验证缓存资源是否有效，采取的做法一般有两种（Etag比last-modified-value优先级高）：

比较Etag和if-none-match：根据response header中的etag，浏览器向request header中添加if-none-match字段，服务器拿到请求后，将if-none-match的值与资源的Etag值进行比较，若相同则用协商缓存，返回304响应。
比较last-modified_value和if-modified-since：根据response header中的last-modified_value，浏览器向request header中添加if-modified-since字段，服务器拿到请求后，将if-modified-since的值与资源的last-modified的值进行比较，若相同则用协商缓存，返回304响应。

为更好帮助理解，贴上浏览器请求流程图：
在这里插入图片描述
启发式缓存
在没有设置缓存过期策略的情况下，浏览器会遵循一个启发式缓存过期的策略：(date - last-modified)*10%，以该时间为缓存过期时间。

缓存策略

1. 缓存存储策略

cache-control：private，响应数据会被缓存到客户端

2. 缓存过期策略

expires：设置缓存的过期时间
在没有设置缓存过期策略的情况下，浏览器会遵循一个启发式缓存过期的策略：(date - last-modified)*10%，以该时间为缓存过期时间。

3. 缓存对比策略

last-modified：浏览器会携带该值去服务器比对，对比成功会返回304，服务器提示浏览器从本地加载数据；若是对比失败会返回200，则服务器会返回响应请求数据，客户端收到数据展示并刷新本地缓存。

用户操作：地址栏回车、页面链接跳转、前进后退—强缓存
F5刷新–对协商缓存有效；新开窗口—协商缓存

参考资料：
https://mp.weixin.qq.com/s?__biz=MzA5NzkwNDk3MQ==&mid=2650588307&idx=1&sn=caf9227d2f25ac0cdd6dbb4dea985331&chksm=8891d4b7bfe65da10a329b5610acd3ca2cd99ca9e36311dce9cf32011190d82d8046733dadba&mpshare=1&scene=23&srcid=1204BHrPDeT7UZoGlmb7iEdS#rd

https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651553205&idx=3&sn=3e509010560ca3b7e9b1d0aeea3da732&chksm=8025aa74b752236210213929f8bf7b7aef642d1a9607100e851d2158aa4d0d327d1cb9c05a8c&mpshare=1&scene=23&srcid=1204sJUvyvEzsTj5MlTWKztU#rd

http://www.cnblogs.com/vajoy/p/5341664.html

js实现缓存

1 缓存变量----问题需要使用完毕回收变量内存 var XXX=缓存的数据；
2 localstorage： window.localStorage，setItem(“key”, “value”)，getItem(key)，clear()等
访问localstorage对象的页面必须来自同源，子域名无效
3 sessionStorage: window.sessionStorage， setItem(“key”, “value”)，getItem(key)，clear()，key(index)、removeItem()等
sessionStorage的数据在浏览器支持下可以跨页面刷新存在，但是数据只能由最初存储对象数据的页面访问到，多页面应用不行。
注意：当key一样的时候，后面的value会覆盖之前的

4 manifest离线缓存清单 < html manifest=“xxx.appcache”>
manifest描述文件有三个字段
CACHE MANIFEST里面是离线缓存的资源URI；
NETWORK 是在线才能读取的资源文件;
FALLBACK 是指资源文件读取不到时反馈的备选文件
manifest更新方式：
1 js操作 window.applicationCache.update()
JavaScriptAPI有个核心对象可以帮助我们知道了解manifest的状态----applicationCache对象，这个对象有status属性和相关事件；
status值
0：无缓存，没有与页面相关的应用缓存
1：闲置，应用缓存没有更新；
2：检查中，正在下载描述文件并检查更新
3：下载中，应用缓存在下载描述文件里制定的资源
4：更新完成，应用缓存已经更新了资源，所有资源也都下载完毕可以通过swapCache()来启用新的缓存
5：表示废弃，缓存的描述文件不存在，所以应用无法再访问应用缓存。
事件：
checking：浏览器正在应用缓存中查找更新
error：检查更新或者下载资源时出错
noupdate：检查描述文件发现没有变化会触发该方法
downloading：开始下载应用缓存资源时触发
progress：在下载文件资源过程中触发。
updateready：更新资源完毕通过调用swapCache()触发
cached：应用缓存已经都准备好了。
**applicationCache.update()**会去检查是否更新即触发checking事件。

EventUtil.addHandler(applicationCache, "updateready", function() {
    applicationCache.swapCche();
})

2 修改manifest文件
3 手动清除浏览器缓存后会再次访问时自动下载资源