宁波品牌网站推广优化,中国消防公众号关注,seo ,多用户商城系统开发公司一句话概括#xff1a;浏览器请求资源的时候#xff0c;会首先检查本地是否有缓存#xff0c;减少向服务器请求的次数
一、缓存类型#xff1a;
1. 强缓存#xff08;本地缓存#xff09;#xff1a;直接读本地#xff0c;不发请求
控制方式#xff1a; ① Cache-C…一句话概括浏览器请求资源的时候会首先检查本地是否有缓存减少向服务器请求的次数
一、缓存类型
1. 强缓存本地缓存直接读本地不发请求
控制方式 ① Cache-Control(HTTP1.1):优先级高 max-age秒数 public可被缓存包括代理服务器 private客户端缓存 no-cache强制走协商缓存验证(不要直接用本地缓存必须去验证验证完了再说用不用) no-store禁止缓存每次都需要请求服务器 通常情况时服务端配置少数情况前端可通过meta标签配置但优先级低于服务端响应头meta http-equivCache-Control contentmax-age3600② Expires(HTTP1.0)指定资源过期时间
2. 协商缓存服务器验证浏览器发请求验证是否可用返回304则可用
控制方式 ① Last-Modified If-Modified-Since 服务器返回资源时带LM最后修改时间 浏览器下次请求时带IMS上次修改时间服务器对比是否更新 ** Last-Modified服务器主动添加表示资源的最后修改时间If-Modified-Since浏览器自动发送无需手动添加 **② ETag If-None-Match 更精准 服务器返回资源时带ETag资源内容hash 浏览器下次请求时带If-None-Match服务器对比hash
总结浏览器缓存分为强缓存和协商缓存。强缓存即直接读取本地缓存它的控制方式是cache-control可以设置过期时间也可以设置no-cache强制走协商缓存。协商缓存即是浏览器先发一个请求验证缓存是否可用若返回304则可用验证的方式有两种一种是对比修改时间一种是对比内容hash
二、如何设计缓存策略数据类型更新频率用户体验
1. 浏览器原生缓存
场景存储资源 强缓存静态资源图片、CSS、js、字体设置长一些的过期时间 协商缓存结合ETag对比更新版本控制 -- URL版本号?v1.0.0
2. 本地存储
场景存储用户配置、登录信息、需跨页面共享的临时数据
localStorage数据永久保存除非手动清除或浏览器清除容量较大同源共享 适用于缓存用户配置、主题偏好等 sessionStorage会话级浏览器关闭后自动删除容量较大不同标签页不共享 适用于缓存分页状态等 cookie自动发送到服务端fetch默认不带容量小可设置过期时间可配置作用域 适用于登录凭证JWT服务端会话状态SessionID
3. 内存缓存
场景存储频繁访问、更新频率低的数据下拉列表选项等 通过维护全局变量一次请求后续直接读取可配合定时器或事件监听定时更新
4. 接口请求缓存Axios等库自定义缓存
场景列表数据、详情页数据 axios-interceptors拦截请求判断是否读取缓存 根据用户操作调整策略下拉刷新 -- 强制更新手动刷新按钮
三、调试
Chrome浏览器的开发工具Chrome DevTools - Network - Size显示from cache表示使用缓存 勾选 Disable cache 可强制禁用缓存开发时常用·
