利用浏览器缓存

① 浏览器缓存的方式和类型（笔记）

浏览器缓存只是计算机缓存的一种

1.内存缓存
将数据存到内存
2.代理服务器缓存
就是个自己找的中介。你拿东西先找中介，中介找房东，房东给中介，中介又给你。比如你需要房子钥匙，房东把钥匙放在中介那，你直接从中介那里拿钥匙。
3.CDN缓存
将数据存到CDN服务器。CDN也是个中介，不过这个中介是根据中介的忙碌程度（CDN服务器忙碌程度）、跟你的距离（CDN服务器和你的距离）自动给你分配的。
4.浏览器缓存（ 我是个前端，只关注浏览器缓存。 ）
根据HTTP协议决定要不要缓存，以什么方式缓存，缓存到哪（内存还是硬盘等）。

浏览器缓存是将浏览器请求过的数据（资源文件）保存到电脑上。需要再次使用的时候，直接从电脑上获取保存的数据（资源文件），这就是浏览器缓存

1.减少网络请求，节省流量
2.减轻服务器压力
3.资源加载速度快了，前端性能就更好了

1.Server Worker
还没搞懂，搞懂了再来写。
2.Memory Cache
内存中的缓存，关闭页面进程就释放内存
3.Disk Memory
硬盘中的缓存，不主动清理就一直在

4、Push Cache
推送缓存，是HTTP/2的内容，并没有严格执行HTTP头部的缓存指令。在Server Worker、Memory Cache、Disk Cache都没有命中的时候，它会被使用。在Session中存在，Session结束就会被释放，缓存时间短暂。

1.先去内存查找，找到直接加载
2.内存找不到，硬盘中找，找到直接加载
3.硬盘找不到进行网络请求
4.把请求获取的资源再缓存到硬盘和内存

1.强缓存
控制强制缓存的字段分别是Expires和Cache-Control，Cache-Control优先级比Expires高
-Expires设置一个绝对时间的GMT格式的时间字符串，这个是资源失效时间（ 客户端的时间小于Expires的值，缺陷就是客户端的时间被改变就有问题 ），在这个时间之前都直接读取缓存。
-Cache-Control替代Expires，它利用的是相对时间，利用header信息字段的max-age值判断。
2.协商缓存
-Last-Modified/If-Modified-Since
Last-Modified:浏览器向服务器发送资源最后的修改时间
If-Modified-Since:当资源过期时，发现响应头具有Last-Modified声明，则再次向服务器请求时带上头if-modified-since，表示请求时间。服务器收到请求后，发现有if-modified-since则与被请求资源的最后修改时间进行对比（Last-Modified）,若最后修改时间较新，说明资源又被改过，则返回最新资源，返回200；若最后修改时间较小，说明资源无新修改，返回304 ，使用缓存文件。
缺点:单位是秒，一秒内多次改变会认为没过期
-ETag/If-None-Match
ETag:由服务器生成返回给前端，帮助服务器控制web端的缓存验证，服务器会生成并且返回当前资源文件的一个唯一标识
If-None-Match:当资源过期时，发现响应头具有Etag声明，则再次向服务器请求时带上头if-none-match（唯一标识Etag值）。服务器收到该请求后，发现有If-None-Match则根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200。

1.强缓存不发请求，协商缓存会发请求给服务器确认有没有过期
2.强缓存文件更新浏览器不知道，协商缓存更新浏览器能实时知道

1.点击浏览器的刷新按钮时，全部走缓存
2.F5或者鼠标右键刷新强制缓存失效，不影响协商缓存
3.CTRL+F5影响强制缓存和协商缓存都失效

② 浏览器缓存怎么清理 让你的电脑跑得更快

以下是一些清理浏览器缓存的方法：

无论使用哪种方法，清理浏览器缓存都是一个简单但非常有效的方法来提高浏览器性能，让你的电脑跑得更快。

以下是一些清理浏览器缓存的方法：

无论使用哪种方法，清理浏览器缓存都是一个简单但非常有效的方法来提高浏览器性能，让你的电脑跑得更快。

