在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。 其中提高网页反应速度的一个方式就是使用缓存 。缓存技术一直一来在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， 因为如果不启用强缓存的话，协商缓存根本没有意义 。
如果资源已经被浏览器缓存下来，在缓存失效之前，再次请求时，默认会先检查是否命中强缓存，如果强缓存命中则直接读取缓存，如果强缓存没有命中则发请求到服务器检查是否命中协商缓存，如果协商缓存命中，则告诉浏览器还是可以从缓存读取，否则才从服务器返回最新的资源。其浏览器判断缓存的详细流程图，如下：
‘贰’ 如何查看谷歌浏览器的缓存
不同系统下，缓存文件位置不太一样。
xp系统下，google浏览器上网缓存文件默认位置在C:\Documents and Settings\user（你的登录账户）\Local Settings\Application Data\Google\Chrome\User Data\Default\Cache
Windows7系统下，则在：C:\Users\你的登录账户\AppData\Local\Google\Chrome\User Data\Default\Cache
‘叁’ internet 缓存文件
一、什么是缓存
浏览器缓存这个概念，对于经常用浏览器来浏览信息的用户来说并不十分陌生。用户也许在用浏览器浏览信息时，经常使用“返回”和“后退”的浏览功能，调用你以前阅读过的页面，这时，你会发现显示速度是很快的，其实这些你刚调出来的内容就放在计算机的缓存中，而不需要再次从INTERNET上重新传输数据，这样就会给用户造成了一种访问速度被提高的错觉。所以浏览器缓存其实就是指在本地使用的计算机中开辟一个内存区，同时也开辟一个硬盘区作为数据传输的缓冲区，然后用这个缓冲区来暂时保存用户以前访问过的信息。既然缓存存在于硬盘之中，那么它肯定是以文件夹的形式出现的。各个不同类型的浏览器都有各个不同的文件夹作为缓存使用，在系统的缺省状态下，IE3.0和IE4.0版本的浏览器缓存文件夹为“WINDOWSTemporary Internet Files”，而网景公司的NETSCAPE 3.0浏览器的缓存文件夹为“Program FilesNetscapeNavigatorCache”，但网景公司的高版本浏览器比如Netscape Communicator4.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服务器进行验证。
“每次启动INTERNET EXPLORER时检查”表示本次上网浏览器将只发送一次信息给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”功能与“每次启动INTERNET EXPLORER时检查”相同，“Every time”作用与“每次访问此页时检查” 相同，“Never”当然与“不检查”相同，浏览器默认会选中“Once per session”选项。
6、设置好所有参数后，单击“确定”按钮完成设置任务。
D、Netscape4.0以上版本浏览器设置缓存大小的方法如下:
1、在浏览器操作窗口中，用鼠标单击菜单栏中的“EDIT”菜单项下面的“Preferences”命令，程序会弹出一个设置对话框。
2、在该对话框的目录栏中，选择“Advanced”下面的“Cache”命令，用户就会发现一个与缓存有关的设置界面。
3、这个设置界面与Netscape3.0浏览器的缓存设置界面相似，所以下面的设置基本上就与Netscape3.0浏览器设置缓存大小的方法相同。
好了，到了这里相信大家对浏览器缓存的使用已基本熟悉了。不过，最后笔者还要提醒大家两点的是：1、磁盘缓存如果使用不当或使用时间较长时，有时可以导致浏览器降低工作效率或干脆停止工作，最为典型的现象有两种：一是打开一个网页时硬盘不停的工作，需要很长的时间才有反应。这是因为缓存太长以及缓存中数据太多造成的。另外一种现象就是浏览器干脆不工作，无法打开任何网页。这是因为缓存中的数据文档混乱或者已经破坏造成的。解决此类问题的方法是适当减小缓存尺寸或者定期及时清理缓存中的数据。2、使用缓存后网页有可能不能自动更新，虽然在设置缓存时让它可以自动检测网页是否更新，但实际使用中往往每次都是读出的旧网页内容，这样网上内容更新时用户就不能及时了解。解决上述故障的方法是必须随时按下浏览器的“刷新”或“Reload”按钮。
‘肆’ 如何查找浏览器的缓存文件
如果软件设计有疏忽或者系统有问题，当安装结束后，这些临时文件就会变得并不“临时”，成为硬盘里的一堆垃圾，很多时候它们以*.tmp的面孔出现。2.软件运行过程中产生的临时文件和安装过程一样，在软件的运行过程中通常也会产生一些临时交换文件，有些软件运行过后遗留下来的垃圾甚至多达数百兆，比如一些程序工作时产生的形如*.old、*.bak这样的备份文件，杀毒软件或系统软件检查硬盘时生成的备份文件等。3.软件卸载后的遗留文件由于Windows的反安装机制实在让人无法恭维，再加上多数软件都使用了动态链接库（DLL），而其中一些软件的设计还不太成熟，导致了很多软件“请神容易送神难”。当这些软件被卸载后，经常会在硬盘中留下一些文件夹、*.dll文件以及形形色色不知名的小东西，成为名副其实的垃圾。在现实生活中，有很多初学者往往会错误地使用直接删除文件夹的方法“卸载”软件，这样就会留下更多无效的类似*.ini、*.dll这样的文件。同时还会在注册表中残存大量废弃数据，对系统的稳定造成更大影响。4.上网冲浪产生的临时文件我们在上网的时候，浏览器总是将网页文件下载到本地机器上，这些缓存文件不但占用了宝贵的磁盘空间，还常常会把我们的个人隐私公之于众，是可忍，孰不可忍。5.一些不常用的鸡肋文件比如一些应用软件自带的帮助或教程文件（常以.hlp等作为后缀），操作系统中多余的字体文件等。既然食之无味索性也将它们视作垃圾文件的一种表现。比如大量的字体文件不仅身体肥壮，占用空间甚大，更会严重拖累系统和一些图形处理软件的运行速度。二、如何删除垃圾文件垃圾文件有如过街老鼠，人人喊打。因此对付它的各种工具软件也是数不胜数。国产软件“环保卫士”和“Windows优化大师”等就是其中的典范。不过，这些共享软件往往在使用过程中会受到某些限制，用起来不是很方便。幸而笔者已经发现了两个完全免费的杀“鼠”方案，下面就简单介绍一下，与大家共享。利用“上网助手”，我们可以删除系统运行一段时间后遗留下来的临时文件和各种其他不需要的文件，节省磁盘空间，提高运行速度。隐私保护功能“上网助手”还可以实现隐私保护功能，它能帮助我们清除上网留下的网页信息（包括地址栏网址、临时文件、历史记录、您输入过的用户名、密码或搜索关键字等）。它甚至还可以将此项功能延伸至清除“开始菜单”中的最近使用过的文档记录、访问“网上邻居”时产生的信息等等。其操作都采用向导方式，非常容易上手。2.绿色的“垃圾文件清理器（FileClear）”这是软件作者在业余时间用C++ Builder编写的一个免费小工具（仅有335KB），下载后无须安装即可直接使用（下载网址：）。这款工具的界面相当简洁，运行速度比较快，基本的“扫描”、“备份”和“删除”功能完全具备。惟一的缺陷就是自身收集的垃圾文件扩展名比较少，需要我们通过“添加类型”功能来为其补充新鲜血液。三、清理注册表不用怕Windows的注册表在操作系统中起着举足轻重的作用，它包含了系统初始化、应用程序初始化信息等一系列Windows运行信息和数据。在一些不需要的软件卸载后，Windows注册表中有关已经卸载的应用程序参数往往不能清除干净，因此要想彻底删除干净软件的遗留残渣，还需要对注册表进行清理，另外一个原因是如果有大量已删除软件的残渣遗留，系统经过长时间使用，在启动速度、运行速度等方面都会变的缓慢无比，所以经常给注册表进行“减肥”运动是非常必要的。可以手工进行清理注册表，但是是一件很烦琐的事，需要一点一点查找，并且手动修改，鉴于上面提到的注册表在整个系统中举足轻重的重要性，手动改正是很危险。那么我们就来看一款清理注册表的软件，这也是单位的电脑高手推荐给笔者的，的确让笔者省心不少，现在已经安装好FTP新软件了，并且对注册表进行“有史以来”的大清理，实在是有点不好意思。笔者使用的这款注册表清理工具是微软编写的免费软件RegClean。
‘伍’ 如何查查找浏览器里的缓存任务文件
小编有一个十分简单的方法，如下：
在ie里，选择“工具”-internet选项-internet临时文件（设置）-察看文件，就能打开缓存文件夹。
‘陆’ 如何提取chrome浏览器缓存中的视频和音乐
方法如下：
1、在chrome浏览器中，可以利用F12键审查元素的功能查出原视频或音乐的源地址，可以通过源地址下载下来；
‘柒’ 想问下高手怎么截取浏览器的缓存，
LZ是想提取已经在网页上打开的Flash或者图片吗？
打开IE——工具——Internet选项——浏览器历史记录标题下的设置——查看文件 即可~！
建议改为详细列表——按类型或时间排列。方便LZ找自己想要的东西！！
‘捌’ 如何直接从浏览器缓存获取资源
打开流览器，点菜单栏的工具～INTERNET选项，～到常规选项卡找到临时文件区，点那个按钮就打开查看临时文件的路径，回我的电脑安这个路径依次打开文件夹就找到了