在前端开发中，性能是一个永恒的话题，没有最好，只有更好。判断一个网站性能好坏，一个直入眼观的即是网页的反应速度，有一个方式就是使用缓存，一个优秀的缓存策略可以缩短网页请求的时间，减少延迟，并且网页可以重复利用，还可以减少带宽，降低网络负荷。
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，你已经是最新的版本了
浏览器：好，那就可以使用本地缓存了
2. 什么是网页缓存
来解决降低互联网流量和提高终端用户响应时间的网络技术，也可以叫做网页缓存技术。
是搜索引擎经行蜘蛛爬行后，备份一份纯文本的备份网页，但是可能不保存CSS样式，网页快照就会出现，没有样式表或者部分错位。
扩展网页搜索结果的时间宽度，当检索某个网页后，网页不存在或者改动，点击网页快照也可以访问，比如访问网络图片，有些检索出来存在网络数据库的图片，原网页消失或者不能访问，通过网络图片搜索是可以访问的，但是无法直接访问原网页图片。
3. 网站内容缓存是什么意思
一、什么是缓存
浏览器缓存这个概念，对于经常用浏览器来浏览信息的用户来说并不十分陌生。用户也许在用浏览器浏览信息时，经常使用“返回”和“后退”的浏览功能，调用你以前阅读过的页面，这时，你会发现显示速度是很快的，其实这些你刚调出来的内容就放在计算机的缓存中，而不需要再次从INTERNET上重新传输数据，这样就会给用户造成了一种访问速度被提高的错觉。所以浏览器缓存其实就是指在本地使用的计算机中开辟一个内存区，同时也开辟一个硬盘区作为数据传输的缓冲区，然后用这个缓冲区来暂时保存用户以前访问过的信息。既然缓存存在于硬盘之中，那么它肯定是以文件夹的形式出现的。各个不同类型的浏览器都有各个不同的文件夹作为缓存使用，在系统的缺省状态下，IE3.0和IE4.0版本的浏览器缓存文件夹为“WINDOWSTemporary Internet Files”，而网景公司的NETSCAPE 3.0浏览器的缓存文件夹为“Program FilesNetscapeNavigatorCache”，但网景公司的高版本浏览器比如NetscapeCommunicator4.0的浏览器缓存文件夹为“PROGRAM FILESUsers用户名cache” 中，其中用户名是用户登录WINDOWS时使用的名字。
二、缓存是如何工作的
当用户在浏览器中设置一定量的磁盘缓存后，浏览器上网工作时会把从网上读出的网页、图像以及其它数据存放在磁盘缓存之中，并建立相应的文档索引。在浏览器以后的工作中，将首先检查磁盘缓冲区中是否存在相应的数据，如果有，则直接从本地磁盘上读出，不再从网上下载，所节省的时间是显而易见的。缓存按照信息存放的位置可以分成内存缓存和硬盘缓存。内存缓存是用于暂时存储本次上网所调用的数据资料的，从INTERNET上传来的每一个网页信息，在内存缓存中都相应地给予保存一个备份，“返回”和“向前”实际上是将以前的页面从内存缓存中调出来并显示在用户的浏览器窗口中，在内存缓存中存放的网页信息量和内存缓存的大小有关，内存缓存越大，保存的网页信息量就越多。硬盘缓存是用于保存用户前几次上网时所调用的信息资料，用户从“历史记录”中调出来的内容其实就是保存在硬盘缓存中的，只要用户开辟的硬盘缓存足够大，将可以保存用户前几个星期甚至几个月前调用过的信息资料。
通过上面的分析，我们发现在浏览器中设置适当的磁盘缓存是相当必要的，并且需要一定的容量，理论上这个值设置得越高，存入缓存的信息就越多，装载它们的速度也就越快。那么是不是设置的缓存容量越大，浏览的效率越高呢？答案当然是否定的，大家都知道物极必反的道理。如果缓存容量设置的太小，所能存放的数据信息量就很小，大部分数据还是需要从网上重新下载，并且系统还要花费一定的系统资源来频繁清除缓存中的数据，最终结果会使浏览速度明显下降，如果这是这样的话，使用缓存到成了一种累赘，还不如不用的好。相反，如果浏览器的缓存设置得太大的话，那么在你的磁盘缓存中存放的数据信息量将很庞大，以后在你每次需要重新访问这些信息时，浏览器将不得不在你的庞大的缓存信息中搜索需要的文档，这样会使你的硬盘频繁工作，所需要的时间将长于从网上下载数据的时间；另外如果缓存容量设置得太大，在硬盘容量一定的情况下，其他系统程序占用的资源将变得相对较少，从而会降低计算机本身的运行速度。在这种情况下，磁盘缓存就失去了应有的作用。通常情况下，浏览器默认的内存缓存数值为600K，如果你的计算机有32～64M内存，并且在运行浏览器系统的时候没有执行更多的其他应用程序，那么可以把这个数值改为4～8M；对于硬盘缓存，浏览器默认的数值为5M，如果你经常要访问的信息量很大，而且计算机中的硬盘有比较多的闲置空间，那么你可以把硬盘缓存的数值设置成500M～1000M。
三、怎样正确设置缓存
用户无论使用的是哪一种浏览器，正确地设置浏览器的缓存参数将大大提高你的浏览效率，同时也将一定程度上改善你的浏览器的工作性能；但是如果使用不恰当，设置不正确那不但不会提高你的工作效率，反而还能降低计算机的运行速度。不同的浏览器有不同的设置方法：
A、IE4.0浏览器设置缓存大小的方法如下:
1、首先打开浏览器的操作窗口，然后用鼠标淡季“查看”菜单中的“Internet选项”，程序会打开一个选项对话框。
2、在选项对话框中找到“INTERNET 临时文件”栏，并用鼠标单击该栏右边的“设置”按钮，同样地程序也会打开一个设置框。
3、在设置框中，用户可以直接用鼠标来移动滑动杆即可改变缓存的大小。
4、参数设置好后，单击“应用”按钮使上述设置生效，最后单击“确定”按钮，退出参数设置对话框。
B、IE5.0浏览器设置缓存大小的方法如下:
1、打开IE5.0操作窗口，在窗口中用鼠标单击“工具”菜单中的“Internet选项”，屏幕上将出现“Internet选项”对话框。
2、在选项对话框中，单击“常规”标签下的“Internet临时文件”设置栏，并用鼠标单击该栏中的“设置”按钮，程序将会打开一个标题为“设置”的对话框；当然，IE4.0以上版本的浏览器带有自动清除磁盘缓存的功能，如果用户想在这里节省硬盘的空间，也可以按“删除文件”按钮，来释放出更多的缓存空间，这种删除缓存内容的方式比较彻底。
3、在“设置”对话框上面有四个单选项：
“每次访问此页时检查”单选项表示浏览器将发送一个信息给所要访问的页面的WEB服务器，查问当前访问的信息是否有变动，如没有变动，就从硬盘缓存中直接调用，而且每次访问都要发送信息给WEB服务器进行验证。
“每次启动INTERNETEXPLORER时检查”表示本次上网浏览器将只发送一次信息给WEB服务器进行验证，以后无论信息是否发生变动，都从硬盘缓存中直接调用所要访问的页面的信息。
“自动”单选项表示浏览器将自动检查所要访问的信息最新是否发生变动，如果变动的话，就从INTERNET上重新下载网页，如果没有变动的话，就直接从硬盘中读取数据。
“不检查”单选项表示对要调用的页面信息不进行校验，只要硬盘硬盘上有，就直接从硬盘中调用。弄清楚了上面四个选项后，用户可以根据自己的实际情况进行设定，浏览器默认选择“自动”这一单选项。
4、接着用户可以在“使用的磁盘空间处”用鼠标直接拖动滑动杆来改变缓存的大小，或者直接在后面的文本框中输入具体的数值。如果用户想改变浏览器缓存的位置，例如用户的C盘空间紧张时或者为了使用方便，用户需要把缓存移到其它分区或者把缓存放到一个易操作的地方，这时就可以通过另外选择一个文件夹来作为缓存，在这里用户只要按下“移动文件夹”并指定要新建的文件夹名称就行了。
5、同样地，参数设置好后，单击“应用”按钮使上述设置生效，最后单击“确定”按钮，退出选项对话框。
C、Netscape3.0浏览器设置缓存大小的方法如下:
1、运行浏览器程序，在浏览窗口中用鼠标单击“Options”菜单下面的“Network Preference”菜单项，浏览器将会弹出一个参数设置窗口。
2、在该窗口中单击“Cache”标签，我们就会发现该标签下提供的设置内容都是与缓存有关的，用户可以根据自己计算机的硬件配置情况，在“Memory”文本栏处输入适当的内存缓存的数值，在“Disk”文本栏处输入需要的硬盘缓存数值。
3、在该标签，用户也可以单击“Clear memory cache now”来直接清除内存缓存中的内容，通过单击“Clear disk cache now”按钮来清除硬盘缓存中的内容。
4、在“Disk cache”文本栏处用户可以另外指定一个文件夹作为硬盘缓存的目录，浏览器默认的缓存目录为“Program FilesNetscapeNavigatorCache”。
5、在“Verify”验证栏处有三个单选项，其中“Once per session”功能与“每次启动INTERNETEXPLORER时检查”相同，“Every time”作用与“每次访问此页时检查” 相同，“Never”当然与“不检查”相同，浏览器默认会选中“Once per session”选项。
6、设置好所有参数后，单击“确定”按钮完成设置任务。
D、Netscape4.0以上版本浏览器设置缓存大小的方法如下:
1、在浏览器操作窗口中，用鼠标单击菜单栏中的“EDIT”菜单项下面的“Preferences”命令，程序会弹出一个设置对话框。
2、在该对话框的目录栏中，选择“Advanced”下面的“Cache”命令，用户就会发现一个与缓存有关的设置界面。
3、这个设置界面与Netscape3.0浏览器的缓存设置界面相似，所以下面的设置基本上就与Netscape3.0浏览器设置缓存大小的方法相同。
好了，到了这里相信大家对浏览器缓存的使用已基本熟悉了。不过，最后笔者还要提醒大家两点的是：1、磁盘缓存如果使用不当或使用时间较长时，有时可以导致浏览器降低工作效率或干脆停止工作，最为典型的现象有两种：一是打开一个网页时硬盘不停的工作，需要很长的时间才有反应。这是因为缓存太长以及缓存中数据太多造成的。另外一种现象就是浏览器干脆不工作，无法打开任何网页。这是因为缓存中的数据文档混乱或者已经破坏造成的。解决此类问题的方法是适当减小缓存尺寸或者定期及时清理缓存中的数据。2、使用缓存后网页有可能不能自动更新，虽然在设置缓存时让它可以自动检测网页是否更新，但实际使用中往往每次都是读出的旧网页内容，这样网上内容更新时用户就不能及时了解。解决上述故障的方法是必须随时按下浏览器的“刷新”或“Reload”按钮。
4. 为什么老是有缓存垃圾呢
比如说你浏览网页，浏览器就会把从网上接收的到的图片或数据暂时性的存在sd卡里。这些东西就是缓存垃圾了。很简单的例子就是，当你浏览下一个网页时，需要等待读取时间，当按返回或后退的时候，却可以立马看到内容。这就是因为这些数据被暂时性的储存了起来