一、缓存
浏览器与服务器之间通过http header传递缓存信息，通过设置http header配置缓存机制。

cache-control

1. cache-control可以在http request header中存在
2. 也可以在http response header中存在
3. 其作用就是让浏览器与服务器相互知道各自那边的缓存策略情况。

cache-control的属性

1. max-age:指定缓存的最大有效时间。在这段时间之内有效，浏览器不用再向服务器请求，直接从缓存中读。status:200(from memory cache)。expires是过期时间配置（http1.0），优先级没有max-age高。
2. s-maxage:如果既设置了max-age又设置了s-maxage。返回状态是304（去CDN拿的）。s-maxage只能指定public的缓存时间，比如CDN、代理服务器。
   private缓存设备：只适用于当前用户访问并且读取信息。
   public缓存设备：能被很多用户访问并且读取信息的。
   s-maxage优先级高于max-age.
   s-maxage对于public缓存设备来说才是有效的。
   所以，s-maxage是对于CDN这样公共的public缓存设备来说的资源过期时间，浏览器从CDN取得资源，返回状态码304。
3. no-cache:不会直接去浏览器缓存中读，会发请求到服务器，通过服务器的一些信息（比如：last-modified）来判断浏览器端的缓存是否过期，从而知道缓存策略。
4. no-store:对资源不使用任何缓存策略。

Expires

Expire:缓存过期时间，用来指定资源的到期时间，是服务器端的具体时间点，告诉浏览器在过期时间前，浏览器可以直接从浏览器缓存取数据，而无需再次请求。

max-age也是这个意思，但max-age优先级高于expires，当没有设置max-age时，expires就生效。

expires和max-age都是浏览器端的缓存策略，在过期时间之前，都直接从浏览器缓存中读取数据。

但当服务器文件资源发生变化后，浏览器端并不会更新资源，这就引出了Last-Modified和If-Modified-Since这两字段。

Last-Modified、If-Modified-Since

• 基于客户端和服务端协商的缓存机制，可以取得最新的资源
• Last-Modified——response header
• If-Modified-Since——request header
• 需与cache-control共同使用

返回304，服务端资源没更新，客户端直接从缓存中读取资源。
返回200，服务端资源更新了，并发给客户端一份更新过的文件。

也就是说，当cache-control配了max-age，且max-age没有过期，会优先走max-age，从浏览器中读相关的文件，当max-age过期后，浏览器和服务器才会通过Last-Modified / If-Modified-Since进行协商，由服务端控制合理的缓存方式。

但Last-Modified有缺点。

Last-Modified的缺点

1. 某些服务端不能获取精确的修改时间，也就不能准确返回。
2. 文件修改时间改了，但文件内容却没有变

Etag的出现解决了该问题。

Etag / If-None-Match

1. 文件内容的hash值，能唯一标识文件，当文件内容改变，hash值会跟着变化。
2. Etag——response header
3. If-None-Match——request header
4. 需要与cache-control共同使用

实际上就是——分级缓存策略

通过对服务端的配置实现缓存策略。

二、缓存流程图

二、服务端性能优化

Vue渲染面临的问题是什么？为什么要用vue-ssr

多层次的优化方案

1. 构建层模板编译
   在webpack构建的时候将模板语法template编译成浏览器可以直接执行的html代码。
2. 数据无关的prerender的方式
   将每个用户看起来都一样的页面在webpack构建层直接编译成html代码，用户直接访问html，这样在浏览器端不会执行vue相关的代码。
3. 服务端渲染
   将浏览器端要做的运算移到服务端，是运算能力的平衡。
   在服务端获取数据渲染页面，返回给浏览器html，能直接渲染出页面。
   （vue-ssr:将首屏相关的一些数据在服务端直接生成html返回给客户端，客户端将html渲染出来，而不是在客户端执行相应的JS从而渲染出页面。所以，vue-ssr解决首屏渲染的问题）

功能概述：

1. 前端项目中有同一接口重复触发的并发现象
2. 一些公共数据接口，如用户信息，配置信息等接口需要多次获取
3. 首页有大量重复请求影响启动时间

适用条件：

1. 基本的公共数据和用户信息
2. get类获取数据接口
3. 基本原则就是缓存不更新或者更新周期较长的数据

大体思路：