1. 使用浏览器自带的清理功能。大多数浏览器都提供了清理缓存的功能，可以通过浏览器设置或选项菜单中的“清除浏览数据”或“清除缓存”来实现。此方法可以清除浏览器缓存、历史记录、下载记录等。

1. 使用浏览器自带的清理功能。大多数浏览器都提供了清理缓存的功能，可以通过浏览器设置或选项菜单中的“清除浏览数据”或“清除缓存”来实现。此方法可以清除浏览器缓存、历史记录、下载记录等。

③ 浏览器缓存可以清理吗

问题一：怎么样清理浏览器缓存垃圾 使用浏览器会逐渐累积垃圾，导致计算机的运行过慢，因此保持日常性的清理是非常有必要的；
清理垃圾的操作可以分为浏览器本身清理或者采取电脑管家类的保护进行清理；

浏览器本身清理（以搜狗浏览器为例），点击浏览器工具选项，进入工具管理，点击清除浏览记录，在弹出窗口界面勾选需要清理的记录内容，点击立即清除即可；

利用浏览器以外的安全防护软件进行清理（以QQ管家为例），点击清理垃圾，等待扫描垃圾，扫描完成后点击立即清理完成清理即可。

问题二：IE浏览器怎么清理缓存 操作方法：请您点击任何一个网页上方的“工具”，选择“Internet选项”，然后弹出一个小窗口，以下是IE浏览器6.0、7.0、8.0的简单说明。 IE6.0 工具――Internet选项――删除Cookies、删除文件(勾选删除脱机文件) IE7.0 工具――Internet选项――删除――全部删除(勾选“也删除加载项存储的文件和设置”) IE8.0 工具――Internet选项――删除――勾选Internet临时文件、cookie(不勾选保留收藏夹网站数据)，点击删除 下面是IE浏览器5个不同版本的操作图，请您根据自己使用IE浏览器版本不同操作： IE6.0的浏览器： IE7.0的浏览器： IE8.0的浏览器： 搜狗(sogou)浏览器： 360浏览器： 下面补充一下IE9.0浏览器 点击“删除”，在打开的新窗口中取消勾选“保留收藏夹网站数据”，勾选其它选框，点击“删除”即可。 其他浏览器： 世界之窗(Theworld 3) 菜单栏 工具-----清除浏览记录 选择要清理的内容，点击“立即清理”即可。 火狐浏览器(Firefox 4) 菜单栏 工具-------清空最近历史记录 弹出界面，单击“详细信息” 选择要删除的内容，选择历史记录的时间，单击“立即清除”即可。 360极速浏览器(360 chrome) 右侧“扳手”图标-------工具-------清除浏览数据 选择要清除的内容和时间，单击“清除浏览数据”即可。 网络浏览器 点击右侧齿轮状图标-------清除浏览记录 弹出对话框 选择需要清除的时间和内容，单击“清除”即可。 谷哥浏览器(Google Chrome) 右侧“扳手”图标-------工具-------清除浏览数据 弹出对话框，选择清除内容和时间，单击“清除浏览数据”即可。 傲游浏览器(Maxthon 2) 菜单栏 工具------清除记录 弹出对话框 选择你要清除的内容，单击“开始清除”即可 Opera 11 工具栏 菜单-------设置--------删除私人数据 弹出对话框，点击“详细选项” 选择你要删除的内容，单击“删除”即可 腾讯TT浏览器 菜单栏 工具-------清除浏览记录 弹出对话框 点击“全选”------“清除”即可。 苹果浏览器(Safari) 点击右侧齿轮状图标--------勾选显示菜单栏 菜单栏 编辑-------清空缓存 弹出确认对话框，点击“清空”。 菜单栏 历史记录------清除历史记录 弹出对话框，点击“清除”。 注：更多精彩教程请关注三联软件使用栏目

问题三：如何清除浏览器缓存？ 浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。
清除缓存的方法：

IE浏览器：

打开IE，选择“工具--internet选项”，切换到“高级”选项卡，找到“关闭浏阀器时清空internet临时文件夹”，并将其选中，确定即可；

