前端强缓存和协商缓存

缓存是前端面试的一个常见知识点，下面对于实际项目中如何进行缓存的设置给出方案。

强缓存和协商缓存

浏览器缓存是浏览器将用户请求过的静态资源存储到电脑本地磁盘中，当再次访问时，就可以直接从本地缓存中加载而不需要去向服务器请求了。但是缓存也有缺点，如果服务端资源更新了，客户端没有强制刷新的情况下，看到的内容还是旧的。所以，前端需要根据项目中各个资源的实际情况，做出合理的缓存策略。这就出现了强缓存和协商缓存。

强缓存：通过http的response header中的Cache-Control和Expire两个字段控制。其中Expire基本上已经淘汰了，不用管，主要看Cache-Control的几个取值含义：

private：仅浏览器可以缓存

public：浏览器和代理服务器都可以缓存

max-age=xxx：过期时间

no-cache：不进行强缓存

no-store：不强缓存，也不协商缓存

强缓存步骤：1，第一次请求文件时，缓存中没有该信息，直接请求服务器。

                      2，服务器返回请求的文件，并且http response header中cache-control为max-age=xxx

                      3，再次请求该文件时，判断是否过期，如果没有过期，直接读取本地缓存，如果已经过期了，则进行协商缓存。

协商缓存：它的触发条件有两点，其一是Cache-Control 的值为 no-cache，其二是max-age 过期了。协商缓存中还有两个重要的规则：

ETag：每个文件有一个，改动文件了就变了

Last-Modified：文件的修改时间

协商缓存步骤：1，请求资源时，要同时比较本地该资源的ETag和Last-Modified（主要是ETag）和服务器最新资源该资源的ETag

                         2，如果资源没有被更新，返回304状态码，浏览器读取本地缓存

                         3，如果资源已经被更新，返回200状态码，浏览器获取服务器最新资源。

最大的问题就是每次都要向服务器验证一下缓存的有效性，但是这就使缓存失去了意义。

所以，给出一个比较合理的缓存方案：

HTML：使用协商缓存

CSS&JS&图片：使用强缓存

 

ETag计算

Nginx

Nginx官方默认的ETag计算方式是为"文件最后修改时间16进制-文件长度16进制"。例：ETag： “59e72c84-2404”

Express

Express框架使用了serve-static中间件来配置缓存方案，其中，使用了一个叫etag的npm包来实现etag计算。

 

后端需要怎么设置

以nodejs为例，如果需要浏览器强缓存，可以这样设置：

res.setHeader('Cache-Control', 'public, max-age=xxx');

如果需要协商缓存，则可以这样设置：

res.setHeader('Cache-Control', 'public, max-age=0');
res.setHeader('Last-Modified', xxx);
res.setHeader('ETag', xxx);