浏览器缓存带来最大价值是减少带宽，搞懂 HTTP 协议中有关缓存的部分很有价值。

浏览器缓存放置位置

浏览器缓存当然放在本地咯，放置的位置：

  • IE C:\Documents and Settings\danjiang\Local Settings\Temporary Internet Files
  • Firefox 浏览器地址栏输入 about:cache

缓存协商

浏览器通过 HTTP 协议和服务器交流，来处理浏览器缓存，具体相关信息。

Last-Modified

  1. 前提是基于 GET 类型请求，对于 POST 类型的请求，浏览器一般不启用本地缓存；
  2. 浏览器第一次请求资源后，服务器在 HTTP 响应头中包含 Last-Modified 信息，并返回响应体；
  3. 浏览器再次请求同一资源，HTTP 请求包含 If-Modified-Since 的信息；
  4. 服务器收到此信息进行比较后得出所请求的资源没有变动，服务器在 HTTP 响应头包含 304 Not Modified 的信息，浏览器直接从本地获取响应体。

Etag

采用一串编码来标记内容，通过编码是否改变判断内容是否改变，Last-Modified 的替换方法。

Expires

暗示浏览器在该内容过期之前不需要再询问服务器，而直接使用本地缓存即可。

Cache-Control

指定了缓存过期的相对时间，浏览器会根据这个值在本地计算出过期时间，避免了 Expires 指定的过期时间来自服务器，但本地时间和服务器时间不一致带来的问题。

请求页面的不同方式

  • Crtl+F5 强制刷新 —— 不使用缓存协商，获取所有内容的最新版本；
  • F5 一般刷新 —— Last-Modified 有效，Expries 无效；
  • 转到或超链接 —— Last-Modified 有效，Expries 有效。