超实用的前端强缓存与协商缓存

超实用的前端强缓存与协商缓存

一、区别

强缓存：

缓存后完全不向服务器发起任何请求，只在缓存时间过期后才对服务器发起请求，
响应码为 200 (from memory cache)，即从内存中进行加载资源，请求时间为0ms以下

协商缓存：

请求时服务器根据请求头If-None-Match和If-Modified-Since来判断请求的资源有没有被修改过

(1)如果文件被修改过，则重新请求该文件，响应码为200，该文件从服务器重新下载进行加载，影响加载速度

(2)如果文件没有被修改过，则不下载该文件，响应码为304，该文件直接从本地内存中进行加载,从而优化网络请求速度

二、优先级

当Cache-Control 为 no-cache时，优先级大于 expires

当Cache-Control 有 max-age时， 优先级小于 expires

三、配置示例

配置示例仅为参考，具体location匹配正则规则，请按照自己项目需要进行匹配

# 强缓存时效为30s，30s后默认使用协商缓存，此时缓存时效优先级 > max-age
location / {
    add_header Cache-Control max-age=60;
    root   html;
    index  index.html index.htm;
    ex