浏览器缓存知识笔记

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

1、强缓存的两种方式: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的作用

2、协商缓存【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会在响应头中添加这两类表头

3、chrome的默认行为

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

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

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

  d、强制重新加载包括图片在内的资源的方式:1、ctrl+shift+delete删除浏览器的缓存,重新加载页面;2、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细节梳理:

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

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

3、使用离线缓存的页面文件(如.html、.aspx等)会自动缓存,不需要添加到manifest文件的缓存列表中

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

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

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

5、离线缓存存在时,所有资源(包括页面文档)均从缓存中加载;同时,事件checking中检查manifest文件,如果有更新,则下载并更新缓存

6、F5或Ctrl + F5对离线缓存无效,即依然从缓存中加载;清除浏览器缓存可以清除离线缓存

7、离线缓存与强缓存、协商缓存并不冲突,判断顺序是:离线缓存 - 强缓存 - 协商缓存

参考:

W3School

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

《Javascript高级程序设计》

原文地址:https://www.cnblogs.com/MattCheng/p/5531734.html