在面试的时候总是遇到缓存相关问题，回答总是停留缓存就是从浏览器中获取，不向服务器发送请求，回答的不让面试官满意，索性抽点时间整理一下前端相关的缓存，希望下次回答的时候能够多讲点。
前端缓存分为 强缓存 和 协商缓存 ，强缓存就是在缓存未失效时，不在请求服务端，协商缓存就是去跟服务器比较是否需要重新获取资源 。
强缓存分为两种， Cache-control 和 Expires ， Expires 是HTTP1.0的东西，它的值是一个格林时间，比如 Expires: Wed, 21 Oct 2015 07:28:00 GMT ，由于服务器端和浏览器端的时间差异问题，浏览器比服务器时间快，会导致缓存失效。 Cache-control 是HTTP1.1时代的新东西，设置的是一个相对时间， Cache-Control:public, max-age=31536000 ，在31536000秒后才缓存才失效， Cache-control 有很多取值。
强缓存在缓存失效内，不会从原始服务器获取新的数据，假如在缓存时段内服务器有资源更新，会导致资源获取不及时。
协商缓存有两组报文
㈡ 前端数据存储方式有哪些
为你总结了四种数据存储方式，希望可以帮到你：
1、Cookie
cookie 用于存储web页面的用户信息。
cookie 是一些数据，存储在你电脑上的文本文件中。当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。Cookie的作用就是用于解决如何记录客户端的用户信息。
2、localStorage
允许在浏览器中存储key/value对的数据。
用于长期保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
属性是只读的。
如果你想浏览器窗口关闭后还保留数据，可以使用localStorage；如果你只想将数据保存在当前会话中，可以使用sessionStorage.
3、sessionStorage
允许在浏览器中存储key/value对的数据。
数据对象临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后也将删除这些数据。
4、indexedDB
索引数据库（indexDB）API（作为HTML5 的一部分）对创建具有吩咐本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用。
同时它还有助于本地缓存数据，使传统再现Web应用程序（比如移动 Web 应用程序）能够更快的运行和响应。
想要了解或者学习更多前端知识，推荐北京尚学堂，雄厚的师资力量带给你高效的学习体验。
㈢ ☆前端优化：浏览器缓存技术介绍
在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。 其中提高网页反应速度的一个方式就是使用缓存 。缓存技术一直一来在WEB技术体系中扮演非常重要角色，是快速且有效地提升性能的手段。
一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
所以，缓存技术是无数WEB开发从业人员在工作过程中不可避免的一大问题。 在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度 。了解浏览器的缓存命中原理，是开发WEB应用的基础，本文着眼于此，学习浏览器缓存的相关知识，总结缓存避免和缓存管理的方法，结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助。
在实际WEB开发过程中，缓存技术会涉及到不同层、不同端，比如：用户层、系统层、代理层、前端、后端、服务端等， 每一层的缓存目标都是一致的，就是尽快返回请求数据、减少延迟 ，但每层使用的技术实现是各有不同，面对不同层、不同端的优劣，选用不同的技术来提升系统响应效率。所以，我们首先看下各层的缓存都有哪些技术，都缓存哪些数据，从整体上，对WEB的缓存技术进行了解，如下图所示：
本篇文章重点讲的就是上面红色框部分缓存内容。
当浏览器请求一个网站的时候，会加载各种各样的资源，比如：HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容，浏览器会将他们保存在本地的文件中，下次访问相同网站的时候，直接加载这些资源，加速访问。
那么如何知晓浏览器是读取了缓存还是直接请求服务器？如下图网站来做个示例：
第一次打开该网站后，如果再次刷新页面。会发现浏览器加载的众多资源中，有一部分size有具体数值，然而还有一部分请求，比如图片、css和js等文件并没有显示文件大小，而是显示了 from dis cache 或者 from memory cache 字样。这就说明了，该资源直接从本地硬盘或者浏览器内存读取，而并没有请求服务器。
浏览器启用缓存至少有两点显而易见的好处： （1）减少页面加载时间；（2）减少服务器负载；
浏览器是否使用缓存、缓存多久，是由服务器控制的 。准确来说，当浏览器请求一个网页（或者其他资源）时， 服务器发回的响应的“响应头”部分的某些字段指明了有关缓存的关键信息 。下面看下，HTTP报文中与缓存相关的首部字段：
根据上面四种类型的首部字段不同使用策略， 浏览器中缓存可分为强缓存和协商缓存 ：
当浏览器对某个资源的请求命中了强缓存时， 返回的HTTP状态为200 ，在chrome的开发者工具的network里面 size会显示为from cache ，比如：京东的首页里就有很多静态资源配置了强缓存，用chrome打开几次，再用f12查看network，可以看到有不少请求就是从缓存中加载的：
Expires是HTTP 1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示 ，如：Expires:Thu, 31 Dec 2037 23:55:55 GMT，包含了Expires头标签的文件，就说明浏览器对于该文件缓存具有非常大的控制权。
例如，一个文件的Expires值是2020年的1月1日，那么就代表，在2020年1月1日之前，浏览器都可以直接使用该文件的本地缓存文件，而不必去服务器再次请求该文件，哪怕服务器文件发生了变化。
所以， Expires是优化中最理想的情况，因为它根本不会产生请求 ，所以后端也就无需考虑查询快慢。它的缓存原理，如下：
Expires是较老的强缓存管理header， 由于它是服务器返回的一个绝对时间 ，在服务器时间与客户端时间相差较大时，缓存管理容易出现问题， 比如：随意修改下客户端时间，就能影响缓存命中的结果 。所以在HTTP 1.1的时候，提出了一个新的header， 就是Cache-Control，这是一个相对时间，在配置缓存的时候，以秒为单位，用数值表示 ，如：Cache-Control:max-age=315360000，它的缓存原理是：
Cache-Control描述的是一个相对时间 ，在进行缓存命中的时候， 都是利用客户端时间进行判断 ，所以相比较Expires，Cache-Control的缓存管理更有效，安全一些。
这两个header可以只启用一个，也可以同时启用， 当response header中，Expires和Cache-Control同时存在时，Cache-Control优先级高于Expires ：
此外，还可以为 Cache-Control 指定 public 或 private 标记。 如果使用 private，则表示该资源仅仅属于发出请求的最终用户，这将禁止中间服务器（如代理服务器）缓存此类资源 。对于包含用户个人信息的文件（如一个包含用户名的 HTML 文档），可以设置 private，一方面由于这些缓存对其他用户来说没有任何意义，另一方面用户可能不希望相关文件储存在不受信任的服务器上。需要指出的是，private 并不会使得缓存更加安全，它同样会传给中间服务器（如果网站对于传输的安全性要求很高，应该使用传输层安全措施）。 对于 public，则允许所有服务器缓存该资源 。通常情况下，对于所有人都可以访问的资源（例如网站的 logo、图片、脚本等）， Cache-Control 默认设为 public 是合理的 。
当浏览器对某个资源的请求没有命中强缓存， 就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串 ，比如你打开京东的首页，按f12打开开发者工具，再按f5刷新页面，查看network，可以看到有不少请求就是命中了协商缓存的：
查看单个请求的Response Header， 也能看到304的状态码和Not Modified的字符串，只要看到这个就可说明这个资源是命中了协商缓存，然后从客户端缓存中加载的 ，而不是服务器最新的资源：
【Last-Modified，If-Modified-Since】的控制缓存的原理，如下 ：
【Last-Modified，If-Modified-Since】都是根据服务器时间返回的header，一般来说， 在没有调整服务器时间和篡改客户端缓存的情况下，这两个header配合起来管理协商缓存是非常可靠的，但是有时候也会服务器上资源其实有变化，但是最后修改时间却没有变化的情况 ，而这种问题又很不容易被定位出来，而当这种情况出现的时候，就会影响协商缓存的可靠性。 所以就有了另外一对header来管理协商缓存，这对header就是【ETag、If-None-Match】 。它们的缓存管理的方式是：
Etag和Last-Modified非常相似，都是用来判断一个参数，从而决定是否启用缓存。 但是ETag相对于Last-Modified也有其优势，可以更加准确的判断文件内容是否被修改 ，从而在实际操作中实用程度也更高。
协商缓存跟强缓存不一样，强缓存不发请求到服务器， 所以有时候资源更新了浏览器还不知道，但是协商缓存会发请求到服务器 ，所以资源是否更新，服务器肯定知道。大部分web服务器都默认开启协商缓存，而且是同时启用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】，比如apache:
如果没有协商缓存，每个到服务器的请求，就都得返回资源内容，这样服务器的性能会极差。
【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】一般都是同时启用，这是为了处理Last-Modified不可靠的情况。有一种场景需要注意：
比如，京东页面的资源请求，返回的repsonse header就只有Last-Modified，没有ETag：
协商缓存需要配合强缓存使用，上面这个截图中，除了Last-Modified这个header，还有强缓存的相关header， 因为如果不启用强缓存的话，协商缓存根本没有意义 。
如果资源已经被浏览器缓存下来，在缓存失效之前，再次请求时，默认会先检查是否命中强缓存，如果强缓存命中则直接读取缓存，如果强缓存没有命中则发请求到服务器检查是否命中协商缓存，如果协商缓存命中，则告诉浏览器还是可以从缓存读取，否则才从服务器返回最新的资源。其浏览器判断缓存的详细流程图，如下：
㈣ 如何解决前端开发中的缓存问题
function loadFile(arr) {
let now = new Date();
let timestamp = "?t=" + now.getTime();
let head = document.getElementsByTagName("head")[0];
}
$(function(){
var js_arr=["alert.js","alert.css"];
loadFile(js_arr);
});现在的大多数浏览器都有缓存机制，目的是减少客户端的访问次数，减轻服务器的压力。但是在开发工程中或者是版本更新过程中，缓存机制的存在会使得程序版本已经更新，但是效果不能出现的状况，需要开发人员频繁的清除缓存，并不友好，特此总结以下几种方式（以谷歌为例），仅供参考，如有雷同，不甚荣幸。
1.对于开发者来说，只需要关闭浏览器缓存就可以了。步骤是：浏览器右键打开检查，找到network,下边有Disable cache选项，只要将其打勾即可
2.开发者可以关闭缓存，但是并不能要求所有用户都进行此类操作，此时可以在引用的文件之后拼接随机数或者日期都可以，浏览器就会认为是新的请求，而不会使用缓存中的文件，具体如下（只演示大概思路，具体使用，具体修改）：
㈤ 前端浏览器缓存机制
在前端开发中，性能是一个永恒的话题，没有最好，只有更好。判断一个网站性能好坏，一个直入眼观的即是网页的反应速度，有一个方式就是使用缓存，一个优秀的缓存策略可以缩短网页请求的时间，减少延迟，并且网页可以重复利用，还可以减少带宽，降低网络负荷。
1： 为什么需要缓存？
a：缓存可以减少用户等待时间，提升用户体验
b：减少网络带宽消耗
c：降低服务器压力
Note：缓存使用不当，也会造成‘脏数据’问题
2：常见的缓存类型
强缓存 -
Expires服务器端设置，表示该资源的过期时间，会有弊端，客户端时间和服务器时间不一致的问题。
Cache-Control：max-age表示缓存资源的最大生命周期，单位是秒
所以Expires 结合 Cache-Control 一起使用，大型网站中一般比较适用
协商缓存-
Last-Modified：值为资源的最后更新时间，随服务器response返回
If-Modified-Since：通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有，则命中协商缓存
Etag：表示资源内容的唯一标识，即资源的消息摘要
If-None-Match：服务器通过比较请求头中的If-None-Match与当前资源的Etag是否一致来判断资源是否在两次请求期间有过修改
3：缓存流程图示：
a：浏览器会先检测强缓存类型（Cache-Control 或者 Expires）是否有效；命中直接浏览器本地获取缓存资源
b：未命中。服务器会根据请求头Request Header验证这个资源是否命中协商缓存，称之为HTTP二次验证，命中，服务器返回请求，但返回资源，而是告诉客户端直接中直接从浏览器缓存中获取
Note：
1.强缓存不会发生请求，协商缓存存在服务器请求
2.当协商缓存也未命中时，则服务器会将资源发送到客户端
3.F5刷新页面，会跳过强缓存
4.Ctrl+F5刷新页面，跳过强缓存和协商缓存
5.不会缓存的情况
HTTPS POST请求 根据Cookie获取认证信息 Request Header Cache-Control：no-cache， max-age=0
6.小故事大道理
上文对整个概念做了阐述，还是不够形象，我们来通过几个小故事生动理解一下：
故事一：Last-Modified
浏览器：Hi，我需要 jartto.min.js 这个文件，如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT 之后修改过的，请发给我。
服务器：（检查文件的修改时间）
服务器：Oh，这个文件在那个时间之后没有被修改过，你已经有最新的版本了。
浏览器：太好了，那我就显示给用户了。
故事二：ETag
浏览器：Hi，我需要 jartto.css 这个文件，有没有不匹配 3c61f-1c1-2aecb436 这个串的
服务器：（检查 ETag…）
服务器：Hey，我这里的版本也是 3c61f-1c1-2aecb436，你已经是最新的版本了
浏览器：好，那就可以使用本地缓存了
㈥ 能用JS或者前端的什么方法实现清除浏览器缓存吗
可以用JS实现清除浏览器缓存，解决方法如下：
1、在静态页面也就是以.html，.jsp，.aspx，.php结尾的文件中在<dead></head>中加入以下代码。
注意事项：
JavaScriptJavaScript基于对象和事件驱动并具有相对安全性的客户端脚本语言。也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。
㈦ 前端http请求细节——Cache-Control（缓存机制）
请求和响应中的 Cache-Control 指令并不完全相同，具体可以查看 这里 ，包括指令的具体意思，这里不过多赘述。（默认值：private）
浏览器的缓存机制是根据 HTTP 报文的缓存标识进行的，浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中 HTTP 头的缓存标识，决定是否缓存结果。
浏览器缓存策略分为两种：强制缓存和协商缓存。
强制缓存不会向服务器发送请求，直接从缓存中读取资源，可以看到请求返回的状态码都是200，并且 Size 代表该缓存的位置。
浏览器读取缓存的顺序为memory –> disk。
三级缓存原理 (访问缓存优先级)：
在浏览器中，浏览器会在js，字体，图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。
为什么CSS会放在硬盘缓存中？
因为CSS文件加载一次就可渲染出来,我们不会频繁读取它,所以它不适合缓存到内存中,但是js之类的脚本却随时可能会执行,如果脚本在磁盘当中,我们在执行脚本的时候需要从磁盘取到内存中来,这样IO开销就很大了,有可能导致浏览器失去响应。
若服务器的资源最后被修改时间 > If-Modified-Since的字段值
则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件
If-None-Match 的字段值 = 该资源在服务器的Etag值
一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200。
ETag 和 Last-Modified 区别
参考链接：
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://www.cnblogs.com/suihang/p/12855345.html
https://www.jianshu.com/p/54cc04190252
㈧ 前端缓存的理解 或者 前端数据持久化的理解(强制缓存、协商缓存)
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于 缓存文件可以重复利用 ，还可以减少带宽，降低网络负荷。
对于一个数据请求来说，可以分为发起 网络请求、后端处理、浏览器响应 三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。
①不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求
②存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存
③存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果
控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。
Cache-Control、Expires都是缓存到期时间，Cache-Control是相对值，Expires是绝对值，即再次发送请求时，如果时间没到期，强制缓存生效。
注：在无法确定客户端的时间是否与服务端的时间同步的情况下，Cache-Control相比于expires是更好的选择，所以同时存在时，只有Cache-Control生效。
①协商缓存生效，返回304
②协商缓存失效，返回200和请求结果
这里我们以博客的请求为例，状态码为灰色的请求则代表使用了强制缓存，请求对应的Size值则代表该缓存存放的位置，分别为from memory cache 和 from disk cache。那么from memory cache 和 from disk cache又分别代表的是什么呢？什么时候会使用from disk cache，什么时候会使用from memory cache呢？
from memory cache代表使用 内存中的缓存 ，from disk cache则代表使用的是 硬盘中的缓存 ，
㈨ web前端怎么用代码实现缓存优化
有以下集中方法
方法一：针对浏览器设置过期时间，在这个时间内的请求都会先请求本地缓存的文件和数据。另外jquery的ajax请求方式可以设置是否缓存，可以充分利用该选项。
方法二：js请求限制，可以设计成多少秒以内都不响应响应的操作，过期后的操作才会有效。点击后仅返回一个仿真的结果。
方法三：ajax做dom缓存策略，比如在页面放一个不可见的textarea,请求过来的数据同时写入textarea的value，并且在一定时间内（可设置）的请求只去读取textarea的内容，并将结果展示到页面上。