前端协商缓存强缓存如何使用_前端强缓存和协商缓存

缓存是前端面试的一个常见知识点，下面对于实际项目中如何进行缓存的设置给出方案。

强缓存和协商缓存

浏览器缓存是浏览器将用户请求过的静态资源存储到电脑本地磁盘中，当再次访问时，就可以直接从本地缓存中加载而不需要去向服务器请求了。但是缓存也有缺点，如果服务端资源更新了，客户端没有强制刷新的情况下，看到的内容还是旧的。所以，前端需要根据项目中各个资源的实际情况，做出合理的缓存策略。这就出现了强缓存和协商缓存。

强缓存：通过http的response header中的Cache-Control和Expire两个字段控制。其中Expire基本上已经淘汰了，不用管，主要看Cache-Control的几个取值含义：

private：仅浏览器可以缓存

public：浏览器和代理服务器都可以缓存

max-age=xxx：过期时间

no-cache：不进行强缓存

no-store：不强缓存，也不协商缓存

强缓存步骤：1，第一次请求文件时，缓存中没有该信息，直接请求服务器。

2，服务器返回请求的文件，并且http response header中cache-control为max-age=xxx

3，再次请求该文件时，判断是否过期，如果没有过期，直接读取本地缓存，如果已经过期了，则进行协商缓存。

协商缓存：它的触发条件有两点，其一是Cache-Control 的值为 no-cache，其二是max-age 过期了。协商缓存中还有两个重要的规则：

ETag：每个文件有一个，改动文件了就变了

Last-Modified：文件的修改时间

协商缓存步骤：1，请求资源时，要同时比较本地该资源的ETag和Last-Modified(主要是ETag)和服务器最新资源该资源的ETag

2，如果资源没有被更新，返回304状态码，浏览器读取本地缓存

3，如果资源已经被更新，返回200状态码，浏览器获取服务器最新资源。

最大的问题就是每次都要向服务器验证一下缓存的有效性，但是这就使缓存失去了意义。

所以，给出一个比较合理的缓存方案：

HTML：使用协商缓存

CSS&JS&图片：使用强缓存

ETag计算

Nginx

Nginx官方默认的ETag计算方式是为"文件最后修改时间16进制-文件长度16进制"。例：ETag： “59e72c84-2404”

Express

Express框架使用了serve-static中间件来配置缓存方案，其中，使用了一个叫etag的npm包来实现etag计算。

后端需要怎么设置

以nodejs为例，如果需要浏览器强缓存，可以这样设置：

res.setHeader('Cache-Control', 'public, max-age=xxx');

如果需要协商缓存，则可以这样设置：

res.setHeader('Cache-Control', 'public, max-age=0');

res.setHeader('Last-Modified', xxx);

res.setHeader('ETag', xxx);

前端协商缓存强缓存如何使用_前端强缓存和协商缓存相关推荐

本地缓存需要高时效性怎么办_详解微信小程序缓存--缓存时效性
关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearS ...
layui前端页面table表格怎么格式化转换时间_前端开发面经知识点总结
HTTP,HTML,浏览器 1.说一下http和https 2.tcp三次握手,一句话概括 3.TCP和UDP的区别 4.WebSocket的实现和应用 6. 一个图片url访问后直接下载怎样实现? ...
多个前端项目放在一个git好还是_前端工作流
没有规矩不成方圆,如果一个项目只有你一个人在维护,那么你不需要担心很多问题,因为你对它心知肚明,但同时一个人的力量无法支撑起来大型项目.更多时候,我们需要与其他人合作,共同把项目推进,这意味着我们需要 ...
前端重构时需要注意的事项_前端数据层落地实践
源宝导读:天际移动平台经过重构改版,近期正式发布了1.0版本,我们在低代码开发方面做了进一步增强.本文主要围绕前端Model.前端业务逻辑(领域模型).数据层与视图层解耦(包装器模式)3个方面,给大家 ...
前端中全部盒子靠左对齐_前端面试一百问之弹性盒子中 flex: 0 1 auto 表示什么意思...
flex Box 布局(Flexible Box)旨在提供一种更有效的方式来布局.对齐和分配容器中项目之间的空间,即使它们的大小是未知的或动态改变的.其主要思想是让容器能根据可用空间的大小来动态地改变 ...
前端实现可绘制的canvas画布_前端图形学基础（五）——Canvas状态管理
点击右上角的关注,不定期前端干货分享!! 欢迎来到我的前端图形学系列文章: 前端图形学基础(一)--Canvas基础入门前端图形学基础(二)--Canvas基础前端图形学基础(三)--Canvas ...
前端js获取图片大小扩展名_前端 JS 获取 Image 图像宽高尺寸
前端 JS 获取 Image 图像宽高尺寸简介项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...
前端如何实现网络速度测试功能_前端组件单元测试
啥?单元测试?我哪有时间写单元测试? 从软件质量说起日常生活中,商品质量永远是我们进行选择时需要着重考虑的因素,计算机软件也不例外.优秀的软件应当如我们预期的一样工作,能够正确地处理所有功能性需求. ...
前端实现照片选取范围上传_前端代码是怎样智能生成的？看看大佬怎么说
作者|莱斯出品|阿里巴巴新零售淘系技术部导读: 作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.3 ...
前端js获取图片大小扩展名_前端获取图片存储大小的方法
1利用input元素获取如果是input元素 var file=document.getElementById('myinput'); var fileData = file.files[0]; v ...

前端协商缓存强缓存如何使用_前端强缓存和协商缓存

前端协商缓存强缓存如何使用_前端强缓存和协商缓存相关推荐

最新文章

热门文章