浏览器缓存基础

浏览器缓存(强缓存、协商缓存)

与缓存相关的http header

参考文章:http://web.jobbole.com/84888/
2016.04.09更新补充 http://www.alloyteam.com/2016/03/discussion-on-web-caching/

浏览器缓存的基本原理

  • 浏览器缓存分为强缓存和协商缓存

  • 浏览器缓存步骤:

    1. 浏览器加载资源时,首先会根据资源的一些http header判断资源是否命中强缓存,如果命中,则浏览器不向服务器端发送请求,而是直接在浏览器缓存中加载资源;

    2. 如果没有命中强缓存,则浏览器会向服务器发送一个请求,服务器根据资源另外的http header判断资源是否命中协商缓存,如果命中,则服务器端返回请求但是不返回资源,浏览器直接从缓存中加载资源;

    3. 如果强缓存和协商缓存都没有命中,则服务器返回资源

  • 强缓存和协商缓存的异同:

    • 二者都不从服务器加载资源,而是从浏览器缓存中加载

    • 强缓存不向服务器发送请求,协商缓存一定会向服务器端发送请求


强缓存的原理(查看缓存是否过期)

  • 强缓存命中后服务器会返回一个200代码

  • Expires和Cache-Control都是用来表示资源在缓存中的有效期

  • 二者可以只设置一个也可以都设置,Cache-Control的优先级比Expires高

Expires

绝对时间(GMT)

  1. 浏览器第一次从服务器请求资源时,服务器返回资源时会在Response header上添加Expires

  2. 浏览器接收资源后会把资源的所有response header都缓存下来

  3. 浏览器第二次请求同样的资源时,会先在缓存中查找该资源,并且将Expires与当前请求资源的时间相对比,如果请求时间在Expires的时间之前,则命中强缓存,从缓存中加载资源

  4. 如果没有命中,浏览器直接从服务器加载资源,Expires会在资源返回时更新

Cache-Control

相对时间(秒)

  1. 浏览器第一次从服务器请求资源时,服务器返回资源时会在Response header上添加Cache-Control

  2. 浏览器接收资源后会把资源的所有response header都缓存下来

  3. 浏览器再次请求相同的资源时,会先在缓存中查找该资源,查找到该资源后根据第一次请求的时间和Cache-Control设定的有效期比较,计算出一个时间;如果当前请求时间在该时间之前,则浏览器从缓存中加载资源

  4. 如果没有命中强缓存,则浏览器会从服务器加载资源,资源返回时会更新Cache-Control


协商缓存的原理(如果缓存过期了)

  • 协商缓存命中后服务器会返回一个304代码(Not Modified)

Last-Modified If-Modified-Since

  1. 浏览器第一次从服务器请求资源时,服务器会在返回资源时在response header上添加Last-Modified的header,Last-Modified代表资源最近一次在服务器端发生修改的时间

  2. 浏览器再次向服务器请求这个资源时,会在request header上添加If-Modified-Since,这个header的值即上一次请求该资源时服务器返回的Last-Modified的值

  3. 服务器收到请求后会在服务器端比较该资源最后一次发生修改的时间,如果该时间在If-Modified-Since之前,则命中协商缓存,返回304代码但是不返回资源,浏览器会在缓存中找到资源并加载

  4. 如果服务器端资源发生了更改,即改时间在If-Modified-Since之后,则服务器返回资源

5. 当服务器返回304代码时,将不会返回一个新的Last-Modified

Etag If-None-Match

  1. 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上ETag的header,这个header是服务器根据当前请求的资源生成的一个唯一标识,这个唯一标识是一个字符串,只要资源有变化这个串就不同,跟最后修改时间没有关系

  2. 浏览器再次向服务器请求这个资源时,会在request header上添加If-None-Match,这个header的值即上一次请求该资源时服务器返回的ETag的值

  3. 服务器收到请求后会根据服务器端的资源重新生成一个Etag,并且与请求中的If-None-Match对比,如果相同则命中协商缓存,返回304,浏览器从缓存中加载资源

  4. 如果不一致,则从服务器加载资源

  5. 不管是否命中协商缓存,服务器都会重新返回Etag,就算两者一致