Mozilla Firefox 浏览器：

a、单击浏览器顶部的Tools（工具）菜单，并选择Options（选项）；

b、单击Privacy（隐私）；

c、单击Cache（高速缓冲）旁边的Clear（清空缓存）；

d、单击OK（确定）；

Mozilla、Netscape浏览器：

a、注销您的 AdSense帐户。关闭所有其他打开的浏览器窗口；

b、单击浏览器顶部的Edit（编辑）菜单，然后选择Preferences（首选项）；

c、单击Advanced（高级）旁边的+；

d、单击Advanced（高级）下面的Cache（高速缓存）；

e、单击Clear Cache（清除高速缓存）；

f、单击OK（确定）；

Safari 浏览器：

a、注销您的 AdSense 帐户。关闭所有其他打开的浏览器窗口；

b、打开浏览器工具栏中的Safari菜单；

c、选择Empty Cache（清空缓存）；

d、单击该对话框中的Empty（清空）。

问题四：浏览器缓存的临时文件可以删除吗 可以，浏览器缓冲文件的作用是暂时保存网页里触素材，使下次打开相同网页时速度会快一些。删除后完全不会影响到使用。定期清理浏览器缓存可以释放磁盘空间，是个好习惯。

问题五：清理IE缓存什么意思对电脑有没有用 每次上网打开的网页在电脑上都会有记录.这些记录会占用很大的空间.所以需要手动地删除.
但是,如果你打开的网页是你以前曾浏览过的,也就是IE缓存里有的,则打开的速度要快些.所以如果你删除IE缓存,会影响打开网页的速度.

因此,建议你过一段时间再删除一次.

问题六：网络浏览器怎么清理缓存 打开网络浏览器最新版本7.0，点击右上角“三”菜单

问题七：如何彻底清除浏览器的缓存？ 最好卸载了重新安装，彻底。
也可以换个好点的浏览器，我现在用的QQ浏览器清理缓存功能很好。

它是采用的国产单核浏览器，基于谷歌Chrome开源项目，速度是刚刚的。

用它浏览网页的时候，可以瞬间开启20多个网页。我经常开视频，在上面一点也没有感觉卡，

纯属个人建议。供你参考。

问题八：能用JS或者前端的什么方法实现清除浏览器缓存吗 meta方法
不缓存

清理form表单的临时缓存

其实form表单的缓存对于我们书写还是有帮助的，一般情况不建议清理，但是有时候为了安全问题等，需要清理一下！

jquery ajax清除浏览器缓存

方式一：用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control,如下:

$.ajax({

url:'haorooms',

dataType:'json',

data:{},

beforeSend :function(xmlHttp){

xmlHttp.setRequestHeader(If-Modified-Since,0);

xmlHttp.setRequestHeader(Cache-Control,no-cache);

},

success:function(response){

操作

}

async:false

});

方法二，直接用cache:false,

$.ajax({

url:'haorooms',

dataType:'json',

data:{},

cache:false,

ifModified :true ,

success:function(response){

操作

}

async:false

});

方法三：用随机数，随机数也是避免缓存的一种很不错的方法！

URL 参数后加上 ?ran= + Math.random(); 当然这里参数 ran可以任意取了

方法四：用随机时间，和随机数一样。

在 URL 参数后加上 ?timestamp= + new Date().getTime();...>>

④ ☆前端优化：浏览器缓存技术介绍

在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。 其中提高网页反应速度的一个方式就是使用缓存 。缓存技术一直一来在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， 因为如果不启用强缓存的话，协商缓存根本没有意义 。

如果资源已经被浏览器缓存下来，在缓存失效之前，再次请求时，默认会先检查是否命中强缓存，如果强缓存命中则直接读取缓存，如果强缓存没有命中则发请求到服务器检查是否命中协商缓存，如果协商缓存命中，则告诉浏览器还是可以从缓存读取，否则才从服务器返回最新的资源。其浏览器判断缓存的详细流程图，如下：