浏览器缓存知识笔记

浏览器缓存知识小结及应用 笔记：

一、强缓存的两种方式：Expires与Cache-Control

　　a、强缓存在C#中的设置

      context.Response.AppendHeader("Cache-Control", "max-age=1000");
      context.Response.AppendHeader("Expires", DateTime.Now.AddMilliseconds(30 * 1000).ToUniversalTime().ToString("r"));

　　　注意：Expires必须设置为GMT时间

　　b、强缓存在iis中的设置：选择某一应用，在HTTP响应表头中添加响应头便可

　　c、Expires与Cache-Control一块儿使用，且Cache-Control包含超时设置（即max-age）时，Cache-Control覆盖Expires的做用

 

二、协商缓存【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】

　　a、【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】同时使用时，IIS服务器端会同时验证二者，当都知足时则返回304状态

　　　　补充：tomcat对二者同时使用的处理方式为先验证Modified，如不一样才会验证etag

　　b、协商缓存表头通常是由web服务器设置，在iis中，对mime类型中存在的文件类型（如htm、js、css等，但无aspx）的请求，iis会在响应头中添加这两类表头

 

三、chrome的默认行为

　　a、在地址栏中输入url并回车，这种方式请求的页面会按正常的方式处理缓存，即强缓存-》协商缓存-》服务器直接加载资源

　　b、f5刷新页面，这时将忽略Expires与Cache-Control表头，即忽略强缓存，但保留协商缓存

　　c、ctrl + f5强制刷新页面，这时将忽略强缓存及协商缓存，发出新的请求直接从服务器加载资源

　　d、强制从新加载包括图片在内的资源的方式：一、ctrl+shift+delete删除浏览器的缓存，从新加载页面；二、f12中，选中disabled cache复选框

 　  e、f5与ctrl + f5并不会影响页面内iframe的缓存策略，即对于iframe，当主页面使用这两种方式刷新时，iframe的效果等同与在地址栏中输入url并回车；iframe清缓存的方式是右击-》从新加载框架（与按f5的效果相同）

　　f、浏览器对css、js、图片等静态文件默认增强缓存，而对html、aspx等文件不会。补充：文件类型的判断依据是返回的Content-Type，而非请求文件的后缀名；另外，http响应类型为静态文件且响应头中有协商缓存的标记时，该请求才会增强缓存

　　    补充：http响应类型为text/html（.aspx, .html均返回该类型）， 或者浏览器解析为document或xhr时，增强缓存无效，协商缓存依然生效

　　g、强缓存与协商缓存的索引方式为key-value，key为请求的url，所以，url中加版本号或随机数能够达到清理缓存的效果

　　h、chorme新版本下，对于浏览器自动增强缓存的文件，f5不会忽略强缓存，直接从缓存中读取，还没有找到该状况下直接忽略强缓存而使用协商缓存的方法，ctrl + f5功能依旧；ie11下，浏览器不会对静态资源增强缓存，所以在地址栏中输入url并回车，或者f5，会使用协商缓存，另外，响应类型并不影响浏览器的缓存策略

 

其余相关文章：

浅谈浏览器http的缓存机制

做为前端应当了解的Web缓存知识

Caching Tutorial

 

chrome下，离线缓存manifest细节梳理：

一、manifest文件后缀推荐为".appcache"，mime类型须设为"text/cache-manifest"

二、manifest文件中须缓存的文件列表使用相对路径时，是相对于manifest文件

三、使用离线缓存的页面文件（如.html、.aspx等）会自动缓存，不须要添加到manifest文件的缓存列表中

四、页面初始加载时事件的触发顺序：checking - downloading - progress - cached

　  页面刷新时事件的触发顺序：checking - noupdate

　  manifest文件更改时事件的触发顺序：checking - downloading - progress - updateready

五、离线缓存存在时，全部资源（包括页面文档）均从缓存中加载；同时，事件checking中检查manifest文件，若是有更新，则下载并更新缓存

六、F5或Ctrl + F5对离线缓存无效，即依然从缓存中加载；清除浏览器缓存能够清除离线缓存

七、离线缓存与强缓存、协商缓存并不冲突，判断顺序是：离线缓存 - 强缓存 - 协商缓存

参考：

W3School

HTML5 使用application cache 接口实现离线数据缓存

《Javascript高级程序设计》