WEB的网页缓存分析

Chrome会自动本次缓存Nginx的本地资源

• nginx在1.0之后的版本，当处理本地资源文件的时候，会自动追加Etag和Last-modified头部信息
• Chrome在收到一个资源携带了Date和Last-Modified头部，同时，没有Expires头部，会自动决定过期策略，简单的规则有个例子，不确定正确性，但是Chrome就是会保持这个过期策略，下次请求的时候会直接from memory cache
  • 简单来说没有Cache-Control头部，Cache-Control 默认为private, max-age=Date header 的值减去Last-modified header 值的10%
• 所以你的Chrome会自动缓存这些本地资源文件，包括js文件
• 所以你发布的最新js文件，Chrome访问的时候不会自动刷新

解决方案

• 你需要nginx在响应页面的时候，强制指定expire策略，而不是由chrome来自动决定过期策略
• 一般来说，缓存策略设置的时间要较短，这样新发布的程序会更快的出现在终端浏览器中
• 即使设置了缓存策略，原来的ETag和Last-Modified头部，还是会生效的，因此，即使很快过期，如果服务器的资源真的没有变化，服务器也会快速响应304，不会真的重新下载整个资源

location ~* .(html|js|css|gif|jpg|jpeg|png) {      expires 300s;    }

特别说明

• nginx的Etag和Last-Modified会增强性能，不要关闭
• 当资源设置了Expires策略，那么在过期时间内，Chrome不会发送任何请求到nginx，直接使用本地页面，该请求在Network中会看到from memory cache的标记
• 当超过了本地过期策略，chrome会发送服务器请求，并携带该资源上次收到的ETag和Modified-Since，nginx一般在这个时候会返回304（如果资源没有修改），或者200（如果资源修改了）
• 你输入在URL的地址，Chrome认为是直接请求，会忽略本地的任何缓存，直接发送请求给服务器（携带Etag和Modified-Since），而页面引用的资源，Chrome会认为是间接资源，而使用本地缓存策略。
• 因此，有的时候你就会发现，如果你发布了新WEB程序，首页地址页面，会是最新的，但是引用的js和css，都是旧的，不会自动更新。就是上面说的原因造成的。
• 当然，通过在首页html页面，修改连接的js和css的路径地址，譬如增加一个版本号后缀，也会强制要求浏览器请求新的资源。因为浏览器是以完整的URL来决定缓存id的，追加了版本后缀浏览器认为是一个新的URL地址。