转载自前端缓存最佳实践

前端缓存的最佳实践

强缓存和协商缓存

强缓存

强缓存主要是通过http请求头中的Cache-Control和Expire两个字段控制。Expire是HTTP1.0标准下的字段。

一般，我们会设置Cache-Control的值为'public, max-age=xxx'，表示在xxx秒内再次访问该资源均适用本地的缓存，不再向服务器发起请求。

显而易见，如果在xxx秒内，服务器上面的资源更新了，客户端在没有强制更新的情况下，看到的内容还是旧的。

协商缓存

协商缓存最大的问题就是每次都要向服务器验证一下缓存的有效性，似乎看起来很省事，不管那么多，你都要问一下我是否有效。每次都去请求服务器，那要缓存还有什么意义。

最佳实践

缓存的意义就在于减少请求，更多的使用本地的资源，给用户更好的体验的同时，也减轻服务器压力。所以最佳实践，就应该尽可能命中强缓存，同时，能在更新版本的时候让客户端的缓存失效。

在更新版本后，如何让用户第一时间使用最新的资源文件呢？机智的前端想到一个办法，在更新版本的时候，把静态资源的路径改了，这样就相当于第一次访问这些资源，就不会有缓存的问题了。

伟大的webpack可以让我们打包的时候，在文件的命名上带hash值。

entry: {
    main: path.join(__dirname, './main,js'),
    vendor: ['react', 'antd']
},
output: {
    path: path.join(__dirname, ',./dist'),
    publicPath: '/dist/',
    filename: 'bundle.[chunhash].js'
}

综上所述，我们可以得出一个较为合理的缓存方案：

HTML：使用协商缓存
CSS & JS & 图片: 使用强缓存，文件名带上hash 值

哈希也有讲究

webpack给我们提供了三种哈希值计算方式，分别是hash、chunkhash和contenthash。那么这三种有什么区别呢？

hash: 跟整个项目的构建相关，构建生成的文件hash值都是一样的，只要项目里有文件更改，整个项目构建的hash值都会更改
chunkhash：根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。
contenthash: 由文件内容产生的hash值，内容不同产生的contenthash值也不一样

当然我们是不会用第一种的。改了一个文件，打包之后，其他文件的hash都变了，缓存自然失效了。这不是我们想要的。

那chunkhash和contenthash的主要应用场景是什么呢？在实际项目中，我们一般会把项目中的css都抽离出对应的css文件来引用。如果我们使用chunkhash，当我们改了css代码之后，会发现css文件hash值改变的同时，js文件的hash值也会改变。这时候contenthash就派上用场了。

ETag计算

Nginx

Nginx官方默认的ETag计算方式是为‘文件最后修改时间16进制’。例： ETag: '59e72c84-2404'

Express

Express框架使用了server-static中间件来配置缓存方案，其中，使用了一个叫etag的npm包来实现etag计算。从源码可以看出，有两种计算方式：

方式一：使用文件大小和修改时间

function stattag(stat) {
  var mtime = stat.mtime.getTime().toString(16)
   var size = stat.size.toString(16);
   return ' " ' + size + '-' + mtime + ' " '
}

方式二：使用文件内容的hash值和内容长度

function entitytag(entity) {
  if (entity.length === 0) {
    // fast-path empty
    return '"0-2jmj7l5rSw0yVb/vlWAYkK/YBwk"'
  }

  // compute hash of entity
  var hash = crypto
    .createHash('sha1')
    .update(entity, 'utf8')
    .digest('base64')
    .substring(0, 27)
}

// compute length of entity
 var len = typeof entity === 'string' ?
    Buffer.byteLength(entity, 'utf8') :
    entity.length;

return '"' + len.toString(16) + '-' + hash + '"'

Etag 与 Last-Modified谁优先

协商缓存，有Etag和Last-Modified两个字段。那当这两个字段同时存在的时候，会优先以哪个为准呢？
在Express中，使用了fresh这个包来判断是否是最新的资源。主要源码如下：

function fresh (reqHeaders, resHeaders) {
  // fields
  var modifiedSince = reqHeaders['if-modified-since']
  var noneMatch = reqHeaders['if-none-match']

  // unconditional request
  if (!modifiedSince && !noneMatch) {
    return false
  }

  // Always return stale when Cache-Control: no-cache
  // to support end-to-end reload requests
  // https://tools.ietf.org/html/rfc2616#section-14.9.4
  var cacheControl = reqHeaders['cache-control']
  if (cacheControl && CACHE_CONTROL_NO_CACHE_REGEXP.test(cacheControl)) {
    return false
  }

  // if-none-match
  if (noneMatch && noneMatch !== '*') {
    var etag = resHeaders['etag']

    if (!etag) {
      return false
    }

    var etagStale = true
    var matches = parseTokenList(noneMatch)
    for (var i = 0; i < matches.length; i++) {
      var match = matches[i]
      if (match === etag || match === 'W/' + etag || 'W/' + match === etag) {
        etagStale = false
        break
      }
    }

    if (etagStale) {
      return false
    }
  }

  // if-modified-since
  if (modifiedSince) {
    var lastModified = resHeaders['last-modified']
    var modifiedStale = !lastModified || !(parseHttpDate(lastModified) <= parseHttpDate(modifiedSince))

    if (modifiedStale) {
      return false
    }
  }

  return true
}

我们可以看到，如果不是强制刷新，而且请求头带上了if-modified-since和if-none-match两个字段，则先判断etag,在判断last-modified。

前端缓存最佳实践