1. 初次请求时将接口promise缓存到map对象中，map中的key名使用api名+参数拼接；下一次请求到同一key名的接口直接返回缓存中的promise；如果没有此key的promise使用正常的接口请求；

需求功能：

1. 同一个接口，需要区分参数进行存储接口名+参数，生成唯一字符串
2. 支持异步接口请求
3. 支持promise
4. 考虑并发的情况，同一接口同时触发的情况
5. 默认关闭缓存，通过接口参数设置单独开启缓存
6. 支持设置有效期，过期主动清除，取代惰性删除可能引起的内存溢出

实现代码：

/****************** promise方案封装 **********************/
class ItemCache {
  constructor(promise, timeout) {
      // data可存返回数据，也可存promise
      this.promise = promise
      // 设定超时时间，设定为多少秒
      this.timeout = timeout
      // 创建对象时候的时间，大约设定为数据获得的时间
      this.cacheTime = (new Date()).getTime()
  }
}
class ExpriesCache {
  // 定义静态数据map来作为缓存池
  static cacheMap =  new Map()
  // 数据是否超时
  static isOverTime(name) {
      const promise = ExpriesCache.cacheMap.get(name)
      // 没有数据 判定超时
      if (!promise) return true
      // 获取系统当前时间戳
      const currentTime = (new Date()).getTime()        
      // 获取当前时间与存储时间的过去的秒数
      const overTime = (currentTime - promise.cacheTime) / 1000
      // 如果过去的秒数大于当前的超时时间，也返回null让其去服务端取数据
      if (Math.abs(overTime) > promise.timeout) {
          // 惰性清除过期数据
          ExpriesCache.cacheMap.delete(name)
          return true
      }
      // 不超时
      return false
  }
  // 当前data在 cache 中是否超时
  static has(name) {
      return !ExpriesCache.isOverTime(name)
  }
  // 删除 cache 中的 data
  static delete(name) {
      return ExpriesCache.cacheMap.delete(name) 
  }
  // 获取缓存
  static get(name) {
      const isDataOverTiem = ExpriesCache.isOverTime(name)
      console.log(isDataOverTiem)
      //如果 数据超时，返回null，但是没有超时，返回promise
      return isDataOverTiem ? null : ExpriesCache.cacheMap.get(name).promise
  }
  // 设置存储，默认过期时间600秒
  static set(name, promise, timeout = 600) {
      // 设置 itemCache
      const itemCache = new ItemCache(promise, timeout)
      // 缓存
      ExpriesCache.cacheMap.set(name, itemCache)
      // 定时器主动清除过期数据
      setTimeout(()=>{
        console.log('删除过期数据',name)
        ExpriesCache.delete(name)
      }, timeout*1000)
      console.log(ExpriesCache.cacheMap)
  }
  // 声明key接口名 name+参数拼接
  static getName(name,params) {
    const paramsUrl = tool.paramsUrl(params)
    const key = name + paramsUrl
    return key
  }
}

/****************** 缓存使用 **********************/
actions.forEach(item => {
  let name = item.name || item.action;
  api[name] = async params => {
    params = params || {}
    for (let i in params) {
      params[i] = params[i] != 0 ? params[i] || '' : params[i];
    }
    let result = await api.getopenid();
    let opendata = {
      openid: result["openid"],
      sign: result["sign"]
    }
    if (item.action === 'get_union_id' || item.action === 'wx_decode_data') {
      opendata["session_key"] = result['session_key'];
    }

    // 是否开启缓存,获取属性后删除该参数
    let isCache = params && params.isCache
    params && params.isCache && delete params.isCache

    // 生成key
    let key = ExpriesCache.getName(name,params);
    // 获得数据
    let promise = ExpriesCache.get(key)
    if(isCache && promise){
      // 返回缓存数据******
      console.log(key)
      return promise
    }else{
      // 正常请求接口流程
      const promise = new Promise((resolve, reject) => {
        http.request({
          url: item.url,
          data: {
            action: item.action,
            t: Date.now(),
            ...opendata,
            ...params,
          }
        }).then(res => {
          return resolve(res)
        }).catch(err => {
          hideLoading()
          return reject(err)
        })
      })
      // 设置promise缓存
      isCache && ExpriesCache.set(key, promise, 10,) 
      return promise
    }
  }
})

注：该方案借鉴了其他技术大佬的方案，因大家发的都一样，不知道原作者是谁，故无备注参考文章地址