前端性能优化之http缓存

前不久，公司前端开会，领导抽问了4个问题，前3个简单你们都答起来了，第4个问题关于缓存的这方面我只是了解，结果恰好问到我了（会的不问，专门挑我不熟悉的问，我这运气真是没话说），20多个前端看着我，答得不是很好，感受很臊皮，遂从新研究并记录下成果。 ###讲下缓存以及200 form cache 和304的区别 若是每次都要求用户从服务器获取数据，那么速度和流量势必有问题，因此就须要http缓存来解决了。若是文件没有更新就用缓存起来的原文件。 缓存分为强缓存和协商缓存 强缓存是指不问服务器这个文件有没有更新，只要在缓存时间范围内，就使用缓存的文件，这时network上显示200 form cache， 有2个属性控制强缓存，Expires和Cache-Control: max-age，Expires是http 1.0定义的，使用的是相对时间，若是2边与服务器时间不统一就会出现问题，为了解决这个问题因而就出现了http 1.1定义的Cache-Control: max-age，这个属性使用的是相对时间，通常来讲都是2个都加，而后取相对时间属性。 协商缓存是先向服务器询问下是否文件有更新，根据服务器的提示来决定是否使用缓存，因为比强缓存多了去服务器询问这一步因此势必没有强缓存快。 协商缓存也有2对属性，分别是ETag和If-None-Match，Last-Modified和If-Modified-Since，每次请求的时候，浏览器会保存获取的ETag和Last-Modified，下次在调的时候会传If-None-Match和If-Modified-Since过去，值就是上次获取ETag和Last-Modified的值，而后根据返回的值是否有变化来决定是否取缓存的数据，Last-Modified是用时间来判断，ETag用标识符，之因此出现2个是由于Last-Modified只能精确到秒，若是1秒内有屡次数据调用，它就无能为力了，因此出现了进阶的ETag，使用协商缓存的时候status显示的是304

###工做中nginx+vue@cli3+缓存优化 工做中正常状况下除了html其他资源都使用强缓存，html使用协商缓存，当打包从新构建的时候，html使用协商缓存会发现html变了，而后从服务器读取新的html，因为打包后html引用的文件hash值不同，就会从新加载新的各类文件，可是经过查看hash值发现， 1 没有任何文件改动，app.js的hash值都会改变 2 明明改动的只有js文件，但app.js和app.css的hash都会改变 hash变了就意味着会从新加载，可是文件明明没有变化，为何要改变hash值，让某些文件白白多加载一次呢， 查找资料发现，HashedModuleIdsPlugin能够解决你的问题

configureWebpack: config => {
    return {
      plugins: [
        new webpack.DllReferencePlugin({
          context: process.cwd(),
          manifest: require('./public/vendor/vendor-manifest.json')
        }),
        // 在控制台中输出可读的模块名
        new webpack.NamedModulesPlugin(),
        // 不作改动hash保持不变
        new webpack.HashedModuleIdsPlugin()
       
      ]
    }
  },

还有一点颇有趣的是假如你想试着把html也设成强缓存（配置nginx来设置缓存时间），刷新浏览器页面，你会发现html仍是304，查看头部，发现Expires和Cache-Control: max-age这2个都有，可是为何仍是304呢，网上也没有讲这个的，后面瞎折腾发现，网页新起一个标签页，而后输入你的网页，第一次是用的强缓存，后面就是304了，虽然这点没什么用。。。