一、HTTP响应头、请求头中与缓存控制的相关字段

二、一个页面访问缓存的流程

三、三种刷新的实际操作

四、如何设置缓存

 

一、HTTP响应头、请求头中与缓存控制的相关字段

  浏览器向服务器发起请求后,服务器的响应头中一般会包含以下与缓存相关的字段:

  1.Expires:过期时间。(HTTP 1.0的字段)

  浏览器再次发起请求的时候会先检查是否超过这个时间,如果没超过则直接从缓存中读取信息。但是如果浏览器的时间和服务器的时间不一致,就会出现问题。

  2.Cache-control:max-age=6000(毫秒)/no-cache/no-store/private/public (HTTP 1.1的字段)

  同时设置Expires和max-age的情况下,使用max-age

  3.Last-Modified:最后一次修改时间。

  4.Etag:被请求变量的实体标记。它的计算是通过服务器端的算法得来的,优先级高于Last-Modified。

 

  浏览器再次向服务器发起请求,请求头中一般会包含以下与缓存相关的字段:

  1.Cache-control:max-age=0

  2.If-Modified-Since:把响应头中的Last-Modified发至服务端与被请求资源的最后修改时间进行对比

   若最后修改时间大于If-Modified-Since,则表明资源已更改,响应整个资源返回200,否则返回304。

  3.If-None-Match:把响应头中的Etag发至服务端与服务端的实体标记进行对比

   若相同,则表明资源未更改返回304,否则响应整个资源返回200。

 

  (Etag/If-None-Match的优先级高于Last-Modified/If-Modified-Since)

 

二、一个页面访问缓存的流程

   

三、三种刷新的实际操作

  1.输入URL,按回车:浏览器发现缓存中有这个资源,就直接从缓存中拿。

  2.F5:即使缓存中有这个资源,也会去服务器确认该资源是否更改。

  3.Ctrl+F5:先把缓存中的资源删了,再去服务器请求完整的资源文件。

四、如何设置缓存

  1.配置apache或ngix服务器(不太了解该方式)

  2.在服务器响应头中动态设置

  3.在前端HTML页面的Meta标签中设置(该方法并不是所有浏览器都支持,且代理服务器不支持该方法,因为代理服务器不会解析HTML页面)

  <meta http-equiv="cache-control" content="max-age=600000" />

  <meta http-equiv="expires" content="..." />

  4.在请求中用setRequestHeader()方法设置请求头,可设置不使用缓存或者更改相应字段(如设置If-None-Modified等)

 

  (此文为个人对缓存控制的一些梳理,欢迎大家共同交流学习~)